/* 3-role security model */
.role-disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  transform:none !important;
  filter:grayscale(.15);
}
.role-investor input:disabled,
.role-investor select:disabled,
.role-investor textarea:disabled{
  background:#f3f6f3;
  color:#6a7771;
}
.role-owner .userbox{
  border-color:rgba(184,132,47,.35);
}
.role-admin .userbox{
  border-color:rgba(11,93,67,.35);
}
.role-investor .userbox{
  border-color:rgba(100,116,139,.35);
}


:root{
  --bg:#f3f6f3;
  --panel:#ffffff;
  --ink:#10201a;
  --muted:#6a7771;
  --line:#dfe8e3;
  --green:#0b5d43;
  --green2:#0f7a55;
  --green3:#e9f6f0;
  --gold:#b8842f;
  --red:#b42318;
  --blue:#2563eb;
  --shadow:0 16px 40px rgba(16,24,40,.08);
  --shadow-soft:0 8px 24px rgba(16,24,40,.05);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 0%, rgba(11,93,67,.10), transparent 30%),
    linear-gradient(180deg,#f7faf8 0%, var(--bg) 100%);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
.login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(135deg,#073225,#0f694b 55%,#111827);
}
.glass{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
}
.login-card{
  width:470px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:34px;
  padding:32px;
  box-shadow:0 28px 80px rgba(0,0,0,.25);
}
.login-brand{display:flex;align-items:center;gap:15px;margin-bottom:18px}
.logo,.brand-mark{
  width:54px;height:54px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#148257,#08382a);
  color:white;font-weight:900;letter-spacing:.5px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.login h1{font-size:28px;margin:0}
.login-brand p{margin:4px 0 0;color:var(--muted);font-size:13px}
.sub{color:var(--muted);line-height:1.6;margin:0 0 22px}
label{font-size:12px;font-weight:800;color:#33443d;letter-spacing:.2px}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  background:white;
  outline:none;
  color:var(--ink);
  transition:.16s;
}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:#87cbb2;
  box-shadow:0 0 0 4px rgba(15,122,85,.12);
}
.login input{margin:6px 0 13px}
.btn,button{
  border:none;
  border-radius:16px;
  padding:11px 15px;
  background:var(--green);
  color:white;
  font-weight:850;
  cursor:pointer;
  transition:.16s;
  box-shadow:0 8px 18px rgba(11,93,67,.18);
}
.btn:hover,button:hover{transform:translateY(-1px);opacity:.96}
.btn-full{width:100%;margin-top:4px}
.btn.ghost,button.secondary,.ghost{
  background:white;
  color:var(--green);
  border:1px solid #c9e2d7;
  box-shadow:none;
}
.btn.light{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);box-shadow:none}
.btn.gold,.gold{background:var(--gold);color:white}
.btn.danger,.danger{background:var(--red);color:white}
button.small{padding:7px 10px;border-radius:10px;font-size:12px}
.help{font-size:13px;color:var(--muted);line-height:1.65}
.login-help{margin:14px 0 0;text-align:center}

.app{display:none}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:292px;
  background:linear-gradient(180deg,#072b21 0%,#0a3d2e 100%);
  color:white;padding:24px 18px;z-index:5;
  box-shadow:12px 0 36px rgba(15,23,42,.15);
}
.brand{
  display:flex;gap:13px;align-items:center;
  padding:10px 8px 22px;margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.brand h2{font-size:17px;margin:0;letter-spacing:.15px}
.brand span{display:block;color:#bdebd7;font-size:12px;margin-top:4px}
.nav{display:grid;gap:8px}
.nav button{
  width:100%;text-align:left;background:transparent;border:1px solid transparent;
  color:#def4eb;border-radius:18px;padding:12px 13px;box-shadow:none;
}
.nav button span{display:block;font-size:14px;font-weight:900}
.nav button small{display:block;font-size:11px;color:#acd9c5;margin-top:3px}
.nav button.active,.nav button:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.14);
  transform:none;
}
.userbox{
  position:absolute;left:18px;right:18px;bottom:18px;
  display:flex;gap:12px;align-items:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:13px;
}
.avatar{width:38px;height:38px;border-radius:14px;background:#e7f8ef;color:#0b5d43;font-weight:900;display:flex;align-items:center;justify-content:center}
.userbox b,.userbox span,.userbox small{display:block}
.userbox b{font-size:13px}
.userbox span{font-size:12px;color:#c7eadb}
.userbox small{font-size:11px;color:#a7d6c2;margin-top:2px}

.main{margin-left:292px;min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 30px;background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(223,232,227,.85);
  box-shadow:0 8px 28px rgba(16,24,40,.045);
}
.eyebrow{
  margin:0 0 5px;
  color:var(--green);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:1.2px;
  font-weight:900;
}
.topbar h1{font-size:25px;margin:0}
.topbar p:not(.eyebrow){margin:5px 0 0;color:var(--muted);font-size:13px}
.top-actions,.button-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.content{padding:28px 30px 42px;max-width:1560px}
.section{display:none}
.section.active{display:block}
.mt{margin-top:18px}
.grid{display:grid;gap:18px}
.two{grid-template-columns:1.45fr 1fr}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-2{grid-column:span 2}
.dashboard-kpis{grid-template-columns:repeat(5,minmax(220px,1fr))}
.card{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:20px;
}
.dashboard-hero{
  display:flex;justify-content:space-between;gap:20px;align-items:center;
  background:linear-gradient(135deg,#0b5d43,#10382c);
  color:white;border-radius:30px;padding:26px 28px;margin-bottom:18px;
  box-shadow:var(--shadow);
}
.dashboard-hero h2{font-size:29px;margin:0 0 8px}
.dashboard-hero p{margin:0;color:#d9f4e9;max-width:780px;line-height:1.55}
.dashboard-hero .eyebrow{color:#b8ead4}
.kpi{
  position:relative;overflow:hidden;min-height:168px;
  cursor:default;
}
.kpi::after{
  content:"";position:absolute;right:-44px;top:-44px;width:120px;height:120px;border-radius:999px;
  background:linear-gradient(135deg,#e9f6f0,#dff2ea);opacity:.85;z-index:0;pointer-events:none;
}
.kpi > *{position:relative;z-index:1}
.kpi-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.kpi-top span{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;max-width:80%}
.kpi-top em{font-style:normal;font-size:10px;color:var(--green);background:#e9f6f0;border:1px solid #cde7dc;padding:5px 7px;border-radius:999px;font-weight:900}
.kpi .value{font-size:31px;line-height:1.08;font-weight:950;margin-top:18px;letter-spacing:-1px}
.kpi .note{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.4;max-width:92%}
.kpi.primary{background:linear-gradient(135deg,#ffffff,#f1fbf7)}
.profit-card .value.profit{color:#047857}
.profit-card .value.loss{color:var(--red)}
.clickable-card{cursor:pointer;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.clickable-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b5dacc}
.section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.section-head h3,.card h3{margin:0;font-size:18px;letter-spacing:-.2px}
.muted{color:var(--muted);font-size:12px}
.chart{height:340px;position:relative}
.chart canvas{display:block;width:100%;height:100%;image-rendering:auto}
.report-highlight{
  background:linear-gradient(135deg,#f8fcfa,#f2f9f5);
  border:1px solid #dcece4;
  border-radius:22px;
  padding:16px;
  line-height:1.62;
  font-size:13.5px;
  color:#263a31;
}
.report-highlight .headline{font-size:17px;color:#0b3b2d;font-weight:950;margin-bottom:8px}
.report-highlight b.profit,.help b.profit{color:#047857}
.report-highlight b.loss,.help b.loss{color:var(--red)}
.mini-stat-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.mini-stat-row b{font-size:22px;color:var(--ink)}
.executive-note p{margin:0 0 10px}
.small-title{font-size:14px!important;margin:14px 0 8px!important}
.table-wrap{
  overflow:auto;border:1px solid var(--line);border-radius:18px;background:white;max-height:610px;
}
.dashboard-table{max-height:365px}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
th{position:sticky;top:0;background:#f4faf7;color:#0b3b2d;font-weight:950;z-index:2}
td.num,.num{text-align:right;font-variant-numeric:tabular-nums}
.compact-table{font-size:12px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.compact-table th,.compact-table td{padding:9px 10px}
.badge{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:900}
.good{background:#dcfce7;color:#166534}
.warn{background:#fef3c7;color:#92400e}
.bad{background:#fee2e2;color:#991b1b}
.neutral{background:#e5e7eb;color:#374151}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar input,.toolbar select{width:auto;min-width:190px}
.active-filter-info{
  margin:-4px 0 14px;padding:11px 14px;background:#eef7f2;color:#0b5d43;border:1px solid #c8eadb;border-radius:16px;font-size:13px;font-weight:900;
}
.form-card label{display:block}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wide{grid-column:span 2}
.full{grid-column:1/-1}
.report-card{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,#ffffff,#f3faf6)}
.category-list{display:flex;gap:8px;flex-wrap:wrap;max-height:260px;overflow:auto;padding:4px}
.pill{display:inline-block;background:#edf7f2;color:#0b5d43;border:1px solid #c8eadb;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:850;margin:2px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.info-grid div{background:#f8faf9;border:1px solid var(--line);border-radius:18px;padding:14px}
.info-grid span{display:block;color:var(--muted);font-size:12px}
.info-grid b{display:block;margin-top:6px;font-size:18px}
@media(max-width:1380px){
  .dashboard-kpis{grid-template-columns:repeat(3,minmax(220px,1fr))}
  .two,.three{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
}
@media(max-width:980px){
  .sidebar{position:static;width:auto}
  .main{margin-left:0}
  .userbox{position:static;margin-top:18px}
  .topbar{position:static;display:block}
  .top-actions{justify-content:flex-start;margin-top:14px}
  .content{padding:20px}
  .dashboard-hero{display:block}
  .dashboard-hero .btn{margin-top:16px}
  .dashboard-kpis{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .wide{grid-column:span 1}
  .toolbar input,.toolbar select{width:100%}
  .info-grid{grid-template-columns:1fr}
}


.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.top-actions select{
  width:auto;
  min-width:210px;
  border-color:#c9e2d7;
  color:var(--green);
  font-weight:850;
}
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(5,18,13,.56);
  backdrop-filter:blur(8px);
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.modal-card{
  width:min(1040px, 100%);
  max-height:92vh;
  overflow:auto;
  background:white;
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:0 30px 90px rgba(0,0,0,.28);
  padding:22px;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{margin:0;font-size:22px}
.modal-head p{margin:6px 0 0;color:var(--muted);font-size:13px}
.project-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border-radius:999px;
  background:#eef7f2;
  color:#0b5d43;
  border:1px solid #c8eadb;
  font-size:12px;
  font-weight:850;
}
@media(max-width:980px){
  .hero-actions{justify-content:flex-start;margin-top:16px}
  .top-actions select{width:100%}
  .modal-card{border-radius:22px}
}


/* Final dashboard refinement: simple elegant, no clipped numbers */
.dashboard-kpis{
  grid-template-columns:repeat(5,minmax(240px,1fr));
  align-items:stretch;
}
.kpi{
  min-height:145px;
  padding:18px;
  overflow:hidden;
}
.kpi::after{
  width:88px;
  height:88px;
  right:-38px;
  top:-38px;
  opacity:.38;
}
.kpi-top{
  min-height:34px;
}
.kpi-top span{
  font-size:11px;
  line-height:1.25;
  letter-spacing:.55px;
  max-width:calc(100% - 46px);
}
.kpi-top em{
  font-size:9px;
  padding:4px 6px;
}
.kpi .value{
  font-size:clamp(20px, 1.75vw, 27px);
  line-height:1.18;
  letter-spacing:-.45px;
  margin-top:14px;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  max-width:100%;
}
.kpi .note{
  font-size:12px;
  margin-top:10px;
  line-height:1.35;
  max-width:100%;
}
.dashboard-hero{
  padding:22px 24px;
  border-radius:26px;
}
.dashboard-hero h2{
  font-size:clamp(24px,2.2vw,32px);
}
@media(max-width:1520px){
  .dashboard-kpis{grid-template-columns:repeat(3,minmax(240px,1fr));}
}
@media(max-width:980px){
  .dashboard-kpis{grid-template-columns:1fr;}
  .kpi .value{font-size:26px;}
}


/* Final KPI full Rupiah display - no abbreviation, no clipping */
.dashboard-kpis{
  grid-template-columns:repeat(5,minmax(285px,1fr));
}
.kpi{
  min-height:152px;
  padding:18px 20px;
}
.kpi .value{
  font-size:clamp(18px, 1.25vw, 22px);
  line-height:1.22;
  letter-spacing:-.25px;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
.kpi .note{
  font-size:12px;
}
@media(max-width:1680px){
  .dashboard-kpis{grid-template-columns:repeat(3,minmax(285px,1fr));}
}
@media(max-width:1180px){
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(285px,1fr));}
}
@media(max-width:760px){
  .dashboard-kpis{grid-template-columns:1fr;}
  .kpi .value{font-size:21px;white-space:normal;}
}

/* Enhanced offline visual polish */
html,body{max-width:100%;overflow-x:hidden}.main{overflow-x:hidden}.content{max-width:1680px;margin:0 auto}.grid,.card,.chart,.table-wrap{min-width:0}.chart{overflow:hidden}.dashboard-kpis{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}.kpi .value{white-space:nowrap;font-size:clamp(18px,1.25vw,22px)}.card{box-shadow:0 16px 38px rgba(16,24,40,.075)}.dashboard-hero{box-shadow:0 20px 46px rgba(11,93,67,.20)}.file-btn{display:inline-flex;align-items:center;border-radius:16px;padding:11px 15px;background:#fff;color:#0b5d43;border:1px solid #c9e2d7;font-size:14px;font-weight:850;cursor:pointer}.file-btn input{display:none}.audit-pill{display:inline-block;padding:6px 9px;border-radius:999px;background:#eef7f2;color:#0b5d43;border:1px solid #c8eadb;font-size:12px;font-weight:850}.budget-positive{color:#047857}.budget-negative{color:#b91c1c}@media(max-width:980px){.kpi .value{white-space:normal}.content{max-width:100%}}


/* Tax accounting fields */
#mpPpn[readonly], #mpPph[readonly], #mpBruto[readonly], #mpNetto[readonly]{
  background:#f8faf9;
  color:#0b5d43;
  font-weight:850;
}


/* Sidebar fix: prevent Setting Data from being covered by userbox */
.sidebar{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sidebar .nav{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:2px;
  padding-bottom:10px;
}
.sidebar .nav::-webkit-scrollbar{width:6px}
.sidebar .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:999px}
.userbox{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin-top:16px;
  flex-shrink:0;
}

/* COA & Journal polish */
#coaRows td:nth-child(1),
#journalRows td:nth-child(4),
#trialRows td:nth-child(1){
  font-variant-numeric:tabular-nums;
  color:var(--green);
}
#journalRows td,
#trialRows td,
#coaRows td,
#taxRows td{
  font-size:12.5px;
}


/* Role-based access */
.role-disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  transform:none !important;
}
.owner-mode .btn.danger,
.owner-mode button.danger{
  opacity:.45;
}
.owner-mode input:disabled,
.owner-mode select:disabled,
.owner-mode textarea:disabled{
  background:#f3f6f3;
  color:#6a7771;
}


.logout-btn{
  margin-left:auto;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  box-shadow:none;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}
.logout-btn:hover{background:rgba(255,255,255,.22)}


/* Fix: sidebar/menu navigation must remain clickable for all roles */
.sidebar .nav button,
.sidebar .nav button.role-disabled{
  opacity:1 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  filter:none !important;
}


/* JSON backup/import control */
.file-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  padding:11px 15px;
  background:white;
  color:var(--green);
  border:1px solid #c9e2d7;
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  box-shadow:none;
}
.file-btn input{display:none}
.file-btn:hover{transform:translateY(-1px);opacity:.96}
.role-investor .file-btn,
.role-admin .file-btn.disabled{
  opacity:.45;
  cursor:not-allowed;
}


/* Owner-only JSON backup/import */
.file-btn.role-disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  pointer-events:auto;
}
.file-btn.role-disabled input{
  pointer-events:none;
}

/* Investor Report controls */
.investor-report-card{
  align-items:flex-start;
}
.report-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.report-select{
  min-width:310px;
  border-color:#c9e2d7;
  color:var(--green);
  font-weight:850;
}
@media(max-width:980px){
  .report-actions{justify-content:flex-start;width:100%}
  .report-select{width:100%;min-width:0}
}

/* Formal Accounting Report controls */
.investor-report-card{align-items:flex-start}
.report-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.report-select{min-width:310px;border-color:#c9e2d7;color:var(--green);font-weight:850}
@media(max-width:980px){.report-actions{justify-content:flex-start;width:100%}.report-select{width:100%;min-width:0}}

/* Professional accounting upgrade */
.report-date{
  border:1px solid #c9e2d7;
  border-radius:16px;
  padding:11px 12px;
  color:var(--green);
  font-weight:850;
  background:#fff;
}

/* Investor menu cleanup */
.role-investor .nav button[style*="display: none"]{
  display:none !important;
}

/* Profile & user setting cards */
.owner-only-setting .form-grid textarea{min-height:82px}
.owner-only-setting input[type="password"]{letter-spacing:.08em}
.role-admin .owner-only-setting,
.role-investor .owner-only-setting{display:none!important}



/* =========================================================
   MODERN BLUE UI STABLE
   Visual/UI only. Business accounting logic remains unchanged.
   ========================================================= */

:root{
  --brand:#2563eb;
  --brand2:#0ea5e9;
  --brand-dark:#1d4ed8;
  --brand-soft:#eff6ff;
  --bg:#f6f8fb;
  --card:#ffffff;
  --ink:#111827;
  --text:#243044;
  --muted:#667085;
  --line:#e5eaf2;
  --line2:#d6e0ec;
  --success:#079455;
  --danger:#b42318;
  --warning:#b7791f;
  --shadow:0 14px 34px rgba(17,24,39,.07);
  --shadow-soft:0 6px 18px rgba(17,24,39,.045);
  --radius:20px;
}

*{box-sizing:border-box}
html,body{
  margin:0!important;
  padding:0!important;
  min-height:100%!important;
  overflow-x:hidden!important;
}
body{
  background:
    radial-gradient(circle at 14% -8%, rgba(37,99,235,.08), transparent 30%),
    radial-gradient(circle at 98% 4%, rgba(14,165,233,.07), transparent 32%),
    linear-gradient(180deg,#fff 0%,var(--bg) 100%)!important;
  color:var(--text)!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}

#app{
  min-height:100vh!important;
  background:transparent!important;
}

/* Keep original app flow stable: do not force fixed sidebar or weird offsets */
.sidebar{
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-right:1px solid var(--line)!important;
  box-shadow:8px 0 30px rgba(17,24,39,.04)!important;
  color:var(--text)!important;
}
.sidebar::before,.sidebar::after{display:none!important}

.brand{
  border-bottom:1px solid var(--line)!important;
}
.brand-mark,.brand .brand-mark,.brand .mark,.logo-box{
  background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  color:#fff!important;
  border-radius:16px!important;
  box-shadow:0 14px 28px rgba(37,99,235,.18)!important;
}
.brand h1,.brand h2{
  color:var(--ink)!important;
  letter-spacing:-.04em!important;
}
.brand span,.brand p{
  color:var(--muted)!important;
}

/* Sidebar nav clean blue */
.nav button{
  background:transparent!important;
  color:#344054!important;
  border:1px solid transparent!important;
  border-radius:16px!important;
  box-shadow:none!important;
  transform:none!important;
}
.nav button::before,.nav button::after{display:none!important}
.nav button span,.nav button b{
  color:inherit!important;
  font-weight:850!important;
}
.nav button small{
  color:#8492a6!important;
}
.nav button:hover{
  background:var(--brand-soft)!important;
  border-color:#d8e6ff!important;
  color:var(--brand-dark)!important;
}
.nav button.active{
  background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 12px 24px rgba(37,99,235,.18)!important;
}
.nav button.active small{
  color:rgba(255,255,255,.78)!important;
}

.userbox{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:var(--shadow-soft)!important;
}
.userbox::before{display:none!important}
.avatar,.userbox .avatar{
  background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  color:#fff!important;
  box-shadow:none!important;
}
.userbox b{color:var(--ink)!important}
.userbox span{color:var(--muted)!important}

/* Login clean white/blur */
.login{
  background:
    radial-gradient(circle at 20% 10%, rgba(37,99,235,.08), transparent 35%),
    linear-gradient(180deg,#fff 0%,#f7f9fc 100%)!important;
}
.login-card{
  background:rgba(255,255,255,.84)!important;
  border:1px solid rgba(214,224,236,.95)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  border-radius:32px!important;
  box-shadow:0 24px 80px rgba(17,24,39,.10)!important;
}
.login-card h1{color:var(--ink)!important}

/* Header and content */
.topbar{
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
}
.page-label{
  color:var(--brand)!important;
  letter-spacing:.16em!important;
}
#pageTitle{
  color:var(--ink)!important;
  letter-spacing:-.045em!important;
}
#pageSub{color:var(--muted)!important}

/* Cards */
.card,.report-card,.form-card,.kpi-card,.stat-card{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:24px!important;
  box-shadow:var(--shadow-soft)!important;
  overflow:visible!important;
}
.card:hover{box-shadow:var(--shadow-soft)!important}
.card h3,.section-head h3{color:var(--ink)!important}
.help,.muted,.section-head .muted{color:var(--muted)!important}

/* Buttons */
button,.btn,.file-btn{
  border-radius:14px!important;
  box-shadow:none!important;
  transform:none!important;
  font-weight:800!important;
}
.btn,button.btn{
  background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  border:1px solid transparent!important;
  color:#fff!important;
}
.btn:hover,button.btn:hover{
  background:linear-gradient(135deg,var(--brand-dark),#0284c7)!important;
}
.btn.ghost,button.ghost,.file-btn{
  background:#fff!important;
  color:var(--brand)!important;
  border:1px solid #bfd7ff!important;
}
.btn.ghost:hover,button.ghost:hover,.file-btn:hover{
  background:var(--brand-soft)!important;
}
.btn.gold{background:#b7791f!important;border-color:#b7791f!important;color:#fff!important}
.btn.danger{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}

/* Form fields */
input,select,textarea,.report-date{
  background:#fff!important;
  border:1px solid var(--line2)!important;
  color:var(--ink)!important;
  border-radius:14px!important;
  box-shadow:none!important;
  font-weight:650!important;
}
input:focus,select:focus,textarea:focus,.report-date:focus{
  border-color:var(--brand)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
}

/* Hide native select UI but keep it as data source for JS.
   Custom dropdown below mirrors it visually. */
.pfc-select{
  position:relative!important;
  min-width:0!important;
}
.pfc-select > select{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  pointer-events:none!important;
}
.pfc-select-btn{
  width:100%!important;
  min-height:46px!important;
  padding:11px 42px 11px 14px!important;
  border-radius:14px!important;
  border:1px solid var(--line2)!important;
  background:#fff!important;
  color:var(--ink)!important;
  text-align:left!important;
  font-weight:750!important;
  box-shadow:none!important;
  position:relative!important;
}
.pfc-select-btn::after{
  content:""!important;
  position:absolute!important;
  right:15px!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-right:2px solid var(--brand)!important;
  border-bottom:2px solid var(--brand)!important;
  transform:translateY(-65%) rotate(45deg)!important;
  transition:transform .16s ease!important;
}
.pfc-select.open .pfc-select-btn::after{
  transform:translateY(-35%) rotate(225deg)!important;
}
.pfc-select-btn:focus{
  border-color:var(--brand)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
  outline:none!important;
}
.pfc-select-menu{
  display:none!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 8px)!important;
  z-index:9999!important;
  padding:8px!important;
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  box-shadow:0 22px 60px rgba(17,24,39,.16)!important;
  max-height:270px!important;
  overflow:auto!important;
}
.pfc-select.open .pfc-select-menu{display:block!important}
.pfc-select-item{
  width:100%!important;
  display:block!important;
  min-height:38px!important;
  padding:9px 11px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--text)!important;
  text-align:left!important;
  font-weight:650!important;
}
.pfc-select-item:hover{
  background:var(--brand-soft)!important;
  color:var(--brand-dark)!important;
}
.pfc-select-item.is-active{
  background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  color:#fff!important;
}
.pfc-select.is-disabled .pfc-select-btn{
  opacity:.45!important;
  cursor:not-allowed!important;
}

/* Toolbars/filters */
.toolbar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  gap:12px!important;
}
.toolbar .pfc-select{
  flex:0 1 260px!important;
}
.toolbar input{
  flex:0 1 320px!important;
}

/* Report action grid select should stretch */
.report-actions .pfc-select{width:100%!important}

/* Tables */
.table-wrap{
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:auto!important;
}
thead th{
  background:#f8fafc!important;
  color:#334155!important;
  border-bottom:1px solid var(--line)!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
tbody tr:hover{background:#f8fafc!important}
.project-badge{
  background:var(--brand-soft)!important;
  color:var(--brand-dark)!important;
  border-color:#cfe0ff!important;
}

/* Hero: remove old green completely */
.hero{
  background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  border-radius:24px!important;
}
.hero p{color:rgba(255,255,255,.86)!important}
.hero .btn{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.30)!important;
}

/* Badges */
.good,.badge.good{background:#ecfdf3!important;color:#067647!important;border-color:#abefc6!important}
.warn,.badge.warn{background:#fffaeb!important;color:#b54708!important;border-color:#fedf89!important}
.bad,.badge.bad{background:#fef3f2!important;color:#b42318!important;border-color:#fecdca!important}

/* Chart clipping fix */
.card:has(canvas),.chart-card{
  overflow:visible!important;
  padding-bottom:58px!important;
}
canvas{max-width:100%!important}

/* Modals */
.modal-backdrop{
  background:rgba(15,23,42,.36)!important;
  backdrop-filter:blur(8px)!important;
}
.modal-card{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:24px!important;
  box-shadow:0 28px 80px rgba(15,23,42,.20)!important;
}

/* Avoid browser-native dropdown showing for enhanced selects */
select:not([data-no-custom="1"]){
  -webkit-appearance:none!important;
  appearance:none!important;
}

/* Responsive */
@media(max-width:900px){
  .toolbar .pfc-select,.toolbar input{
    flex:1 1 100%!important;
  }
}



/* =========================================================
   BLUE UI POLISH FIX
   CSS only. Fixes remaining green hero, logout visibility, compact dropdown.
   ========================================================= */

/* Force global color consistency */
:root{
  --pfc-blue:#2563EB;
  --pfc-blue2:#0EA5E9;
  --pfc-blue-dark:#1D4ED8;
  --pfc-blue-soft:#EFF6FF;
  --pfc-ink:#0F172A;
  --pfc-text:#263244;
  --pfc-muted:#667085;
  --pfc-border:#E4EAF2;
  --pfc-border2:#D2DEEC;
  --pfc-white:#FFFFFF;
}

/* Remove old green accents that still appear from earlier stylesheet */
.page-label,
.brandline,
.eyebrow,
[class*="label"]{
  color:var(--pfc-blue) !important;
}

/* Hero/dashboard: force elegant modern blue, no green */
.hero,
#dashboard .hero,
section#dashboard .hero,
.dashboard-hero,
.executive-hero{
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.22), transparent 20%),
    linear-gradient(135deg, #2563EB 0%, #0EA5E9 100%) !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:26px !important;
  box-shadow:0 18px 44px rgba(37,99,235,.18) !important;
  overflow:hidden !important;
}
.hero::before,
.hero::after,
#dashboard .hero::before,
#dashboard .hero::after{
  display:none !important;
}
.hero *,
#dashboard .hero *{
  color:inherit !important;
}
.hero p,
#dashboard .hero p{
  color:rgba(255,255,255,.86) !important;
}
.hero .btn,
#dashboard .hero .btn,
.hero button,
#dashboard .hero button{
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#FFFFFF !important;
  min-height:44px !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
.hero .btn:hover,
#dashboard .hero .btn:hover{
  background:rgba(255,255,255,.25) !important;
}

/* Sidebar/header: keep clean white-blue; remove green text */
.sidebar{
  background:rgba(255,255,255,.92) !important;
  color:var(--pfc-text) !important;
}
.brand h1,
.brand h2,
.nav button,
.userbox b{
  color:var(--pfc-ink) !important;
}
.brand span,
.brand p,
.nav button small,
.userbox span{
  color:var(--pfc-muted) !important;
}
.nav button.active{
  background:linear-gradient(135deg, var(--pfc-blue), var(--pfc-blue2)) !important;
  color:#FFFFFF !important;
}
.nav button.active span,
.nav button.active b,
.nav button.active small{
  color:#FFFFFF !important;
}

/* Logout button visibility fix in sidebar/userbox */
.userbox .btn,
.userbox button,
.sidebar .userbox button,
.sidebar button[onclick*="logout"],
.sidebar button[onclick*="Logout"],
.sidebar button[onclick*="signOut"],
.sidebar .logout,
button.logout{
  background:#FFFFFF !important;
  color:var(--pfc-blue) !important;
  border:1px solid #BFD7FF !important;
  box-shadow:none !important;
  opacity:1 !important;
}
.userbox .btn:hover,
.userbox button:hover,
.sidebar .userbox button:hover,
.sidebar button[onclick*="logout"]:hover,
.sidebar button[onclick*="Logout"]:hover,
.sidebar button[onclick*="signOut"]:hover{
  background:var(--pfc-blue-soft) !important;
  color:var(--pfc-blue-dark) !important;
}

/* Buttons global */
.btn,
button.btn{
  background:linear-gradient(135deg, var(--pfc-blue), var(--pfc-blue2)) !important;
  border-color:transparent !important;
  color:#FFFFFF !important;
}
.btn.ghost,
button.ghost,
.file-btn{
  background:#FFFFFF !important;
  color:var(--pfc-blue) !important;
  border:1px solid #BFD7FF !important;
}
.btn.ghost:hover,
button.ghost:hover,
.file-btn:hover{
  background:var(--pfc-blue-soft) !important;
}

/* Compact, minimal dropdowns */
.pfc-select{
  min-width:0 !important;
}
.pfc-select-btn,
select,
.report-select{
  min-height:40px !important;
  height:40px !important;
  border-radius:12px !important;
  padding:8px 36px 8px 12px !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  background:#FFFFFF !important;
  border:1px solid var(--pfc-border2) !important;
  color:var(--pfc-ink) !important;
}
.pfc-select-btn::after{
  right:14px !important;
  width:7px !important;
  height:7px !important;
  border-right:2px solid var(--pfc-blue) !important;
  border-bottom:2px solid var(--pfc-blue) !important;
}
.pfc-select-menu{
  top:calc(100% + 6px) !important;
  padding:6px !important;
  border-radius:14px !important;
  border:1px solid var(--pfc-border) !important;
  box-shadow:0 18px 50px rgba(15,23,42,.14) !important;
}
.pfc-select-item{
  min-height:34px !important;
  padding:7px 10px !important;
  border-radius:9px !important;
  font-size:13.5px !important;
}
.toolbar .pfc-select,
.report-actions .pfc-select{
  max-width:260px !important;
}
.report-actions .pfc-select{
  max-width:none !important;
}
.topbar .pfc-select,
.topbar select{
  max-width:260px !important;
}

/* Compact normal inputs in filters */
.toolbar input,
.toolbar .pfc-select-btn,
.toolbar select{
  min-height:40px !important;
  height:40px !important;
}
.toolbar input{
  border-radius:12px !important;
  font-size:13.5px !important;
  padding:8px 12px !important;
}
.toolbar .btn,
.toolbar button{
  min-height:40px !important;
  height:40px !important;
  border-radius:12px !important;
  padding:8px 14px !important;
  font-size:13.5px !important;
}

/* Topbar page controls smaller and elegant */
.topbar .btn,
.topbar button,
.topbar select,
.topbar .pfc-select-btn{
  min-height:40px !important;
  height:40px !important;
  border-radius:12px !important;
  font-size:13.5px !important;
}

/* Ensure KPI/card accents no green blobs */
.kpi-card::after,
.stat-card::after,
.card::after{
  display:none !important;
}

/* Tables and badges blue-consistent */
.project-badge{
  background:var(--pfc-blue-soft) !important;
  color:var(--pfc-blue-dark) !important;
  border-color:#CFE0FF !important;
}

/* Login stay white clean */
.login{
  background:
    radial-gradient(circle at 22% 8%, rgba(37,99,235,.08), transparent 30%),
    linear-gradient(180deg,#FFFFFF 0%,#F7F9FC 100%) !important;
}
.login-card{
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(210,222,236,.95) !important;
  backdrop-filter:blur(22px) !important;
}

/* Chart label clipping: more bottom space and no overflow clipping */
.card:has(canvas),
.chart-card,
.chart-wrap,
.canvas-wrap{
  overflow:visible !important;
}
.card:has(canvas),
.chart-card{
  padding-bottom:72px !important;
}
canvas{
  max-width:100% !important;
}

/* Hide old green if any inline class uses profit green only keep actual financial positive green */
.hero .profit,
.hero .good{
  color:#FFFFFF !important;
}

/* Preserve success badges as green only when semantic approved/profit, not as theme color */
.badge.good,
.good{
  background:#ECFDF3 !important;
  color:#067647 !important;
  border-color:#ABEFC6 !important;
}



/* =========================================================
   FUTURISTIC DASHBOARD V1
   Visual-only refresh. Logic/perhitungan/role tetap sama.
   ========================================================= */
:root{
  --bg:#f6f9fc;
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#667085;
  --line:#e6edf5;
  --line2:#d4deea;
  --green:#2563eb;
  --green2:#0ea5e9;
  --green3:#eff6ff;
  --brand:#2563eb;
  --brand2:#0ea5e9;
  --brand-dark:#1d4ed8;
  --brand-soft:#eff6ff;
  --blue:#2563eb;
  --shadow:0 20px 48px rgba(15,23,42,.10);
  --shadow-soft:0 12px 34px rgba(15,23,42,.06);
  --radius:22px;
}
html,body{background:linear-gradient(180deg,#fbfdff 0%, #f5f8fc 100%)!important;color:var(--ink)!important}
body{
  background:radial-gradient(circle at 10% 0%, rgba(59,130,246,.08), transparent 28%), linear-gradient(180deg,#fbfdff 0%, #f5f8fc 100%)!important;
}
/* clean login */
.login{
  background:
    radial-gradient(circle at 0% 0%, rgba(59,130,246,.10), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(14,165,233,.08), transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#f5f8fc 100%) !important;
}
.login-card{
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  box-shadow:0 32px 80px rgba(15,23,42,.12)!important;
}
.logo,.brand-mark{
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(37,99,235,.26)!important;
}
/* sidebar hidden/toggle */
.sidebar{
  width:278px!important;
  background:linear-gradient(180deg,#0f172a 0%, #172554 100%)!important;
  color:#fff!important;
  box-shadow:16px 0 42px rgba(15,23,42,.18)!important;
  transition:transform .24s ease, opacity .24s ease!important;
}
.brand{border-bottom:1px solid rgba(255,255,255,.10)!important}
.brand h2,.brand div h2{color:#fff!important}
.brand span{color:#c4d4ff!important}
.nav button{
  border:1px solid rgba(255,255,255,.06)!important;
  color:#dbe7ff!important;
  background:rgba(255,255,255,.02)!important;
  border-radius:16px!important;
}
.nav button small{color:#97a6d1!important}
.nav button.active,.nav button:hover{
  background:linear-gradient(135deg, rgba(37,99,235,.32), rgba(14,165,233,.18))!important;
  border-color:rgba(96,165,250,.38)!important;
}
.userbox{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.userbox b{color:#fff!important}
.userbox span,.userbox small{color:#c4d4ff!important}
.avatar{
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  color:#fff!important;
}
.logout-btn,
.userbox .logout-btn,
.sidebar .logout-btn{
  margin-left:auto!important;
  background:rgba(255,255,255,.12)!important;
  color:#ffffff!important;
  border:1px solid rgba(191,219,254,.35)!important;
  box-shadow:none!important;
}
.logout-btn:hover{background:rgba(255,255,255,.18)!important}
body.sidebar-hidden .sidebar{transform:translateX(-108%)!important;opacity:0!important;pointer-events:none!important}
body.sidebar-hidden .main{margin-left:0!important}
.main{margin-left:278px!important;transition:margin-left .24s ease!important}
/* topbar */
.topbar{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid #e5edf7!important;
}
.topbar-title-wrap{display:flex!important;align-items:flex-start!important;gap:14px!important}
.sidebar-toggle{
  width:44px!important;height:44px!important;min-width:44px!important;
  padding:0!important;border-radius:14px!important;border:1px solid #d7e3f1!important;
  background:#fff!important;box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;
}
.sidebar-toggle span{display:block!important;width:18px!important;height:2px!important;border-radius:999px!important;background:#2563eb!important}
.sidebar-toggle:hover{background:#f8fbff!important;transform:none!important}
.eyebrow,.page-label,.brandline{color:#2563eb!important}
/* buttons */
.btn,button.btn,.btn-full{
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  color:#fff!important;
  border:none!important;
  box-shadow:0 10px 22px rgba(37,99,235,.18)!important;
}
.btn.ghost,button.secondary,.ghost,.top-actions .btn{
  background:#fff!important;color:#2563eb!important;border:1px solid #cfe0ff!important;box-shadow:none!important;
}
.btn.light{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important}
/* hero/dashboard */
.dashboard-hero{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#0f172a 0%, #1d4ed8 52%, #0ea5e9 100%)!important;
  color:#fff!important;
  border-radius:28px!important;
  padding:30px 32px!important;
  box-shadow:0 24px 56px rgba(37,99,235,.20)!important;
  margin-bottom:22px!important;
}
.dashboard-hero::before,
.dashboard-hero::after{
  content:""!important;position:absolute!important;border-radius:999px!important;pointer-events:none!important;
  background:radial-gradient(circle, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 70%)!important;
}
.dashboard-hero::before{width:240px!important;height:240px!important;right:-40px!important;top:-70px!important}
.dashboard-hero::after{width:180px!important;height:180px!important;left:58%!important;bottom:-110px!important}
.dashboard-hero > *{position:relative!important;z-index:1!important}
.dashboard-hero h2{font-size:34px!important;letter-spacing:-1px!important;color:#fff!important}
.dashboard-hero p{color:rgba(255,255,255,.88)!important;max-width:860px!important}
.dashboard-hero .eyebrow{color:#dbeafe!important}
.hero-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;align-items:flex-start!important}
.hero-actions .btn{min-height:46px!important;border-radius:14px!important;padding:11px 16px!important}
/* KPI cards */
.card{
  background:rgba(255,255,255,.96)!important;
  border:1px solid #e7eef6!important;
  box-shadow:0 12px 34px rgba(15,23,42,.05)!important;
}
.kpi{min-height:170px!important;border-radius:24px!important}
.kpi::after{display:none!important}
.kpi.primary{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)!important}
.kpi-top span{color:#667085!important}
.kpi-top em{color:#2563eb!important;background:#eff6ff!important;border:1px solid #cfe0ff!important}
.kpi .value{color:#0f172a!important}
.kpi .note{color:#667085!important}
.clickable-card:hover{transform:translateY(-4px)!important;border-color:#bfd7ff!important;box-shadow:0 18px 40px rgba(37,99,235,.08)!important}
.profit-card .value.profit{color:#2563eb!important}
.profit-card .value.loss{color:#b91c1c!important}
.report-highlight{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border:1px solid #e2ebf6!important;
  color:#334155!important;
}
.report-highlight .headline{color:#0f172a!important}
/* charts/tables */
.chart{height:340px!important;overflow:visible!important}
.chart canvas{max-width:100%!important}
.table-wrap{border:1px solid #e6edf5!important}
th{background:#f8fbff!important;color:#334155!important}
/* dropdown refinement */
select{-webkit-appearance:none!important;appearance:none!important;background:#fff!important}
.pfc-select,.toolbar .pfc-select,.topbar .pfc-select{min-width:0!important}
.pfc-select-btn, select, .report-select{
  min-height:38px!important;height:38px!important;padding:8px 36px 8px 12px!important;
  border-radius:12px!important;border:1px solid #d6e3f0!important;background:#fff!important;
  color:#0f172a!important;font-size:13px!important;font-weight:700!important;box-shadow:none!important;
}
.pfc-select-btn::after{right:14px!important;width:8px!important;height:8px!important;border-right:2px solid #2563eb!important;border-bottom:2px solid #2563eb!important}
.pfc-select-menu{
  top:calc(100% + 6px)!important;padding:8px!important;border-radius:16px!important;border:1px solid #e3ebf5!important;
  box-shadow:0 24px 60px rgba(15,23,42,.14)!important;background:rgba(255,255,255,.98)!important;backdrop-filter:blur(14px)!important;
}
.pfc-select-item{min-height:36px!important;padding:8px 11px!important;border-radius:10px!important;font-size:13px!important;color:#0f172a!important}
.pfc-select-item:hover{background:#eff6ff!important;color:#1d4ed8!important}
.pfc-select-item.is-active{background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;color:#fff!important}
.topbar .btn,.topbar button,.toolbar .btn,.toolbar button{min-height:38px!important;height:38px!important;border-radius:12px!important}
.topbar select,.toolbar input,.toolbar select{min-height:38px!important;height:38px!important;border-radius:12px!important}
/* remove legacy green accent from semantic wrappers except actual good badges */
.topbar h1,.topbar p,.section-head h3,.small-title,.card h3{color:#0f172a!important}
.muted,.help,.topbar p:not(.eyebrow),.sub,.login-brand p{color:#667085!important}
.good{background:#ecfdf3!important;color:#067647!important;border-color:#abeFC6!important}
/* responsive */
@media (max-width: 1380px){
  .main{margin-left:0!important}
  .sidebar{transform:translateX(-108%)!important;opacity:0!important;pointer-events:none!important}
  body.sidebar-hidden .sidebar{transform:translateX(-108%)!important}
  .topbar{padding:18px 20px!important}
  .content{padding:20px!important}
}



/* =========================================================
   CHART + SIDEBAR INTERACTION FIX
   CSS only for layout/visual; JS only for toggle + chart rendering.
   ========================================================= */

/* Sidebar overlay fix: on compact screens it must be clickable when opened */
body.sidebar-open .sidebar{
  transform:translateX(0)!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:1000!important;
}
body.sidebar-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.26);
  backdrop-filter:blur(2px);
  z-index:999;
}

/* Desktop hide/show behavior */
body.sidebar-hidden:not(.sidebar-open) .main{
  margin-left:0!important;
}
body:not(.sidebar-hidden) .sidebar{
  transform:translateX(0)!important;
  opacity:1!important;
  pointer-events:auto!important;
}
body:not(.sidebar-hidden) .main{
  margin-left:278px!important;
}

/* Keep sidebar clickable above content */
.sidebar{
  pointer-events:auto!important;
}
.sidebar .nav button{
  pointer-events:auto!important;
  cursor:pointer!important;
}
.sidebar .nav button.role-disabled{
  opacity:1!important;
  cursor:pointer!important;
}

/* Toggle visual state */
.sidebar-toggle.is-active{
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  border-color:transparent!important;
}
.sidebar-toggle.is-active span{
  background:#fff!important;
}

/* Chart card spacing */
#unitChart{
  min-height:420px!important;
}
.card:has(#unitChart){
  padding-bottom:22px!important;
}
.card:has(#unitChart) .chart{
  height:420px!important;
  overflow:visible!important;
}

/* Make chart section look more modern */
.card:has(#unitChart){
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border-color:#dbeafe!important;
}
.card:has(#unitChart) .section-head h3{
  color:#0f172a!important;
}
.card:has(#unitChart) .section-head .muted{
  color:#64748b!important;
}

/* Compact screen: sidebar opens as drawer */
@media (max-width: 1380px){
  .sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:292px!important;
    height:100vh!important;
  }
  body.sidebar-open .main{
    margin-left:0!important;
  }
}



/* =========================================================
   SIDEBAR CLICK / OVERLAY FIX
   ========================================================= */

/* Drawer overlay must be behind sidebar, not above it */
body.sidebar-open::before{
  z-index:900!important;
  pointer-events:auto!important;
}

body.sidebar-open .sidebar{
  z-index:1001!important;
  pointer-events:auto!important;
  transform:translateX(0)!important;
  opacity:1!important;
}

/* Prevent the blurred content layer from blocking sidebar menu clicks */
body.sidebar-open .main{
  pointer-events:auto!important;
}

/* Sidebar nav must remain clickable */
.sidebar,
.sidebar *,
.sidebar .nav button,
.sidebar button{
  pointer-events:auto!important;
}

/* On compact mode, sidebar should auto-hide again after page click */
@media (max-width: 1380px){
  body.sidebar-hidden:not(.sidebar-open) .sidebar{
    transform:translateX(-108%)!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body.sidebar-open .sidebar{
    transform:translateX(0)!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
}

/* Desktop: when hidden, no blur overlay */
body.sidebar-hidden:not(.sidebar-open)::before{
  display:none!important;
}



/* Dashboard Simplify + Chart Modernization
   Only dashboard structure/chart polish. Existing visual theme preserved. */
.dashboard-kpis-exec{
  grid-template-columns:repeat(4,minmax(240px,1fr))!important;
}
.dashboard-summary-grid .card,
.chart-modern{
  min-width:0;
}
.chart-modern{
  height:320px!important;
  overflow:visible!important;
}
.chart-modern canvas{
  max-width:100%!important;
}
.executive-note-clean{
  display:grid;
  gap:12px;
}
.executive-note-clean .exec-line{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:13px 15px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fbfdff;
}
.executive-note-clean .exec-line span{
  color:#64748b;
  font-weight:700;
}
.executive-note-clean .exec-line b{
  color:#0f172a;
  font-weight:850;
  text-align:right;
}
@media(max-width:1200px){
  .dashboard-kpis-exec{grid-template-columns:repeat(2,minmax(240px,1fr))!important}
}
@media(max-width:760px){
  .dashboard-kpis-exec{grid-template-columns:1fr!important}
  .executive-note-clean .exec-line{flex-direction:column;align-items:flex-start}
}


/* Dashboard polish v2 */
.dashboard-summary-grid-single{grid-template-columns:1fr!important}
.executive-insight-card{max-width:none!important}
.dashboard-summary-grid-single .mini-report{box-shadow:0 14px 34px rgba(15,23,42,.06)!important}

/* Make executive notes and project recap crisper */
.executive-note-card,
.executive-note-card *,
.executive-note-clean,
.executive-note-clean *,
.dashboard-table,
.dashboard-table *,
.dashboard-table table,
.dashboard-table th,
.dashboard-table td{
  filter:none!important;
  opacity:1!important;
  text-shadow:none!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.executive-note-card,
.dashboard-table{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.executive-note-card .section-head h3,
.dashboard-table th,
.dashboard-table td,
.executive-note-clean .exec-line b,
.executive-note-clean .exec-line span{letter-spacing:0!important}
.executive-note-clean .exec-line{
  background:#ffffff!important;
  border:1px solid #d9e4f0!important;
  box-shadow:0 2px 8px rgba(15,23,42,.04)!important;
}
.dashboard-table .table-wrap,
.dashboard-table table{
  background:#fff!important;
}
.dashboard-table th{
  font-weight:800!important;
  color:#334155!important;
}
.dashboard-table td{
  color:#1e293b!important;
  font-weight:600!important;
}
.dashboard-table tbody tr:nth-child(even){background:#fcfdff!important}

/* Small polish for notes/table cards */
.executive-note-card{overflow:visible!important}
.executive-note-clean{gap:14px!important}
.executive-note-clean .exec-line{padding:14px 18px!important;border-radius:18px!important}

/* Sharper chart canvas rendering */
.chart-modern canvas{
  image-rendering:auto!important;
}


/* Dashboard polish v3 */
.chart-modern{overflow:hidden!important}
.chart-modern canvas{display:block;width:100%;height:100%;}
.dashboard-table tbody tr td{border-top:1px solid #e8eef5!important}
.dashboard-table tbody tr:first-child td{border-top:none!important}
.dashboard-table tbody td.num{font-variant-numeric:tabular-nums}


/* =========================================================
   DASHBOARD PREMIUM FINISH
   Final polish only: visual refinement, zero logic changes.
   ========================================================= */
#dashboard{
  --dash-card-radius:24px;
  --dash-soft-border:#e4edf7;
  --dash-soft-bg:#fbfdff;
  --dash-shadow:0 14px 34px rgba(15,23,42,.055);
  --dash-shadow-hover:0 22px 46px rgba(37,99,235,.10);
}
#dashboard .card{
  border-radius:var(--dash-card-radius)!important;
  border:1px solid var(--dash-soft-border)!important;
  box-shadow:var(--dash-shadow)!important;
}
#dashboard .grid{gap:18px!important}
#dashboard .mt{margin-top:18px!important}
#dashboard .section-head{
  margin-bottom:16px!important;
  align-items:center!important;
}
#dashboard .section-head h3{
  font-size:19px!important;
  font-weight:900!important;
  letter-spacing:-.35px!important;
}
#dashboard .section-head .muted{
  font-size:12.5px!important;
  color:#7b8aa2!important;
}

/* Hero */
#dashboard .dashboard-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:20px!important;
  align-items:center!important;
  min-height:190px!important;
  padding:32px 34px!important;
  border:1px solid rgba(191,219,254,.45)!important;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 20%),
    radial-gradient(circle at 20% 120%, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 30%),
    linear-gradient(135deg,#0f172a 0%, #1e3a8a 42%, #2563eb 72%, #38bdf8 100%)!important;
  box-shadow:0 26px 56px rgba(37,99,235,.16)!important;
}
#dashboard .dashboard-hero h2{
  font-size:clamp(30px,2.8vw,40px)!important;
  line-height:1.04!important;
  margin-bottom:10px!important;
}
#dashboard .dashboard-hero p{
  max-width:820px!important;
  font-size:15px!important;
  line-height:1.7!important;
  color:rgba(255,255,255,.90)!important;
}
#dashboard .dashboard-hero .eyebrow{
  letter-spacing:.14em!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  color:#dbeafe!important;
}
#dashboard .hero-actions{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  min-width:240px!important;
}
#dashboard .hero-actions .btn{
  justify-content:center!important;
  min-height:48px!important;
  border-radius:15px!important;
  font-weight:850!important;
  letter-spacing:-.15px!important;
}
#dashboard .hero-actions .btn.light{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#dashboard .hero-actions .btn.light:hover{
  background:rgba(255,255,255,.20)!important;
  transform:translateY(-1px)!important;
}

/* KPI cards */
#dashboard .dashboard-kpis{gap:16px!important}
#dashboard .kpi{
  padding:22px 22px 18px!important;
  min-height:168px!important;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%)!important;
  position:relative!important;
  overflow:hidden!important;
}
#dashboard .kpi::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#60a5fa);
  opacity:.9;
}
#dashboard .kpi .kpi-top{margin-bottom:12px!important}
#dashboard .kpi-top span{
  color:#64748b!important;
  font-size:12.5px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}
#dashboard .kpi-top em{
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-style:normal!important;
  font-weight:900!important;
}
#dashboard .kpi .value{
  font-size:clamp(26px,2vw,34px)!important;
  line-height:1.08!important;
  letter-spacing:-.8px!important;
  margin-bottom:10px!important;
}
#dashboard .kpi .note{
  font-size:13px!important;
  line-height:1.5!important;
}
#dashboard .clickable-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:var(--dash-shadow-hover)!important;
}

/* Insight + notes */
#dashboard .mini-report,
#dashboard .executive-note-card{
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%)!important;
}
#dashboard .report-highlight{
  border-radius:18px!important;
  padding:18px 18px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important;
}
#dashboard .report-highlight .headline{
  font-size:18px!important;
  font-weight:900!important;
  margin-bottom:10px!important;
}
#dashboard .executive-note-clean{gap:12px!important}
#dashboard .executive-note-clean .exec-line{
  min-height:58px!important;
  align-items:center!important;
  border-radius:16px!important;
  padding:14px 16px!important;
  background:#fff!important;
  border:1px solid #e5edf7!important;
}
#dashboard .executive-note-clean .exec-line span{
  font-size:13px!important;
  font-weight:800!important;
  color:#64748b!important;
}
#dashboard .executive-note-clean .exec-line b{
  font-size:13.5px!important;
  font-weight:900!important;
  color:#0f172a!important;
}

/* Charts */
#dashboard .chart-modern{
  height:330px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%)!important;
}
#dashboard .chart-modern canvas{
  border-radius:18px!important;
}
#dashboard .grid.two > .card:has(#unitChart) .chart-modern{
  height:360px!important;
}

/* Project recap table */
#dashboard .table-wrap.dashboard-table{
  border-radius:18px!important;
  overflow:hidden!important;
  border:1px solid #e5edf7!important;
  background:#fff!important;
}
#dashboard .dashboard-table table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
#dashboard .dashboard-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:1!important;
  background:linear-gradient(180deg,#f8fbff 0%, #f1f6fd 100%)!important;
  color:#334155!important;
  font-size:12.5px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  padding:14px 18px!important;
  border-bottom:1px solid #e5edf7!important;
}
#dashboard .dashboard-table tbody td{
  padding:14px 18px!important;
  font-size:13.5px!important;
  font-weight:700!important;
  color:#1e293b!important;
  background:#fff!important;
}
#dashboard .dashboard-table tbody tr:hover td{
  background:#f8fbff!important;
}
#dashboard .dashboard-table tbody td:nth-child(n+2){
  text-align:right!important;
}
#dashboard .dashboard-table tbody td:first-child{
  text-align:left!important;
  font-weight:800!important;
}

/* Responsive */
@media (max-width: 1180px){
  #dashboard .dashboard-hero{
    grid-template-columns:1fr!important;
  }
  #dashboard .hero-actions{
    min-width:0!important;
    width:100%!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
  }
  #dashboard .hero-actions .btn{flex:1 1 220px!important}
}
@media (max-width: 760px){
  #dashboard .dashboard-hero{padding:24px 22px!important;border-radius:22px!important}
  #dashboard .dashboard-hero h2{font-size:28px!important}
  #dashboard .section-head{align-items:flex-start!important;flex-direction:column!important}
  #dashboard .hero-actions{flex-direction:column!important}
  #dashboard .dashboard-table tbody td,
  #dashboard .dashboard-table thead th{padding:12px 12px!important}
}


/* =========================================================
   ULTRA PREMIUM FINAL
   High-end UI refinement across login, sidebar, forms, cards,
   tables, and dashboard. Visual-only layer, no logic changes.
   ========================================================= */
:root{
  --bg:#f4f7fb !important;
  --panel:#ffffff !important;
  --ink:#0f172a !important;
  --muted:#64748b !important;
  --line:#e3ebf5 !important;
  --green:#2563eb !important;
  --green2:#1d4ed8 !important;
  --green3:#eff6ff !important;
  --blue:#2563eb !important;
  --shadow:0 20px 48px rgba(15,23,42,.08) !important;
  --shadow-soft:0 10px 28px rgba(15,23,42,.05) !important;
  --radius:24px !important;
}
html,body{
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.07), transparent 28%),
    radial-gradient(circle at right top, rgba(14,165,233,.05), transparent 26%),
    linear-gradient(180deg,#f8fbff 0%, #f4f7fb 100%) !important;
}
body{
  color:#0f172a !important;
  text-rendering:auto !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#c8d6eb;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#aac0e0;border:2px solid transparent;background-clip:padding-box}

/* Login */
.login{
  background:
    radial-gradient(circle at 12% 18%, rgba(59,130,246,.16), transparent 24%),
    radial-gradient(circle at 88% 84%, rgba(14,165,233,.14), transparent 22%),
    linear-gradient(180deg,#f7fbff 0%, #eef4fb 100%) !important;
}
.login-card{
  width:480px !important;
  padding:34px 32px !important;
  border-radius:32px !important;
  border:1px solid rgba(226,232,240,.92) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.12) !important;
}
.login-brand{margin-bottom:20px !important}
.logo,.brand-mark{
  background:linear-gradient(135deg,#2563eb 0%, #0ea5e9 100%) !important;
  box-shadow:0 16px 36px rgba(37,99,235,.24) !important;
}
.login h1{font-size:30px !important; letter-spacing:-.5px !important; color:#0f172a !important}
.sub{color:#64748b !important}
.login .btn-full{min-height:48px !important; border-radius:16px !important}

/* Global controls */
label{
  color:#334155 !important;
  font-size:12px !important;
  font-weight:800 !important;
}
input,select,textarea,
.pfc-select-btn,
.report-select{
  min-height:42px !important;
  border-radius:14px !important;
  border:1px solid #d9e5f2 !important;
  background:#ffffff !important;
  color:#0f172a !important;
  box-shadow:0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(15,23,42,.02) inset !important;
}
textarea{min-height:104px !important}
input::placeholder,textarea::placeholder{color:#94a3b8 !important}
input:focus,select:focus,textarea:focus,
.pfc-select-btn:focus{
  border-color:#93c5fd !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10) !important;
}
select,
.report-select,
.pfc-select-btn{
  font-size:13px !important;
  font-weight:700 !important;
}
.toolbar input,
.toolbar select,
.top-actions select,
.topbar .btn,
.topbar button,
.toolbar .btn,
.toolbar button,
button.small{
  min-height:38px !important;
  height:38px !important;
  border-radius:12px !important;
}
.pfc-select-menu{
  border-radius:18px !important;
  padding:8px !important;
  border:1px solid #e2ebf5 !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 22px 52px rgba(15,23,42,.14) !important;
}
.pfc-select-item{
  min-height:38px !important;
  border-radius:12px !important;
  font-weight:700 !important;
}

/* Buttons */
.btn,button,.btn-full{
  background:linear-gradient(135deg,#2563eb 0%, #3b82f6 54%, #0ea5e9 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 10px 24px rgba(37,99,235,.18) !important;
}
.btn:hover,button:hover{transform:translateY(-1px) !important}
.btn.ghost,button.secondary,.ghost,
.top-actions .btn.ghost,
.toolbar .btn.ghost,
.top-actions .btn,
.button-row .ghost{
  background:#ffffff !important;
  color:#2563eb !important;
  border:1px solid #cfe0ff !important;
  box-shadow:0 6px 18px rgba(15,23,42,.04) !important;
}
.btn.light{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
.btn.gold,.gold{background:linear-gradient(135deg,#f59e0b,#fbbf24) !important;color:#fff !important}
.btn.danger,.danger{background:linear-gradient(135deg,#dc2626,#ef4444) !important;color:#fff !important}

/* Sidebar */
.sidebar{
  width:286px !important;
  padding:22px 18px !important;
  background:
    linear-gradient(180deg,#0f172a 0%, #0b1530 46%, #172554 100%) !important;
  border-right:1px solid rgba(148,163,184,.12) !important;
  box-shadow:18px 0 40px rgba(15,23,42,.14) !important;
}
.brand{
  padding:10px 8px 20px !important;
  margin-bottom:18px !important;
}
.brand h2{font-size:17px !important; line-height:1.15 !important; letter-spacing:-.25px !important}
.brand span{color:#bfdbfe !important; font-size:12px !important}
.nav{gap:9px !important}
.nav button{
  padding:13px 14px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}
.nav button span{font-size:14px !important; font-weight:900 !important; color:#eff6ff !important}
.nav button small{font-size:11.5px !important; color:#9eb5d6 !important}
.nav button:hover,
.nav button.active{
  background:linear-gradient(135deg, rgba(37,99,235,.24), rgba(14,165,233,.10)) !important;
  border-color:rgba(96,165,250,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.userbox{
  left:16px !important;
  right:16px !important;
  bottom:16px !important;
  padding:14px !important;
  border-radius:20px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.avatar{
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,#3b82f6,#0ea5e9) !important;
  color:#fff !important;
}
.userbox b{font-size:13px !important; line-height:1.15 !important}
.userbox span,.userbox small{color:#cbdaf4 !important}
.logout-btn,
.userbox .logout-btn,
.sidebar .logout-btn{
  min-height:40px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  background:#ffffff !important;
  color:#2563eb !important;
  border:1px solid #dbe7ff !important;
  box-shadow:0 6px 14px rgba(15,23,42,.08) !important;
}

/* Main / topbar / content */
.main{margin-left:286px !important}
.topbar{
  padding:18px 28px !important;
  background:rgba(255,255,255,.82) !important;
  border-bottom:1px solid #e4edf7 !important;
  box-shadow:0 10px 28px rgba(15,23,42,.04) !important;
}
.topbar h1{font-size:25px !important; letter-spacing:-.45px !important}
.topbar p:not(.eyebrow){font-size:13px !important; color:#64748b !important}
.eyebrow,.page-label,.brandline{color:#2563eb !important}
.content{padding:26px 28px 40px !important; max-width:1600px !important}

/* Cards + tables */
.card{
  background:rgba(255,255,255,.98) !important;
  border:1px solid #e6edf6 !important;
  border-radius:24px !important;
  box-shadow:0 12px 32px rgba(15,23,42,.05) !important;
}
.table-wrap{
  border:1px solid #e6edf6 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#fff !important;
}
.table-wrap table{background:#fff !important}
th{
  background:linear-gradient(180deg,#f8fbff 0%, #f2f6fc 100%) !important;
  color:#334155 !important;
  font-weight:900 !important;
  font-size:12.5px !important;
  letter-spacing:.01em !important;
}
td{
  color:#1e293b !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  border-top:1px solid #edf2f7 !important;
}
tr:hover td{background:#fbfdff !important}
.badge,.pill,.status-badge{
  border-radius:999px !important;
}
.good{background:#ecfdf3 !important; color:#067647 !important; border:1px solid #abefc6 !important}
.pending,.warn{background:#fff7ed !important; color:#b54708 !important; border:1px solid #fed7aa !important}
.bad,.danger-text,.loss{color:#dc2626 !important}

/* Section headers */
.section-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:14px !important;
  margin-bottom:16px !important;
}
.section-head h3,
.small-title,
.card h3{
  color:#0f172a !important;
  letter-spacing:-.3px !important;
}
.muted,.help,.sub,.login-brand p{color:#64748b !important}

/* Dashboard ultra finish */
#dashboard .dashboard-hero{
  min-height:198px !important;
  border-radius:30px !important;
  padding:34px 36px !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 18% 120%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 28%),
    linear-gradient(135deg,#0f172a 0%, #13295b 38%, #1d4ed8 74%, #38bdf8 100%) !important;
  box-shadow:0 30px 64px rgba(37,99,235,.16) !important;
}
#dashboard .dashboard-hero h2{font-size:clamp(32px,3vw,42px) !important}
#dashboard .dashboard-hero p{font-size:15px !important; line-height:1.72 !important}
#dashboard .hero-actions .btn{
  min-height:48px !important;
  border-radius:15px !important;
}
#dashboard .dashboard-kpis,
#dashboard .dashboard-kpis-exec{gap:16px !important}
#dashboard .kpi{
  min-height:172px !important;
  border-radius:22px !important;
  padding:22px 22px 18px !important;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%) !important;
}
#dashboard .kpi .value{
  font-size:clamp(28px,2.2vw,36px) !important;
  letter-spacing:-.9px !important;
}
#dashboard .kpi .note{color:#64748b !important}
#dashboard .clickable-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 22px 48px rgba(37,99,235,.10) !important;
}
#dashboard .chart-modern,
#dashboard .chart{
  border-radius:18px !important;
}
#dashboard .executive-note-card,
#dashboard .mini-report{
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%) !important;
}
#dashboard .executive-note-clean .exec-line{
  min-height:58px !important;
  border-radius:16px !important;
  background:#ffffff !important;
  border:1px solid #e5edf7 !important;
  box-shadow:0 6px 16px rgba(15,23,42,.04) !important;
}
#dashboard .dashboard-table thead th{
  background:linear-gradient(180deg,#f8fbff 0%, #f1f6fd 100%) !important;
}
#dashboard .dashboard-table tbody td{background:#fff !important}

/* Responsive */
@media (max-width: 1380px){
  .main{margin-left:0 !important}
  .topbar{padding:16px 18px !important}
  .content{padding:18px !important}
}
@media (max-width: 840px){
  .login-card{width:100% !important; padding:28px 24px !important}
  .topbar{flex-direction:column !important; align-items:stretch !important}
  .top-actions,.button-row{justify-content:flex-start !important}
  #dashboard .dashboard-hero{padding:26px 24px !important}
}



/* =========================================================
   TABLE HORIZONTAL SCROLL FIX
   Fix menu Pengeluaran/Buku Besar/Approval table cannot slide sideways.
   Visual only; no accounting logic changed.
   ========================================================= */

.main,
.content,
.section,
.card{
  min-width:0 !important;
}

.table-wrap{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  scrollbar-gutter:stable both-edges !important;
}

#pengeluaran .table-wrap table,
#transaksi .table-wrap table,
#approval .table-wrap table,
#master .table-wrap table,
#proyek .table-wrap table{
  width:max-content !important;
  min-width:1500px !important;
  table-layout:auto !important;
  border-collapse:separate !important;
}

#pengeluaran .table-wrap table{
  min-width:1720px !important;
}

#pengeluaran .table-wrap th,
#pengeluaran .table-wrap td,
#transaksi .table-wrap th,
#transaksi .table-wrap td{
  white-space:nowrap !important;
}

#pengeluaran .table-wrap td:nth-child(4),
#pengeluaran .table-wrap td:nth-child(10),
#transaksi .table-wrap td:nth-child(4),
#transaksi .table-wrap td:nth-child(12){
  max-width:280px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#pengeluaran .table-wrap td:last-child,
#pengeluaran .table-wrap th:last-child,
#transaksi .table-wrap td:last-child,
#transaksi .table-wrap th:last-child{
  min-width:150px !important;
}

.table-wrap::-webkit-scrollbar{
  height:12px !important;
  width:10px !important;
}
.table-wrap::-webkit-scrollbar-track{
  background:#eef4fb !important;
  border-radius:999px !important;
}
.table-wrap::-webkit-scrollbar-thumb{
  background:#b7c7dd !important;
  border-radius:999px !important;
  border:3px solid #eef4fb !important;
}
.table-wrap::-webkit-scrollbar-thumb:hover{
  background:#8ea6c4 !important;
}

#pengeluaran .card,
#transaksi .card,
#approval .card,
#master .card,
#proyek .card{
  overflow:hidden !important;
}
#pengeluaran .table-wrap,
#transaksi .table-wrap,
#approval .table-wrap,
#master .table-wrap,
#proyek .table-wrap{
  overflow-x:auto !important;
  overflow-y:auto !important;
}


/* MASTER PROJECT EDIT ONLY - spacing tombol aksi */
#masterProjectRows td:last-child{
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
}



/* Receivable / Sisa Tagihan Monitoring */
.receivable-monitor-card{
  overflow:visible!important;
}
.receivable-form{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:14px;
}
.receivable-toolbar{
  margin-top:6px;
}
.receivable-kpis{
  margin:10px 0 14px;
}
.mini-receivable{
  background:#f8fafc;
  border:1px solid var(--line, #e5eaf2);
  border-radius:18px;
  padding:14px 16px;
}
.mini-receivable span{
  display:block;
  color:var(--muted, #667085);
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
}
.mini-receivable b{
  display:block;
  color:var(--ink, #0f172a);
  font-size:19px;
  letter-spacing:-.02em;
}
.receivable-table-wrap table{
  min-width:1200px!important;
}
.progress-cell{
  position:relative;
  height:26px;
  min-width:130px;
  background:#eef4fb;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:0 10px;
  color:#334155;
  font-size:12px;
  font-weight:850;
}
.progress-cell i{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-radius:999px;
  background:linear-gradient(135deg, var(--brand, #2563eb), var(--brand2, #0ea5e9));
  opacity:.24;
}
.progress-cell span{
  position:relative;
  z-index:1;
}
@media(max-width:980px){
  .receivable-form{grid-template-columns:1fr}
}



/* =========================================================
   RECEIVABLE MONITORING UI POLISH
   Clean professional layout for monitoring sisa tagihan.
   ========================================================= */
.receivable-monitor-card{
  padding:24px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
}
.receivable-section-head{
  align-items:flex-start!important;
  margin-bottom:18px!important;
  padding-bottom:14px!important;
  border-bottom:1px solid #e8eef6!important;
}
.receivable-section-head .eyebrow,
.receivable-modal-card .eyebrow{
  display:inline-block;
  font-size:10px;
  line-height:1;
  letter-spacing:.18em;
  font-weight:900;
  color:#2563eb;
  margin-bottom:8px;
}
.receivable-section-head h3{
  font-size:22px!important;
  letter-spacing:-.02em;
}
.receivable-head-note{
  font-size:12px;
  font-weight:800;
  color:#64748b;
  background:#f3f7fc;
  border:1px solid #e2eaf5;
  border-radius:999px;
  padding:10px 14px;
  white-space:nowrap;
}
.receivable-panel{
  background:#f8fbff;
  border:1px solid #dfe9f6;
  border-radius:22px;
  padding:18px;
  margin-bottom:16px;
}
.receivable-panel-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.receivable-panel-title b{
  font-size:15px;
  color:#0f172a;
}
.receivable-panel-title span{
  font-size:12px;
  color:#64748b;
}
.receivable-form{
  grid-template-columns:1.05fr 1.05fr 1.05fr 1.1fr!important;
  gap:14px!important;
  margin-bottom:0!important;
}
.receivable-form label{
  font-size:12px!important;
}
.receivable-form .btn{
  height:46px!important;
  border-radius:14px!important;
}
.receivable-toolbar{
  display:grid!important;
  grid-template-columns:minmax(220px,1.1fr) minmax(230px,.9fr) minmax(190px,.75fr) auto!important;
  gap:12px!important;
  align-items:center!important;
  margin:12px 0 16px!important;
}
.receivable-toolbar input,
.receivable-toolbar select,
.receivable-toolbar .pfc-select-btn,
.receivable-toolbar .btn{
  min-height:44px!important;
  border-radius:14px!important;
  font-size:13px!important;
}
.receivable-kpis{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin:8px 0 18px!important;
}
.mini-receivable{
  position:relative;
  overflow:hidden;
  background:#ffffff!important;
  border:1px solid #dfe9f6!important;
  border-radius:20px!important;
  padding:16px 18px!important;
  box-shadow:0 14px 34px rgba(15,23,42,.05);
}
.mini-receivable:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,#2563eb,#0ea5e9);
}
.mini-receivable span{
  display:block;
  font-size:11px!important;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#64748b!important;
  font-weight:900!important;
  margin-bottom:8px!important;
}
.mini-receivable b{
  font-size:21px!important;
  color:#0f172a!important;
  letter-spacing:-.03em;
}
.receivable-table-wrap{
  border:1px solid #dfe9f6!important;
  border-radius:22px!important;
  background:#fff;
  overflow:auto!important;
  box-shadow:0 12px 32px rgba(15,23,42,.04);
}
.receivable-table-wrap table{
  min-width:1320px!important;
  width:max-content!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.receivable-table-wrap thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f4f8fc!important;
  color:#334155!important;
  font-size:12px!important;
  letter-spacing:.01em;
  white-space:nowrap!important;
  padding:14px 16px!important;
  border-bottom:1px solid #dfe9f6!important;
}
.receivable-table-wrap tbody td{
  padding:14px 16px!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
  border-bottom:1px solid #eef2f7!important;
  font-size:13px!important;
}
.receivable-table-wrap tbody tr:hover td{
  background:#f9fbff;
}
.receivable-table-wrap .row-no{
  width:54px;
  color:#64748b;
  font-weight:900;
}
.receivable-table-wrap td:nth-child(2){
  min-width:260px;
}
.receivable-table-wrap td:nth-child(3){
  min-width:150px;
  font-weight:800;
}
.receivable-table-wrap td:nth-child(9){
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#475569;
}
.progress-cell{
  height:28px!important;
  min-width:150px!important;
  background:#edf4fc!important;
  border:1px solid #e0eaf5;
}
.progress-cell i{
  background:linear-gradient(90deg,#60a5fa,#2563eb)!important;
  opacity:.30!important;
}
.progress-cell span{
  color:#0f172a!important;
  font-weight:900!important;
}
.receivable-table-wrap .small{
  border-radius:12px!important;
  padding:9px 13px!important;
  font-size:12px!important;
  font-weight:900!important;
}
.receivable-table-wrap .small.danger{
  background:#fee2e2!important;
  color:#b91c1c!important;
  border-color:#fecaca!important;
}
.receivable-table-wrap .small.ghost,
.receivable-table-wrap .small.secondary{
  background:#ffffff!important;
  color:#2563eb!important;
  border-color:#bfdbfe!important;
}
.receivable-modal-card{
  max-width:980px!important;
}
.receivable-edit-form{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.receivable-edit-form .full{
  grid-column:1 / -1!important;
}
@media(max-width:1200px){
  .receivable-form,
  .receivable-toolbar,
  .receivable-kpis{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:760px){
  .receivable-form,
  .receivable-toolbar,
  .receivable-kpis,
  .receivable-edit-form{
    grid-template-columns:1fr!important;
  }
  .receivable-panel-title,
  .receivable-section-head{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
}



/* =========================================================
   FINAL MONITORING LOGIC + PROFESSIONAL DISPLAY
   ========================================================= */
#proyek.section{
  display:none;
}
#proyek.section.active{
  display:block!important;
}
.project-monitor-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:16px 0 18px;
}
.project-monitor-kpi{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid #dfe9f6;
  border-radius:20px;
  padding:16px 18px;
  box-shadow:0 14px 34px rgba(15,23,42,.05);
}
.project-monitor-kpi:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,#2563eb,#0ea5e9);
}
.project-monitor-kpi span{
  display:block;
  font-size:11px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#64748b;
  font-weight:900;
  margin-bottom:8px;
}
.project-monitor-kpi b{
  display:block;
  color:#0f172a;
  font-size:20px;
  letter-spacing:-.03em;
}
.project-monitor-table{
  border:1px solid #dfe9f6!important;
  border-radius:22px!important;
  background:#fff;
  overflow:auto!important;
  box-shadow:0 12px 32px rgba(15,23,42,.04);
}
.project-monitor-table table{
  min-width:1450px!important;
  width:max-content!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.project-monitor-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f4f8fc!important;
  color:#334155!important;
  font-size:12px!important;
  white-space:nowrap!important;
  padding:14px 16px!important;
  border-bottom:1px solid #dfe9f6!important;
}
.project-monitor-table tbody td{
  padding:14px 16px!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
  border-bottom:1px solid #eef2f7!important;
  font-size:13px!important;
}
.project-monitor-table tbody tr:hover td{
  background:#f9fbff;
}
.project-monitor-table .row-no{
  width:54px;
  color:#64748b;
  font-weight:900;
}
.project-monitor-table td:nth-child(2){
  min-width:270px;
}
.project-monitor-table .small{
  border-radius:12px!important;
  padding:9px 13px!important;
  font-size:12px!important;
  font-weight:900!important;
}
.receivable-reconcile-note{
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #dfe9f6;
  background:#f8fbff;
  color:#475569;
  font-size:13px;
}
.receivable-reconcile-note.ok{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}
.receivable-reconcile-note.warn{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#9a3412;
}
@media(max-width:1200px){
  .project-monitor-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .project-monitor-kpis{
    grid-template-columns:1fr;
  }
}



/* Receivable detail modal and clickable rows */
.receivable-click-cell{
  cursor:pointer;
}
.receivable-click-cell:hover{
  color:#2563eb;
  text-decoration:underline;
  text-underline-offset:3px;
}
.receivable-detail-modal{
  max-width:1180px!important;
}
.detail-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:10px 0 18px;
}
.detail-summary-grid>div{
  background:#f8fbff;
  border:1px solid #dfe9f6;
  border-radius:18px;
  padding:14px 16px;
}
.detail-summary-grid span{
  display:block;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:6px;
}
.detail-summary-grid b{
  display:block;
  font-size:20px;
  color:#0f172a;
  letter-spacing:-.03em;
}
.receivable-detail-table table{
  min-width:980px!important;
}
.receivable-detail-table th,
.receivable-detail-table td{
  white-space:nowrap!important;
}
.receivable-detail-table td:nth-child(4),
.receivable-detail-table td:nth-child(7){
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:760px){
  .detail-summary-grid{grid-template-columns:1fr}
}


/* Fix update: receivable target popup button */
.receivable-popup-btn{
  white-space:nowrap!important;
  min-height:42px!important;
  padding:10px 14px!important;
}
@media(max-width:760px){
  .receivable-popup-btn{width:100%!important;}
}

/* Journal preview & accounting adjustment polish */
.journal-preview{
  grid-column:1/-1;
  margin-top:4px;
  border:1px solid var(--line, #e5eaf2);
  border-radius:18px;
  background:#f8fafc;
  padding:14px;
}
.journal-preview:empty{display:none}
.journal-preview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.journal-preview-head b{display:block;color:var(--ink,#111827);font-size:15px}
.journal-preview-head span:not(.badge){display:block;color:var(--muted,#667085);font-size:12px;margin-top:3px}
.journal-preview-table{max-height:260px;border-radius:14px}
.journal-preview-empty{
  color:var(--muted,#667085);
  font-size:13px;
  line-height:1.5;
}
#advanceBalanceInfo{margin:0!important}
@media(max-width:980px){
  .journal-preview-head{display:block}
  .journal-preview-head .badge{margin-top:10px}
}

/* Receivable target input: single professional popup action only */
.receivable-panel-compact .receivable-panel-title{
  display:grid !important;
  grid-template-columns:minmax(180px, 220px) 1fr auto !important;
  align-items:center !important;
  gap:18px !important;
}
.receivable-panel-compact .receivable-popup-btn{
  min-width:220px !important;
  white-space:nowrap !important;
}
@media(max-width:980px){
  .receivable-panel-compact .receivable-panel-title{
    grid-template-columns:1fr !important;
    align-items:flex-start !important;
  }
  .receivable-panel-compact .receivable-popup-btn{
    width:100% !important;
    min-width:0 !important;
  }
}


/* =========================================================
   Purchase Order Material - modern professional UI
   ========================================================= */
.po-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(135deg,#ffffff 0%, #eff6ff 100%)!important;
  border:1px solid #dbeafe!important;
}
.po-hero h2{margin:4px 0 8px;font-size:clamp(24px,2vw,34px);letter-spacing:-.05em;color:#0f172a!important}
.po-hero p{margin:0;max-width:880px;color:#64748b;line-height:1.6}
.po-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.po-kpis{grid-template-columns:repeat(3,minmax(220px,1fr))!important}
.po-kpi{min-height:130px;background:#fff!important;position:relative;overflow:hidden!important}
.po-kpi:after{content:"";position:absolute;right:-34px;top:-34px;width:92px;height:92px;border-radius:999px;background:#eff6ff}
.po-kpi span,.po-kpi b,.po-kpi small{position:relative;z-index:1;display:block}
.po-kpi span{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.po-kpi b{margin-top:14px;font-size:24px;color:#0f172a}
.po-kpi small{margin-top:8px;color:#64748b}
.po-layout{grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)!important;align-items:start}
.po-form-card .form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.po-item-panel{border:1px solid #e5eaf2;border-radius:22px;padding:16px;background:#f8fafc}
.po-item-table{max-height:360px;border-radius:16px!important}
.po-item-table input{min-width:120px;padding:9px 10px;border-radius:10px!important;font-size:12px}
.po-item-table .po-qty{min-width:80px}.po-item-table .po-satuan{min-width:90px}.po-line-total{font-weight:900;color:#0f172a}
.po-total-box{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.po-total-box div{background:#fff;border:1px solid #e5eaf2;border-radius:16px;padding:12px}
.po-total-box span{display:block;font-size:11px;color:#64748b;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.po-total-box b{display:block;margin-top:6px;font-size:18px;color:#0f172a}
.po-total-box .grand{background:linear-gradient(135deg,#2563eb,#0ea5e9);border:0;color:#fff}
.po-total-box .grand span,.po-total-box .grand b{color:#fff!important}
.po-toolbar{align-items:center}
.po-list-table{max-height:690px}
.po-actions{display:flex;gap:6px;flex-wrap:wrap;min-width:330px}
.po-actions .small{padding:7px 9px!important;font-size:11px!important;border-radius:10px!important}
@media(max-width:1200px){.po-layout{grid-template-columns:1fr!important}.po-form-card .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.po-kpis{grid-template-columns:1fr!important}}
@media(max-width:760px){.po-hero{display:block}.po-hero-actions{justify-content:flex-start;margin-top:14px}.po-form-card .form-grid{grid-template-columns:1fr}.po-total-box{grid-template-columns:1fr}.po-actions{min-width:0}.po-kpi b{font-size:20px}}


/* PO Material: form hidden by default, opened only from + Buat PO Baru / Edit */
.po-form-card.po-hidden{
  display:none!important;
}
.po-layout:not(.po-form-open){
  grid-template-columns:1fr!important;
}
.po-layout:not(.po-form-open) .po-list-card{
  grid-column:1/-1!important;
}
.po-layout.po-form-open .po-list-card{
  grid-column:auto!important;
}

/* =========================================================
   PO Material Popup Form - professional modal behavior
   ========================================================= */
body.po-modal-open{
  overflow:hidden!important;
}
.po-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:28px!important;
  background:rgba(15,23,42,.46)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  overflow:auto!important;
}
.po-modal-backdrop.po-hidden{
  display:none!important;
}
.po-modal-card{
  width:min(1180px,100%)!important;
  max-height:calc(100vh - 56px)!important;
  overflow:auto!important;
  border-radius:28px!important;
  box-shadow:0 34px 90px rgba(15,23,42,.28)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  animation:poModalIn .18s ease-out!important;
}
@keyframes poModalIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.po-modal-head-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
.po-layout{
  display:block!important;
}
.po-layout .po-list-card{
  width:100%!important;
}
.po-form-card.po-hidden{
  display:block!important;
}
.po-list-table{
  max-height:720px!important;
}
@media(max-width:760px){
  .po-modal-backdrop{padding:12px!important;align-items:flex-start!important}
  .po-modal-card{max-height:calc(100vh - 24px)!important;border-radius:20px!important;padding:16px!important}
  .po-modal-head-actions{justify-content:flex-start!important}
}


/* =========================================================
   FINAL AR/AP MODULE UI
   ========================================================= */
.finance-module-hero{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.22), transparent 20%),
    linear-gradient(135deg,#2563EB 0%,#0EA5E9 100%) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:26px !important;
  box-shadow:0 18px 44px rgba(37,99,235,.18) !important;
}
.finance-module-hero h2{margin:4px 0 8px;font-size:clamp(24px,2vw,32px);letter-spacing:-.04em;color:#fff!important}
.finance-module-hero p{margin:0;max-width:840px;color:rgba(255,255,255,.86)!important;line-height:1.55}
.finance-module-hero .eyebrow{color:rgba(255,255,255,.82)!important}
.debt-hero{background:linear-gradient(135deg,#0f172a 0%,#2563EB 100%)!important}
.finance-kpis{grid-template-columns:repeat(3,minmax(260px,1fr))}
.finance-ledger-table{max-height:560px}
.finance-ledger-table td:nth-child(6){white-space:normal;min-width:240px}
.finance-entry-modal{width:min(1120px,100%)}
.finance-entry-modal .form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){
  .finance-module-hero{display:block}
  .finance-module-hero .po-hero-actions{justify-content:flex-start;margin-top:16px}
  .finance-kpis{grid-template-columns:1fr}
  .finance-entry-modal .form-grid{grid-template-columns:1fr}
}


/* Login flicker fix v5: hide login while restoring same-tab session */
body.pfc-auth-booting #login{display:none!important;}
body.pfc-auth-booting #app{display:none!important;}
body.pfc-auth-booting::before{
  content:"Memuat aplikasi...";
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%);
  color:#2563eb; font-weight:900; font-size:16px; letter-spacing:.2px;
}

/* V7 cash standby KPI */
.cash-card .value.profit{color:#047857!important}
.cash-card .value.loss{color:#b42318!important}
#arCashOutStatus,#arCashOutBank{min-width:0}


/* V8 Net Cash Position - professional accounting placement */
.dashboard-summary-grid-netcash{
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
  align-items:stretch;
}
.net-cash-position-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border:1px solid #dbeafe!important;
}
.net-cash-position-value{
  font-size:clamp(24px,2vw,34px);
  font-weight:950;
  letter-spacing:-.04em;
  color:#0f172a;
  margin:4px 0 4px;
}
.net-cash-position-value.profit,
.net-cash-breakdown .net b.profit{color:#047857!important}
.net-cash-position-value.loss,
.net-cash-breakdown .net b.loss{color:#b42318!important}
.net-cash-position-note{
  color:#667085;
  font-size:12.5px;
  line-height:1.45;
  margin-bottom:12px;
}
.net-cash-breakdown{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.net-cash-breakdown div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid #e5eaf2;
  border-radius:14px;
  background:#fff;
}
.net-cash-breakdown span{
  color:#667085;
  font-size:12px;
  font-weight:800;
}
.net-cash-breakdown b{
  color:#0f172a;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.net-cash-breakdown .net{
  border-color:#bfdbfe;
  background:#eff6ff;
}
.net-cash-breakdown .net span,
.net-cash-breakdown .net b{
  color:#1d4ed8;
  font-weight:950;
}
.net-cash-disclaimer{
  margin:12px 0 0;
  font-size:12px!important;
}
@media(max-width:1180px){
  .dashboard-summary-grid-netcash{grid-template-columns:1fr;}
}

/* V11 Finance Breakdown: separate Profit Performance and Net Cash Position */
.dashboard-summary-grid-finance{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.profit-performance-card,
.net-cash-position-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border:1px solid #dbeafe!important;
}
.profit-performance-value,
.net-cash-position-value{
  font-size:clamp(25px,2.35vw,38px);
  font-weight:950;
  letter-spacing:-.045em;
  color:#0f172a;
  margin:4px 0 6px;
}
.profit-performance-value.profit,
.net-cash-position-value.profit,
.finance-breakdown .net b.profit{color:#047857!important}
.profit-performance-value.loss,
.net-cash-position-value.loss,
.finance-breakdown .net b.loss{color:#b42318!important}
.finance-card-note{
  color:#667085;
  font-size:13px;
  line-height:1.5;
  margin-bottom:12px;
}
.finance-breakdown{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.finance-breakdown div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid #e5eaf2;
  border-radius:14px;
  background:#fff;
}
.finance-breakdown span{
  color:#667085;
  font-size:12px;
  font-weight:850;
}
.finance-breakdown b{
  color:#0f172a;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.finance-breakdown .net{
  border-color:#bfdbfe;
  background:#eff6ff;
}
.finance-breakdown .net span,
.finance-breakdown .net b{
  color:#1d4ed8;
  font-weight:950;
}
.finance-disclaimer{
  margin:12px 0 0;
  font-size:12px!important;
}
@media(max-width:1180px){
  .dashboard-summary-grid-finance{grid-template-columns:1fr;}
}

/* V12 Financing fee fields */
.ap-financing-field input[readonly]{
  background:#f8fafc!important;
  color:#1d4ed8!important;
  font-weight:850!important;
}
#payablePaymentModal #apPayNominal[readonly]{
  background:#f8fafc!important;
  color:#1d4ed8!important;
  font-weight:850!important;
}

/* V13 polish */
.readonly-auto-number,
input[readonly].readonly-auto-number{
  background:#f8fafc!important;
  color:#94a3b8!important;
  cursor:not-allowed!important;
  user-select:none!important;
}
input:disabled{
  background:#f1f5f9!important;
  color:#94a3b8!important;
  cursor:not-allowed!important;
}
.finance-breakdown div span{line-height:1.35;}



/* V19 - restore Hutang/Pinjaman custom select; no native override. */
#payableEntryModal .pfc-select{width:100%;}
#payableEntryModal .pfc-select-btn{min-height:54px!important;border-radius:18px!important;}


/* V23 Trial Multi User Management */
.user-modal-card{width:min(980px,100%)}
#userManagementRows .btn.small{margin:2px;white-space:nowrap}
#userManagementRows td{vertical-align:middle}
#userManagementModal input[readonly]{background:#f8fafc!important;color:#64748b!important;cursor:not-allowed!important}
#userManagementModal select:disabled{background:#f8fafc!important;color:#64748b!important;cursor:not-allowed!important}


/* V28 RO Partial Realization */
.pfc-ro-realization-card{width:min(1180px,100%)}
.pfc-ro-realization-card .po-total-box .grand{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff}
.pfc-readonly-auto{background:#f8fafc!important;color:#64748b!important;cursor:not-allowed!important}
.po-actions .btn{margin:2px 3px 2px 0}


/* V29 RO file upload polish */
#poRealizationModal input[type="file"]{
  padding:10px 12px!important;
  background:#f8fafc!important;
  border-style:dashed!important;
}


/* V30 RO realization professional modal */
.pfc-ro-realization-card{width:min(1480px,96vw)!important;max-height:92vh!important;overflow:auto!important;}
.pfc-ro-realization-card .po-item-table th,
.pfc-ro-realization-card .po-item-table td{vertical-align:middle!important;}
.pfc-ro-realization-card input[type="file"]{font-size:12px;padding:9px;background:#f8fafc!important;}
.pfc-ro-view-card{width:min(1180px,95vw)!important;max-height:90vh!important;overflow:auto!important;}
.pfc-realization-card{border:1px solid var(--line);border-radius:18px;padding:14px;margin:12px 0;background:#fff;}
.pfc-realization-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px;}
.pfc-realization-head .num{text-align:right;}
@media(max-width:760px){.pfc-realization-head{display:block}.pfc-realization-head .num{text-align:left;margin-top:8px}}

/* V30B cache marker: RO item-level realization active */


/* V31 RO professional realization modal */
.pfc-ro-view-card{width:min(1180px,96vw);max-height:92vh;overflow:auto}
.pfc-realization-detail-card{border:1px solid var(--line,#e5eaf2);border-radius:22px;padding:16px;margin:14px 0;background:#fff;box-shadow:0 8px 24px rgba(17,24,39,.045)}
.pfc-realization-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.pfc-realization-head b{font-size:17px;color:var(--ink,#111827)}
.pfc-realization-head span{display:block;color:var(--muted,#667085);font-size:13px;margin-top:4px}
.pfc-realization-summary{grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0 14px}
.pfc-ro-realization-card .po-item-table input[type="file"]{min-width:170px;padding:9px;font-size:12px}
.pfc-ro-realization-card .po-item-table th,.pfc-ro-realization-card .po-item-table td{vertical-align:top}
.pfc-ro-realization-card .por-discount-pct{min-width:90px}
@media(max-width:980px){.pfc-realization-summary{grid-template-columns:1fr}.pfc-ro-view-card{width:96vw}}


/* V32 RO item realization polish */
.pfc-ro-realization-card .po-item-table .pfc-check{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pfc-ro-realization-card .po-item-table .pfc-check input{position:absolute;opacity:0;pointer-events:none}
.pfc-ro-realization-card .po-item-table .pfc-check span{width:20px;height:20px;border-radius:6px;border:1.5px solid #c9d5e8;background:#fff;display:inline-block;position:relative;box-shadow:inset 0 1px 2px rgba(15,23,42,.04);transition:all .18s ease}
.pfc-ro-realization-card .po-item-table .pfc-check input:checked + span{background:linear-gradient(135deg,#2563eb,#0ea5e9);border-color:#2563eb;box-shadow:0 6px 14px rgba(37,99,235,.18)}
.pfc-ro-realization-card .po-item-table .pfc-check input:checked + span::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pfc-ro-realization-card .po-item-table .pfc-check input:focus + span{outline:2px solid rgba(37,99,235,.18);outline-offset:2px}
.pfc-ro-realization-card .po-item-table .pfc-file-upload{display:flex;flex-direction:column;gap:8px;min-width:180px;padding:10px 12px;border:1px dashed #cfe0f5;border-radius:14px;background:#f8fbff;position:relative;transition:all .18s ease}
.pfc-ro-realization-card .po-item-table .pfc-file-upload:hover{border-color:#9fc0f1;background:#f3f8ff}
.pfc-ro-realization-card .po-item-table .pfc-file-upload.has-file{border-color:#8cb4f9;background:#eef5ff}
.pfc-ro-realization-card .po-item-table .pfc-file-upload input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;min-width:100%!important;width:100%!important;height:100%!important;padding:0!important;margin:0!important}
.pfc-ro-realization-card .po-item-table .pfc-file-upload-btn{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:8px 12px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;font-size:12px;font-weight:800;letter-spacing:.01em;box-shadow:0 8px 18px rgba(37,99,235,.18)}
.pfc-ro-realization-card .po-item-table .pfc-file-upload-name{font-size:12px;color:#5f6f86;line-height:1.35;word-break:break-word}
.pfc-ro-realization-card .po-item-table .pfc-file-stack{display:flex;flex-direction:column;gap:8px}
.pfc-ro-realization-card .po-item-table .pfc-file-stack > .btn{align-self:flex-start}
.pfc-ro-realization-card .por-discount-pct{text-align:right}

/* V33 STABLE - RO realization modal no jump / no scroll shifting */
body.po-modal-open{
  overflow:hidden!important;
}
#poRealizationModal.po-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:24px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scroll-behavior:auto!important;
}
#poRealizationModal.po-hidden{display:none!important;}
#poRealizationModal .pfc-ro-realization-card{
  width:min(1480px,96vw)!important;
  max-height:calc(100dvh - 48px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scroll-behavior:auto!important;
  margin:0 auto!important;
  transform:none!important;
}
#poRealizationModal .po-item-table{
  max-height:42vh!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scroll-behavior:auto!important;
  scrollbar-gutter:stable!important;
}
#poRealizationModal .pfc-check{
  position:relative!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  margin:0!important;
}
#poRealizationModal .pfc-check input.por-check{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  opacity:0!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:2!important;
}
#poRealizationModal .pfc-check span{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  border-radius:6px!important;
  position:relative!important;
  z-index:1!important;
}


/* V36 - Nomor urut daftar RO */
.pfc-ro-no-col{width:58px;min-width:58px;text-align:center!important;white-space:nowrap}
#poRows .pfc-ro-no-col b{font-weight:950;color:#334155}

/* V37 - Dashboard Monitoring Profit Per Proyek */
#dashProjectRows .budget-positive{color:#047857;font-weight:900}
#dashProjectRows .budget-negative{color:#b42318;font-weight:900}
#dashProjectRows td{vertical-align:middle}
#dashProjectRows .small.ghost{white-space:nowrap}

/* =========================================================
   V38 - Executive Monitoring Profit Per Proyek
   ========================================================= */
.project-profit-monitor-block{margin-top:18px;margin-bottom:18px}
.project-profit-monitor-card{padding:18px 18px 16px;overflow:hidden;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}
.project-profit-head{align-items:center;margin-bottom:14px}
.project-profit-head h3{font-size:21px;letter-spacing:-.35px}
.project-profit-chip{display:inline-flex;align-items:center;white-space:nowrap;border:1px solid #cfe0ff;background:#eef5ff;color:#2563eb;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:950;letter-spacing:.2px}
.project-profit-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.project-profit-mini-card{position:relative;overflow:hidden;border:1px solid #e2ebf7;background:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 8px 20px rgba(15,23,42,.045)}
.project-profit-mini-card:after{content:"";position:absolute;right:-20px;top:-28px;width:82px;height:82px;border-radius:999px;background:#eef5ff;opacity:.9}
.project-profit-mini-card span,.project-profit-mini-card b,.project-profit-mini-card small{position:relative;z-index:1;display:block}
.project-profit-mini-card span{font-size:11px;text-transform:uppercase;letter-spacing:.9px;font-weight:950;color:#64748b}
.project-profit-mini-card b{font-size:22px;line-height:1.15;margin-top:7px;color:#111827;letter-spacing:-.4px}
.project-profit-mini-card small{font-size:12px;color:#728097;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-profit-mini-card.is-good:after{background:#dcfce7}
.project-profit-mini-card.is-good b{color:#047857}
.project-profit-mini-card.is-bad:after{background:#fee2e2}
.project-profit-mini-card.is-bad b{color:#b42318}
.project-profit-mini-card.is-warning:after{background:#fef3c7}
.project-profit-mini-card.is-warning b{color:#b45309}
.project-profit-table-wrap{max-height:380px;overflow:auto;border-radius:20px;border:1px solid #deebfb;background:white}
.project-profit-table{min-width:1080px;font-size:13px}
.project-profit-table th{background:#f3f7fc;color:#334155;padding:12px 14px;white-space:nowrap}
.project-profit-table td{padding:13px 14px;vertical-align:middle;white-space:nowrap}
.project-profit-table tbody tr:hover td{background:#f8fbff}
.project-name-cell{min-width:280px;white-space:normal!important;line-height:1.35}
.project-row-no{width:52px;color:#2563eb}
.project-empty-row{text-align:center;color:#64748b;padding:24px!important}
.project-profit-table .badge{white-space:nowrap;padding:7px 10px}
@media (max-width:1200px){.project-profit-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.project-profit-head{align-items:flex-start;flex-direction:column}.project-profit-table{min-width:980px}}
@media (max-width:720px){.project-profit-cards{grid-template-columns:1fr}.project-profit-monitor-card{padding:14px}.project-profit-chip{display:none}}


/* =========================================================
   V39 - Monitoring Profit Per Proyek as Executive Popup
   ========================================================= */
.project-profit-monitor-card{
  position:relative;
  padding:22px 22px 20px!important;
}
.project-profit-head{
  justify-content:center!important;
  text-align:center!important;
  flex-direction:column!important;
  gap:8px!important;
  margin-bottom:16px!important;
}
.project-profit-head > div{width:100%}
.project-profit-head h3{
  text-align:center!important;
  margin:0 auto 5px!important;
  font-size:23px!important;
  line-height:1.25!important;
}
.project-profit-head .muted{
  display:block;
  text-align:center!important;
  margin:0 auto!important;
  max-width:760px;
  line-height:1.45;
}
.project-profit-chip{margin:0 auto!important}
.project-profit-monitor-card .project-profit-table-wrap{
  display:none!important;
}
.project-profit-cards{margin-bottom:0!important}
.project-profit-mini-card{
  cursor:default;
}
.project-profit-mini-card.is-clickable{
  cursor:pointer;
  border-color:#bfdbfe;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.project-profit-mini-card.is-clickable:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(37,99,235,.13);
  border-color:#60a5fa;
}
.project-profit-mini-card .mini-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  color:#2563eb;
  font-size:12px;
  font-weight:900;
}
.pfc-profit-modal-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:26px;
  background:rgba(15,23,42,.44);
  backdrop-filter:blur(9px);
}
.pfc-profit-modal-overlay.is-open{display:flex}
.pfc-profit-modal{
  width:min(1280px,96vw);
  max-height:88vh;
  overflow:hidden;
  background:#ffffff;
  border:1px solid #dbe8f8;
  border-radius:28px;
  box-shadow:0 34px 90px rgba(15,23,42,.28);
  display:flex;
  flex-direction:column;
}
.pfc-profit-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px 16px;
  background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%);
  border-bottom:1px solid #e2ebf7;
}
.pfc-profit-modal-head h3{
  margin:0;
  font-size:24px;
  letter-spacing:-.45px;
  color:#111827;
}
.pfc-profit-modal-head p{
  margin:6px 0 0;
  color:#64748b;
  line-height:1.45;
  font-size:13px;
}
.pfc-profit-modal-close{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:14px;
  padding:0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff!important;
  color:#2563eb!important;
  border:1px solid #cfe0ff!important;
  box-shadow:none!important;
  font-size:24px;
  line-height:1;
}
.pfc-profit-modal-body{
  padding:18px 22px 22px;
  overflow:auto;
}
.pfc-profit-modal-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.pfc-profit-summary-card{
  border:1px solid #e2ebf7;
  background:#fff;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
}
.pfc-profit-summary-card span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.85px;
  color:#64748b;
  font-weight:950;
}
.pfc-profit-summary-card b{
  display:block;
  margin-top:7px;
  color:#111827;
  font-size:21px;
  letter-spacing:-.35px;
}
.pfc-profit-summary-card.is-good b{color:#047857}
.pfc-profit-summary-card.is-bad b{color:#b42318}
.pfc-profit-modal-table-wrap{
  border:1px solid #deebfb;
  border-radius:20px;
  overflow:auto;
  background:#fff;
}
.pfc-profit-modal-table{
  width:100%;
  min-width:1060px;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.pfc-profit-modal-table th{
  background:#f3f7fc;
  color:#334155;
  text-align:left;
  padding:13px 14px;
  font-weight:950;
  white-space:nowrap;
}
.pfc-profit-modal-table td{
  padding:14px;
  border-bottom:1px solid #e5edf7;
  vertical-align:middle;
  white-space:nowrap;
  text-align:left;
}
.pfc-profit-modal-table .num{text-align:right!important;font-variant-numeric:tabular-nums}
.pfc-profit-modal-table .project-name-cell{
  text-align:left!important;
  white-space:normal!important;
  min-width:280px;
  line-height:1.35;
}
.pfc-profit-modal-table tbody tr:hover td{background:#f8fbff}
.pfc-profit-modal-table .badge{white-space:nowrap}
@media (max-width:1100px){
  .pfc-profit-modal-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .pfc-profit-modal-overlay{padding:12px;align-items:flex-start}
  .pfc-profit-modal{max-height:94vh;border-radius:22px}
  .pfc-profit-modal-head{padding:18px}
  .pfc-profit-modal-head h3{font-size:20px}
  .pfc-profit-modal-summary{grid-template-columns:1fr}
}


/* V40 - Rapikan kartu monitoring dan bedakan popup Total Profit vs Perlu Perhatian */
.project-profit-monitor-card .section-head,
.project-profit-head{
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  flex-direction:column!important;
}
.project-profit-monitor-card .section-head h3,
.project-profit-head h3{
  width:100%!important;
  text-align:center!important;
}
.project-profit-monitor-card .section-head .muted,
.project-profit-head .muted{
  width:100%!important;
  text-align:center!important;
  max-width:860px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.project-profit-mini-card{
  text-align:center!important;
  min-height:164px;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
}
.project-profit-mini-card span,
.project-profit-mini-card b,
.project-profit-mini-card small,
.project-profit-mini-card .mini-action{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.project-profit-mini-card .mini-action{justify-content:center!important;}
.pfc-profit-modal-head{
  align-items:center!important;
  text-align:center!important;
}
.pfc-profit-modal-head > div{
  flex:1;
  text-align:center!important;
}
.pfc-profit-modal-head h3,
.pfc-profit-modal-head p{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.pfc-profit-modal-head p{max-width:760px;}

/* =========================================================
   V41 - Kartu Monitoring Profit dibuat senada dengan KPI dashboard atas
   ========================================================= */
.project-profit-monitor-card{
  padding:20px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-soft)!important;
  overflow:hidden!important;
}
.project-profit-monitor-card .section-head,
.project-profit-head{
  display:flex!important;
  flex-direction:row!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  text-align:left!important;
  gap:14px!important;
  margin-bottom:14px!important;
}
.project-profit-monitor-card .section-head h3,
.project-profit-head h3{
  width:auto!important;
  text-align:left!important;
  font-size:21px!important;
  line-height:1.2!important;
  margin:0!important;
  letter-spacing:-.3px!important;
}
.project-profit-monitor-card .section-head .muted,
.project-profit-head .muted{
  width:auto!important;
  max-width:720px!important;
  text-align:right!important;
  margin:2px 0 0 auto!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.project-profit-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin-bottom:0!important;
}
.project-profit-mini-card{
  position:relative!important;
  min-height:148px!important;
  display:block!important;
  text-align:left!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  padding:18px 18px 16px!important;
  background:linear-gradient(135deg,#ffffff,#f8fbff)!important;
  box-shadow:var(--shadow-soft)!important;
  cursor:default;
}
.project-profit-mini-card:after{
  content:""!important;
  position:absolute!important;
  right:-42px!important;
  top:-42px!important;
  width:126px!important;
  height:126px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#e9f6f0,#dff2ea)!important;
  opacity:.85!important;
  z-index:0!important;
  pointer-events:none!important;
}
.project-profit-mini-card span,
.project-profit-mini-card b,
.project-profit-mini-card small,
.project-profit-mini-card .mini-action{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important;
}
.project-profit-mini-card span{
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.85px!important;
  max-width:80%!important;
}
.project-profit-mini-card b{
  font-size:30px!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:-1px!important;
  margin-top:16px!important;
  color:var(--ink)!important;
  white-space:nowrap!important;
}
.project-profit-mini-card small{
  color:var(--muted)!important;
  font-size:13px!important;
  line-height:1.35!important;
  margin-top:12px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:92%!important;
}
.project-profit-mini-card .mini-action{
  color:#2563eb!important;
  font-size:13px!important;
  font-weight:950!important;
  font-style:normal!important;
  margin-top:10px!important;
  justify-content:flex-start!important;
}
.project-profit-mini-card.is-clickable{
  cursor:pointer!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}
.project-profit-mini-card.is-clickable:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--shadow)!important;
  border-color:#b5dacc!important;
}
.project-profit-mini-card.is-good:after{background:#dcfce7!important;}
.project-profit-mini-card.is-good b{color:#047857!important;}
.project-profit-mini-card.is-bad:after{background:#fee2e2!important;}
.project-profit-mini-card.is-bad b{color:#b42318!important;}
.project-profit-mini-card.is-warning:after{background:#fef3c7!important;}
.project-profit-mini-card.is-warning b{color:#b45309!important;}
.pfc-profit-modal-overlay:not(.is-open){display:none!important;}
.pfc-profit-modal-overlay.is-open{display:flex!important;}
.pfc-profit-modal .small.ghost{
  white-space:nowrap!important;
}
@media (max-width:1200px){
  .project-profit-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .project-profit-monitor-card .section-head,
  .project-profit-head{flex-direction:column!important;align-items:flex-start!important;}
  .project-profit-monitor-card .section-head .muted,
  .project-profit-head .muted{text-align:left!important;margin-left:0!important;}
}
@media (max-width:720px){
  .project-profit-cards{grid-template-columns:1fr!important;}
  .project-profit-mini-card{min-height:138px!important;}
  .project-profit-mini-card b{font-size:27px!important;}
}

/* =========================================================
   V42 - Kartu monitoring dibuat senada dengan KPI dashboard utama
   ========================================================= */
.project-profit-monitor-card{
  background:rgba(255,255,255,.96)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-soft)!important;
  padding:20px!important;
}
.project-profit-monitor-card .section-head,
.project-profit-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:14px!important;
  margin-bottom:16px!important;
  text-align:left!important;
}
.project-profit-monitor-card .section-head h3,
.project-profit-head h3{
  font-size:21px!important;
  line-height:1.2!important;
  margin:0!important;
  text-align:left!important;
  letter-spacing:-.3px!important;
}
.project-profit-monitor-card .section-head .muted,
.project-profit-head .muted{
  max-width:720px!important;
  margin:2px 0 0 auto!important;
  color:var(--muted)!important;
  text-align:right!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.project-profit-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(220px,1fr))!important;
  gap:18px!important;
  margin:0!important;
}
.project-profit-mini-card{
  position:relative!important;
  overflow:hidden!important;
  min-height:168px!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--shadow-soft)!important;
  padding:20px!important;
  text-align:left!important;
}
.project-profit-mini-card:after{
  content:""!important;
  position:absolute!important;
  right:-44px!important;
  top:-44px!important;
  width:120px!important;
  height:120px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#e9f6f0,#dff2ea)!important;
  opacity:.85!important;
  z-index:0!important;
  pointer-events:none!important;
  display:block!important;
}
.project-profit-mini-card span,
.project-profit-mini-card b,
.project-profit-mini-card small,
.project-profit-mini-card .mini-action{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  text-align:left!important;
}
.project-profit-mini-card span{
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.7px!important;
  max-width:80%!important;
}
.project-profit-mini-card b{
  font-size:31px!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:-1px!important;
  margin-top:18px!important;
  color:var(--ink)!important;
  white-space:nowrap!important;
}
.project-profit-mini-card small{
  color:var(--muted)!important;
  font-size:13px!important;
  line-height:1.4!important;
  margin-top:14px!important;
  max-width:92%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.project-profit-mini-card .mini-action{
  color:#2563eb!important;
  font-size:13px!important;
  font-style:normal!important;
  font-weight:950!important;
  margin-top:10px!important;
}
.project-profit-mini-card.is-clickable{
  cursor:pointer!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}
.project-profit-mini-card.is-clickable:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--shadow)!important;
  border-color:#b5dacc!important;
}
.project-profit-mini-card.is-good b{color:#047857!important;}
.project-profit-mini-card.is-bad b{color:var(--red)!important;}
.project-profit-mini-card.is-warning b{color:#b45309!important;}
.project-profit-mini-card.is-good:after,
.project-profit-mini-card.is-bad:after,
.project-profit-mini-card.is-warning:after{
  background:linear-gradient(135deg,#e9f6f0,#dff2ea)!important;
}
.profit-monitoring-back-btn{
  position:fixed!important;
  right:28px!important;
  bottom:28px!important;
  z-index:9999!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:999px!important;
  padding:13px 18px!important;
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 18px 40px rgba(37,99,235,.28)!important;
  font-size:14px!important;
  font-weight:950!important;
}
.profit-monitoring-back-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 22px 48px rgba(37,99,235,.34)!important;
}
@media (max-width:1200px){
  .project-profit-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .project-profit-monitor-card .section-head,
  .project-profit-head{flex-direction:column!important;align-items:flex-start!important;}
  .project-profit-monitor-card .section-head .muted,
  .project-profit-head .muted{text-align:left!important;margin-left:0!important;}
}
@media (max-width:720px){
  .project-profit-cards{grid-template-columns:1fr!important;}
  .profit-monitoring-back-btn{right:16px!important;left:16px!important;bottom:18px!important;width:auto!important;}
}


/* =========================================================
   V43 - Monitoring Profit: gaya senada KPI dashboard + judul center
   ========================================================= */
.project-profit-monitor-card{
  padding:22px!important;
}
.project-profit-monitor-card .section-head.project-profit-head,
.project-profit-head{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:10px!important;
  margin-bottom:18px!important;
}
.project-profit-head > div{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  width:100%!important;
}
.project-profit-monitor-card .section-head h3,
.project-profit-head h3{
  width:100%!important;
  text-align:center!important;
  font-size:20px!important;
  margin:0!important;
}
.project-profit-monitor-card .section-head .muted,
.project-profit-head .muted{
  width:100%!important;
  max-width:860px!important;
  text-align:center!important;
  margin:0 auto!important;
  line-height:1.5!important;
}
.project-profit-chip{
  margin:2px auto 6px!important;
}
.project-profit-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(220px,1fr))!important;
  gap:18px!important;
}
.project-profit-mini-card{
  min-height:168px!important;
  padding:20px!important;
  border-radius:var(--radius)!important;
}
.project-profit-mini-card::after{
  display:none!important;
}
.project-profit-mini-card.kpi{
  position:relative!important;
  overflow:hidden!important;
}
.project-profit-mini-card.kpi > *{
  position:relative!important;
  z-index:1!important;
}
.project-profit-mini-card .value{
  font-size:31px!important;
  line-height:1.08!important;
  font-weight:950!important;
  margin-top:18px!important;
  letter-spacing:-1px!important;
  white-space:nowrap!important;
}
.project-profit-mini-card .note{
  font-size:13px!important;
  color:var(--muted)!important;
  margin-top:14px!important;
  line-height:1.4!important;
  max-width:92%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.project-profit-mini-card .mini-action{
  display:block!important;
  margin-top:10px!important;
  color:#2563eb!important;
  font-size:13px!important;
  font-weight:950!important;
}
.project-profit-mini-card .kpi-top{
  display:flex!important;
  justify-content:space-between!important;
  gap:12px!important;
  align-items:flex-start!important;
}
.project-profit-mini-card .kpi-top span{
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.7px!important;
  max-width:80%!important;
}
.project-profit-mini-card .kpi-top em{
  font-style:normal!important;
  font-size:10px!important;
  color:var(--green)!important;
  background:#e9f6f0!important;
  border:1px solid #cde7dc!important;
  padding:5px 7px!important;
  border-radius:999px!important;
  font-weight:900!important;
}
.project-profit-mini-card.is-good .value{color:#047857!important;}
.project-profit-mini-card.is-bad .value{color:var(--red)!important;}
.project-profit-mini-card.is-warning .value{color:#b45309!important;}
@media (max-width:1200px){
  .project-profit-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:720px){
  .project-profit-cards{grid-template-columns:1fr!important;}
  .project-profit-monitor-card .section-head h3,
  .project-profit-head h3{font-size:18px!important;}
}


/* =========================================================
   V44 - Executive Monitoring Profit
   - Hapus kartu Proyek Aktif dan Biaya Approved.
   - Monitoring dibuat 2 executive cards yang lebih compact dan premium.
   ========================================================= */
.project-profit-monitor-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border:1px solid #dfe8f7!important;
  border-radius:28px!important;
  box-shadow:0 18px 44px rgba(15,23,42,.07)!important;
  padding:24px!important;
}
.project-profit-monitor-card .section-head.project-profit-head,
.project-profit-head{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:10px!important;
  margin-bottom:20px!important;
}
.project-profit-head > div{
  width:100%!important;
  text-align:center!important;
}
.project-profit-head h3{
  text-align:center!important;
  font-size:22px!important;
  letter-spacing:-.4px!important;
  margin:0!important;
}
.project-profit-head .muted{
  display:block!important;
  text-align:center!important;
  margin:6px auto 0!important;
  max-width:760px!important;
}
.project-profit-chip{
  margin:0 auto!important;
  background:#eef6ff!important;
  border:1px solid #cfe1ff!important;
  color:#2563eb!important;
  box-shadow:none!important;
}
.project-profit-cards{
  display:grid!important;
  grid-template-columns:1.35fr .9fr!important;
  gap:18px!important;
  align-items:stretch!important;
}
.project-profit-exec-card{
  position:relative!important;
  overflow:hidden!important;
  min-height:170px!important;
  border-radius:24px!important;
  padding:22px!important;
  cursor:pointer!important;
  border:1px solid #dbe7f6!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(246,250,255,.96))!important;
  box-shadow:0 14px 34px rgba(15,23,42,.06)!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}
.project-profit-exec-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 22px 48px rgba(15,23,42,.10)!important;
  border-color:#b9cef6!important;
}
.project-profit-exec-card:before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:5px!important;
  background:linear-gradient(90deg,#2563eb,#0ea5e9)!important;
}
.project-profit-exec-main:after{
  content:""!important;
  position:absolute!important;
  right:-90px!important;
  top:-110px!important;
  width:260px!important;
  height:260px!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(37,99,235,.13),rgba(14,165,233,.04) 62%,transparent 70%)!important;
  pointer-events:none!important;
}
.project-profit-exec-alert:after{
  content:""!important;
  position:absolute!important;
  right:-80px!important;
  bottom:-100px!important;
  width:230px!important;
  height:230px!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(245,158,11,.16),rgba(245,158,11,.04) 62%,transparent 70%)!important;
  pointer-events:none!important;
}
.exec-card-top{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
}
.exec-label{
  display:block!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.9px!important;
  text-transform:uppercase!important;
  margin-bottom:14px!important;
}
.exec-card-top b{
  display:block!important;
  font-size:38px!important;
  line-height:1.04!important;
  letter-spacing:-1.5px!important;
  color:var(--ink)!important;
  white-space:nowrap!important;
}
.project-profit-exec-main.is-good .exec-card-top b{color:#047857!important;}
.project-profit-exec-main.is-bad .exec-card-top b{color:var(--red)!important;}
.project-profit-exec-alert.is-warning .exec-card-top b{color:#b45309!important;}
.project-profit-exec-alert.is-good .exec-card-top b{color:#047857!important;}
.exec-card-top em{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:54px!important;
  height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-style:normal!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.8px!important;
  color:#2563eb!important;
  background:#eef6ff!important;
  border:1px solid #cfe1ff!important;
}
.exec-meta{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:22px!important;
  color:var(--muted)!important;
  font-size:13px!important;
}
.exec-meta span{
  font-weight:700!important;
}
.exec-meta strong{
  color:var(--ink)!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.exec-action{
  position:relative!important;
  z-index:1!important;
  margin-top:15px!important;
  color:#2563eb!important;
  font-weight:950!important;
  font-size:14px!important;
}
@media(max-width:1100px){
  .project-profit-cards{grid-template-columns:1fr!important;}
}
@media(max-width:720px){
  .exec-card-top b{font-size:30px!important;}
  .project-profit-exec-card{min-height:150px!important;}
}


/* V48 - paid RO edit remains clickable but is logically locked */
.po-paid-edit-locked{
  border-color:#dbeafe!important;
  color:#2563eb!important;
  background:#fff!important;
}
.po-paid-edit-locked:hover{
  box-shadow:0 10px 24px rgba(37,99,235,.12)!important;
}


/* =========================================================
   V62 - Responsive AR/AP modal + compact evidence upload polish
   ========================================================= */
#receivableEntryModal.modal-backdrop,
#payableEntryModal.modal-backdrop,
#receivablePaymentModal.modal-backdrop,
#payablePaymentModal.modal-backdrop{
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:auto!important;
  padding:clamp(10px,2vw,22px)!important;
  overscroll-behavior:contain!important;
}
#receivableEntryModal .finance-entry-modal,
#payableEntryModal .finance-entry-modal,
#receivablePaymentModal .finance-entry-modal,
#payablePaymentModal .finance-entry-modal{
  width:min(1040px,96vw)!important;
  max-width:96vw!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:auto!important;
  border-radius:22px!important;
  padding:clamp(14px,2vw,22px)!important;
  box-sizing:border-box!important;
}
#receivableEntryModal .modal-head,
#payableEntryModal .modal-head,
#receivablePaymentModal .modal-head,
#payablePaymentModal .modal-head{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  background:#fff!important;
  margin:-4px -4px 14px!important;
  padding:4px 4px 14px!important;
}
#receivableEntryModal .finance-entry-modal .form-grid,
#payableEntryModal .finance-entry-modal .form-grid{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  gap:12px!important;
  align-items:start!important;
}
#receivableEntryModal .finance-entry-modal label,
#payableEntryModal .finance-entry-modal label,
#receivablePaymentModal .finance-entry-modal label,
#payablePaymentModal .finance-entry-modal label{
  min-width:0!important;
}
#receivableEntryModal .finance-entry-modal input,
#payableEntryModal .finance-entry-modal input,
#receivablePaymentModal .finance-entry-modal input,
#payablePaymentModal .finance-entry-modal input,
#receivableEntryModal .finance-entry-modal textarea,
#payableEntryModal .finance-entry-modal textarea,
#receivablePaymentModal .finance-entry-modal textarea,
#payablePaymentModal .finance-entry-modal textarea{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
#receivableEntryModal .finance-entry-modal .wide,
#payableEntryModal .finance-entry-modal .wide{
  grid-column:span 2!important;
}
#receivableEntryModal .finance-entry-modal .full,
#payableEntryModal .finance-entry-modal .full{
  grid-column:1/-1!important;
}
#payableEntryModal .ap-advanced-fee-field,
#payableEntryModal .ap-fee-percent-field,
#payableEntryModal .ap-fee-monthly-type-field,
#payableEntryModal .ap-fee-monthly-nominal-field,
#payableEntryModal .ap-fee-monthly-percent-field,
#payableEntryModal .ap-fee-months-field{
  display:none!important;
}
#payableEntryModal .ap-financing-field input[readonly]{
  height:44px!important;
}
#payableEntryModal .pfc-payable-simple-note{
  grid-column:1/-1!important;
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid #dbeafe!important;
  border-radius:14px!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.45!important;
}
.pfc-ro-realization-card .po-item-table .pfc-file-upload{
  min-width:132px!important;
  max-width:160px!important;
  padding:7px 8px!important;
  gap:5px!important;
  border-radius:11px!important;
}
.pfc-ro-realization-card .po-item-table .pfc-file-upload-btn{
  padding:6px 9px!important;
  border-radius:8px!important;
  font-size:11px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.pfc-ro-realization-card .po-item-table .pfc-file-upload-name{
  font-size:10.5px!important;
  line-height:1.2!important;
  max-width:140px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}
.pfc-ro-realization-card .po-item-table .pfc-file-stack{
  min-width:132px!important;
  max-width:170px!important;
  align-items:flex-start!important;
}
.pfc-ro-realization-card .po-item-table .pfc-file-stack > .btn,
.pfc-ro-realization-card .po-item-table .pfc-file-stack button{
  padding:6px 9px!important;
  font-size:11px!important;
  border-radius:8px!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  #receivableEntryModal .finance-entry-modal,
  #payableEntryModal .finance-entry-modal,
  #receivablePaymentModal .finance-entry-modal,
  #payablePaymentModal .finance-entry-modal{
    width:98vw!important;
    max-width:98vw!important;
    max-height:calc(100dvh - 12px)!important;
    padding:12px!important;
    border-radius:16px!important;
  }
  #receivableEntryModal .finance-entry-modal .form-grid,
  #payableEntryModal .finance-entry-modal .form-grid,
  #receivablePaymentModal .finance-entry-modal .form-grid,
  #payablePaymentModal .finance-entry-modal .form-grid{
    grid-template-columns:1fr!important;
  }
  #receivableEntryModal .finance-entry-modal .wide,
  #payableEntryModal .finance-entry-modal .wide,
  #receivableEntryModal .finance-entry-modal .full,
  #payableEntryModal .finance-entry-modal .full{
    grid-column:1/-1!important;
  }
}

/* =========================================================
   V117.1 - Minor visual refinement from approved V117 baseline
   Visual-only: compact premium sidebar, stronger glass text,
   floating topbar, cleaner dashboard typography, less table-heavy.
   ========================================================= */
:root{
  --pfc-v1171-sidebar-w:260px;
}
body:not(.sidebar-hidden) .sidebar{
  width:var(--pfc-v1171-sidebar-w)!important;
  padding:18px 14px!important;
  background:
    linear-gradient(180deg,rgba(15,23,42,.78),rgba(11,21,48,.70) 48%,rgba(23,37,84,.76)),
    radial-gradient(circle at 12% 0%,rgba(59,130,246,.22),transparent 36%)!important;
  border-right:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
  box-shadow:16px 0 48px rgba(15,23,42,.18)!important;
}
body:not(.sidebar-hidden) .main{margin-left:var(--pfc-v1171-sidebar-w)!important;}
.sidebar .brand{padding:8px 8px 15px!important;margin-bottom:12px!important;gap:10px!important;}
.sidebar .brand-mark{width:44px!important;height:44px!important;border-radius:15px!important;box-shadow:0 12px 28px rgba(37,99,235,.25)!important;}
.sidebar .brand h2{font-size:15.5px!important;line-height:1.12!important;color:#fff!important;text-shadow:0 1px 12px rgba(0,0,0,.18)!important;}
.sidebar .brand span{font-size:10.8px!important;color:#d9e8ff!important;font-weight:750!important;opacity:.95!important;}
.sidebar .nav{gap:6px!important;}
.sidebar .nav button{
  padding:9px 10px!important;
  min-height:48px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
.sidebar .nav button span{font-size:12.8px!important;color:#ffffff!important;font-weight:920!important;letter-spacing:-.05px!important;}
.sidebar .nav button small{font-size:10.4px!important;color:#d8e8ff!important;opacity:.88!important;line-height:1.2!important;margin-top:2px!important;}
.sidebar .nav button.active,
.sidebar .nav button:hover{
  background:linear-gradient(135deg,rgba(59,130,246,.30),rgba(14,165,233,.14))!important;
  border-color:rgba(147,197,253,.40)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(15,23,42,.12)!important;
}
.sidebar .userbox{left:14px!important;right:14px!important;bottom:14px!important;padding:11px!important;border-radius:18px!important;background:rgba(255,255,255,.09)!important;}
.sidebar .userbox b{font-size:12.2px!important;color:#fff!important;}
.sidebar .userbox span,.sidebar .userbox small{font-size:10.6px!important;color:#dbeafe!important;opacity:.92!important;}
.sidebar .pfc-user-actions{display:flex!important;gap:6px!important;flex-wrap:wrap!important;}
.sidebar #switchRoleBtn{display:none!important;}
.sidebar .logout-btn{height:34px!important;min-height:34px!important;border-radius:12px!important;padding:0 10px!important;font-size:11px!important;}

/* Floating integrated topbar */
.topbar{
  margin:14px 18px 0!important;
  width:calc(100% - 36px)!important;
  border-radius:24px!important;
  padding:15px 18px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(248,251,255,.78))!important;
  border:1px solid rgba(207,224,255,.74)!important;
  box-shadow:0 18px 46px rgba(15,23,42,.075)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(145%)!important;
  top:10px!important;
}
.topbar-title-wrap{gap:12px!important;min-width:0!important;}
.topbar .eyebrow{font-size:9.6px!important;letter-spacing:.20em!important;margin-bottom:2px!important;color:#2563eb!important;}
#pfcVersionBadge{opacity:.42!important;font-size:9px!important;}
.topbar h1{font-size:clamp(20px,1.35vw,25px)!important;letter-spacing:-.65px!important;}
.topbar p:not(.eyebrow){font-size:11.8px!important;line-height:1.35!important;max-width:470px!important;}
.top-actions.pfc-v116-top-actions{grid-template-columns:minmax(220px,360px) 142px 98px 116px 66px!important;gap:8px!important;}
.pfc-v116-search-card{height:38px!important;border-radius:15px!important;box-shadow:0 10px 24px rgba(37,99,235,.045)!important;}
.pfc-v116-search-card input{font-size:12.2px!important;font-weight:760!important;}
.topbar select,.topbar .btn,.topbar button{height:38px!important;min-height:38px!important;border-radius:14px!important;font-size:11.5px!important;padding:0 10px!important;}
.pfc-v116-role-chip{width:66px!important;min-width:66px!important;max-width:66px!important;font-size:11px!important;padding:0!important;}
.pfc-v116-role-chip::before{width:6px!important;height:6px!important;margin-right:5px!important;}
.content{padding-top:22px!important;}

/* Dashboard typography cleanup without changing approved V117 color direction */
#dashboard .dashboard-hero{border-radius:30px!important;padding:28px 30px!important;}
#dashboard .dashboard-hero h2{font-size:clamp(30px,2.8vw,42px)!important;line-height:1.04!important;letter-spacing:-1.15px!important;}
#dashboard .dashboard-hero p{font-size:14.2px!important;line-height:1.62!important;max-width:720px!important;}
#dashboard .dashboard-kpis{gap:12px!important;}
#dashboard .card.kpi{min-height:124px!important;padding:16px!important;border-radius:23px!important;}
#dashboard .card.kpi .kpi-top span,
#dashboard .pfc-v109-kpi span{letter-spacing:.13em!important;}
#dashboard .card.kpi .value{font-size:clamp(21px,1.45vw,28px)!important;}
#dashboard .card.kpi .note{font-size:11.5px!important;line-height:1.42!important;}
#dashboard .pfc-v109-card{padding:19px!important;border-radius:26px!important;}
#dashboard .pfc-v109-head{margin-bottom:13px!important;}
#dashboard .pfc-v109-head h3{font-size:clamp(20px,1.65vw,26px)!important;letter-spacing:-.55px!important;}
#dashboard .pfc-v109-head p{font-size:12.8px!important;line-height:1.48!important;}
#dashboard .pfc-v109-kpi{padding:15px!important;border-radius:21px!important;}
#dashboard .pfc-v109-kpi b{font-size:clamp(20px,1.42vw,27px)!important;}
#dashboard .pfc-v117-strip{grid-template-columns:minmax(210px,1.15fr) repeat(4,minmax(112px,auto));padding:13px 15px!important;border-radius:18px!important;}
#dashboard .pfc-v117-strip strong{font-size:13.4px!important;}
#dashboard .pfc-v117-strip span{letter-spacing:.12em!important;font-size:9.6px!important;}
#dashboard .pfc-v117-strip b{font-size:13.2px!important;}
#dashboard details.pfc-v117-details{margin-top:10px!important;}
#dashboard details.pfc-v117-details>summary{font-size:11.5px!important;padding:8px 11px!important;border-radius:12px!important;}
#dashboard .v1171-collapsed-dashboard-table{margin-top:12px!important;}
#dashboard .v1171-collapsed-dashboard-table>summary{
  list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 11px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(37,99,235,.14);
  color:#1e3a8a;font-size:11.5px;font-weight:950;box-shadow:0 8px 20px rgba(15,23,42,.05);
}
#dashboard .v1171-collapsed-dashboard-table>summary::-webkit-details-marker{display:none;}
#dashboard .v1171-collapsed-dashboard-table>summary::after{content:'▾';font-size:10px;opacity:.72;}
#dashboard .v1171-collapsed-dashboard-table[open]>summary::after{transform:rotate(180deg);}
#dashboard .v1171-collapsed-dashboard-table .table-wrap{margin-top:11px!important;}
@media(max-width:1360px){
  .topbar{align-items:stretch!important;}
  .top-actions.pfc-v116-top-actions{grid-template-columns:minmax(220px,1fr) 142px 98px 116px 66px!important;}
}
@media(max-width:980px){
  body:not(.sidebar-hidden) .sidebar{width:252px!important;}
  body:not(.sidebar-hidden) .main{margin-left:252px!important;}
  .topbar{margin:10px 12px 0!important;width:calc(100% - 24px)!important;}
  .top-actions.pfc-v116-top-actions{grid-template-columns:1fr 1fr!important;}
  .pfc-v116-search-card{grid-column:1/-1!important;}
  .pfc-v116-role-chip{width:100%!important;max-width:none!important;}
}
@media(max-width:760px){
  body:not(.sidebar-hidden) .main{margin-left:0!important;}
  .topbar{border-radius:18px!important;}
}


/* =========================================================
   PFC V119 FORCE UI FIX - TOPBAR / DROPDOWN / SIDEBAR
   Purpose: override older stacked visual patches with one final layer.
   ========================================================= */
body #app .topbar{
  position:sticky!important;top:12px!important;z-index:60!important;
  margin:12px 18px 0!important;width:calc(100% - 36px)!important;
  padding:14px 16px!important;
  display:grid!important;grid-template-columns:minmax(360px,1fr) minmax(560px,auto)!important;
  align-items:center!important;gap:16px!important;overflow:visible!important;
  border:1px solid rgba(255,255,255,.72)!important;border-radius:28px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(239,246,255,.70))!important;
  box-shadow:0 22px 60px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.86)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;-webkit-backdrop-filter:blur(24px) saturate(160%)!important;
}
body #app .topbar-title-wrap{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;gap:14px!important;min-width:0!important;}
body #app .topbar h1{font-size:24px!important;line-height:1.05!important;margin:0!important;color:#0f172a!important;letter-spacing:-.45px!important;}
body #app .topbar p:not(.eyebrow){max-width:720px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#64748b!important;}
body #app .topbar .eyebrow{color:#2563eb!important;}
body #app .sidebar-toggle{width:44px!important;height:44px!important;min-width:44px!important;border-radius:16px!important;background:#fff!important;border:1px solid rgba(147,197,253,.42)!important;box-shadow:0 12px 24px rgba(37,99,235,.09)!important;}
body #app .sidebar-toggle span{background:#2563eb!important;}
.top-actions.pfc-v116-top-actions{display:grid!important;grid-template-columns:minmax(260px,360px) minmax(150px,190px) 92px 112px 72px!important;align-items:center!important;gap:10px!important;justify-content:end!important;min-width:0!important;}
.pfc-v116-search-card{height:42px!important;border-radius:999px!important;background:rgba(255,255,255,.84)!important;border:1px solid rgba(147,197,253,.38)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 22px rgba(37,99,235,.06)!important;display:flex!important;align-items:center!important;overflow:visible!important;min-width:0!important;}
.pfc-v116-search-card input{height:40px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#0f172a!important;min-width:0!important;}
.topbar .btn,.topbar button,.topbar select,.topbar .pfc-select-btn{height:42px!important;min-height:42px!important;border-radius:999px!important;font-size:12.5px!important;font-weight:900!important;white-space:nowrap!important;}
.topbar .btn,.topbar .ghost,.topbar button.ghost{background:rgba(255,255,255,.82)!important;color:#1d4ed8!important;border:1px solid rgba(147,197,253,.42)!important;box-shadow:0 10px 22px rgba(37,99,235,.06)!important;}
.pfc-v116-role-chip{max-width:72px!important;width:72px!important;overflow:hidden!important;text-overflow:ellipsis!important;padding-left:10px!important;padding-right:10px!important;}
.topbar .pfc-select{width:100%!important;max-width:190px!important;position:relative!important;}
.topbar .pfc-select > select{width:100%!important;}
.topbar .pfc-select-btn{width:100%!important;display:block!important;text-align:left!important;overflow:hidden!important;text-overflow:ellipsis!important;background:#fff!important;border:1px solid rgba(147,197,253,.42)!important;color:#0f172a!important;padding-right:34px!important;}
.topbar .pfc-select-btn::after{border-color:#2563eb!important;}
.topbar .pfc-select-menu{position:absolute!important;left:auto!important;right:0!important;top:calc(100% + 10px)!important;width:320px!important;max-width:min(320px,calc(100vw - 44px))!important;max-height:280px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:10px!important;border-radius:22px!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(147,197,253,.48)!important;box-shadow:0 28px 70px rgba(15,23,42,.20)!important;z-index:9999!important;}
.topbar .pfc-select-menu::-webkit-scrollbar{width:8px!important}.topbar .pfc-select-menu::-webkit-scrollbar-thumb{background:rgba(37,99,235,.26)!important;border-radius:999px!important;}
.topbar .pfc-select-item{width:100%!important;text-align:left!important;min-height:40px!important;padding:10px 14px!important;border-radius:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#0f172a!important;background:transparent!important;box-shadow:none!important;font-weight:850!important;}
.topbar .pfc-select-item.is-active,.topbar .pfc-select-item:hover{background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;color:#fff!important;}
.sidebar{width:284px!important;padding:18px 14px!important;background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(30,64,175,.90) 48%,rgba(14,165,233,.70))!important;border-right:1px solid rgba(255,255,255,.18)!important;border-radius:0 34px 34px 0!important;box-shadow:22px 0 60px rgba(15,23,42,.20)!important;backdrop-filter:blur(24px) saturate(160%)!important;-webkit-backdrop-filter:blur(24px) saturate(160%)!important;}
.sidebar::before{content:""!important;display:block!important;position:absolute!important;inset:10px 8px 10px 10px!important;border-radius:0 28px 28px 0!important;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.13)!important;pointer-events:none!important;}
.sidebar .brand,.sidebar .nav,.sidebar .userbox{position:relative!important;z-index:2!important;}
.sidebar .brand{border-bottom:0!important;margin:0 2px 14px 0!important;padding:11px!important;border-radius:24px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.16)!important;}
.sidebar .brand h2,.sidebar .nav button span{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.28)!important;}
.sidebar .brand span,.sidebar .nav button small,.sidebar .userbox span,.sidebar .userbox small{color:#dbeafe!important;opacity:.96!important;text-shadow:0 1px 10px rgba(0,0,0,.22)!important;}
.sidebar .nav{gap:8px!important;}
.sidebar .nav button{min-height:52px!important;padding:10px 12px 10px 15px!important;border-radius:18px 28px 28px 18px!important;background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;}
.sidebar .nav button.active,.sidebar .nav button:hover{background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.10)),linear-gradient(135deg,rgba(37,99,235,.36),rgba(14,165,233,.26))!important;border-color:rgba(255,255,255,.32)!important;transform:translateX(3px)!important;}
.sidebar .userbox{border-radius:24px 30px 30px 24px!important;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.22)!important;}
.sidebar .userbox b{color:#fff!important;}
body:not(.sidebar-hidden) .main{margin-left:284px!important;}
@media(max-width:1480px){body #app .topbar{grid-template-columns:1fr!important;align-items:stretch!important}.top-actions.pfc-v116-top-actions{grid-template-columns:minmax(260px,1fr) 170px 94px 112px 72px!important;justify-content:stretch!important}}
@media(max-width:1080px){body:not(.sidebar-hidden) .main{margin-left:0!important}.top-actions.pfc-v116-top-actions{grid-template-columns:1fr 1fr!important}.pfc-v116-search-card{grid-column:1/-1!important}.topbar .pfc-select{max-width:none!important}.topbar .pfc-select-menu{left:0!important;right:auto!important;width:100%!important}.pfc-v116-role-chip{width:100%!important;max-width:none!important}}
@media(max-width:760px){.top-actions.pfc-v116-top-actions{grid-template-columns:1fr!important}body #app .topbar p:not(.eyebrow){white-space:normal!important}}


/* =========================================================
   PFC V120 BLUE COLOR ONLY - KEEP V119 VISUAL STRUCTURE
   Purpose: restore all forced visual colors to clean blue palette while keeping layout, spacing, dropdown and sidebar shape.
   ========================================================= */
:root{
  --bg:#f4f8ff!important;
  --panel:#ffffff!important;
  --ink:#0f172a!important;
  --muted:#64748b!important;
  --line:#dbeafe!important;
  --green:#2563eb!important;
  --green2:#0ea5e9!important;
  --green3:#eff6ff!important;
  --brand:#2563eb!important;
  --brand2:#0ea5e9!important;
  --brand-dark:#1d4ed8!important;
  --brand-soft:#eff6ff!important;
  --blue:#2563eb!important;
}
html,body{background:linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%)!important;color:var(--ink)!important;}
body #app .topbar{
  position:sticky!important;top:12px!important;z-index:60!important;
  margin:12px 18px 0!important;width:calc(100% - 36px)!important;
  padding:14px 16px!important;
  display:grid!important;grid-template-columns:minmax(360px,1fr) minmax(560px,auto)!important;
  align-items:center!important;gap:16px!important;overflow:visible!important;
  border:1px solid rgba(191,219,254,.85)!important;border-radius:28px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,246,255,.78))!important;
  box-shadow:0 22px 60px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.90)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;-webkit-backdrop-filter:blur(24px) saturate(160%)!important;
}
body #app .topbar-title-wrap{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;gap:14px!important;min-width:0!important;}
body #app .topbar h1{font-size:24px!important;line-height:1.05!important;margin:0!important;color:#0f172a!important;letter-spacing:-.45px!important;}
body #app .topbar p:not(.eyebrow){max-width:720px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#64748b!important;}
body #app .topbar .eyebrow{color:#2563eb!important;}
body #app .sidebar-toggle{width:44px!important;height:44px!important;min-width:44px!important;border-radius:16px!important;background:#fff!important;border:1px solid rgba(147,197,253,.52)!important;box-shadow:0 12px 24px rgba(37,99,235,.10)!important;}
body #app .sidebar-toggle span{background:#2563eb!important;}
.top-actions.pfc-v116-top-actions{display:grid!important;grid-template-columns:minmax(260px,360px) minmax(150px,190px) 92px 112px 72px!important;align-items:center!important;gap:10px!important;justify-content:end!important;min-width:0!important;}
.pfc-v116-search-card{height:42px!important;border-radius:999px!important;background:rgba(255,255,255,.88)!important;border:1px solid rgba(147,197,253,.48)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 10px 22px rgba(37,99,235,.06)!important;display:flex!important;align-items:center!important;overflow:visible!important;min-width:0!important;}
.pfc-v116-search-card input{height:40px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#0f172a!important;min-width:0!important;}
.pfc-v116-search-icon{color:#2563eb!important;}
.topbar .btn,.topbar button,.topbar select,.topbar .pfc-select-btn{height:42px!important;min-height:42px!important;border-radius:999px!important;font-size:12.5px!important;font-weight:900!important;white-space:nowrap!important;}
.topbar .btn,.topbar .ghost,.topbar button.ghost{background:rgba(255,255,255,.86)!important;color:#1d4ed8!important;border:1px solid rgba(147,197,253,.52)!important;box-shadow:0 10px 22px rgba(37,99,235,.07)!important;}
.pfc-v116-role-chip{max-width:72px!important;width:72px!important;overflow:hidden!important;text-overflow:ellipsis!important;padding-left:10px!important;padding-right:10px!important;}
.topbar .pfc-select{width:100%!important;max-width:190px!important;position:relative!important;}
.topbar .pfc-select > select{width:100%!important;}
.topbar .pfc-select-btn{width:100%!important;display:block!important;text-align:left!important;overflow:hidden!important;text-overflow:ellipsis!important;background:#fff!important;border:1px solid rgba(147,197,253,.52)!important;color:#0f172a!important;padding-right:34px!important;}
.topbar .pfc-select-btn::after{border-color:#2563eb!important;}
.topbar .pfc-select-menu{position:absolute!important;left:auto!important;right:0!important;top:calc(100% + 10px)!important;width:320px!important;max-width:min(320px,calc(100vw - 44px))!important;max-height:280px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:10px!important;border-radius:22px!important;background:rgba(255,255,255,.97)!important;border:1px solid rgba(147,197,253,.56)!important;box-shadow:0 28px 70px rgba(30,64,175,.16)!important;z-index:9999!important;}
.topbar .pfc-select-menu::-webkit-scrollbar{width:8px!important}.topbar .pfc-select-menu::-webkit-scrollbar-thumb{background:rgba(37,99,235,.24)!important;border-radius:999px!important;}
.topbar .pfc-select-item{width:100%!important;text-align:left!important;min-height:40px!important;padding:10px 14px!important;border-radius:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#0f172a!important;background:transparent!important;box-shadow:none!important;font-weight:850!important;}
.topbar .pfc-select-item.is-active,.topbar .pfc-select-item:hover{background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;color:#fff!important;}
.sidebar{width:284px!important;padding:18px 14px!important;background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(30,64,175,.94) 45%,rgba(14,165,233,.82))!important;border-right:1px solid rgba(255,255,255,.18)!important;border-radius:0 34px 34px 0!important;box-shadow:22px 0 60px rgba(30,64,175,.18)!important;backdrop-filter:blur(24px) saturate(160%)!important;-webkit-backdrop-filter:blur(24px) saturate(160%)!important;}
.sidebar::before{content:""!important;display:block!important;position:absolute!important;inset:10px 8px 10px 10px!important;border-radius:0 28px 28px 0!important;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.045))!important;border:1px solid rgba(255,255,255,.13)!important;pointer-events:none!important;}
.sidebar .brand,.sidebar .nav,.sidebar .userbox{position:relative!important;z-index:2!important;}
.sidebar .brand{border-bottom:0!important;margin:0 2px 14px 0!important;padding:11px!important;border-radius:24px!important;background:rgba(255,255,255,.11)!important;border:1px solid rgba(255,255,255,.18)!important;}
.logo,.brand-mark{background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;color:#fff!important;box-shadow:0 12px 28px rgba(37,99,235,.22)!important;}
.sidebar .brand h2,.sidebar .nav button span{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.28)!important;}
.sidebar .brand span,.sidebar .nav button small,.sidebar .userbox span,.sidebar .userbox small{color:#dbeafe!important;opacity:.98!important;text-shadow:0 1px 10px rgba(0,0,0,.22)!important;}
.sidebar .nav{gap:8px!important;}
.sidebar .nav button{min-height:52px!important;padding:10px 12px 10px 15px!important;border-radius:18px 28px 28px 18px!important;background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;color:#fff!important;}
.sidebar .nav button.active,.sidebar .nav button:hover{background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.10)),linear-gradient(135deg,rgba(37,99,235,.36),rgba(14,165,233,.28))!important;border-color:rgba(219,234,254,.42)!important;transform:translateX(3px)!important;}
.sidebar .userbox{border-radius:24px 30px 30px 24px!important;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.22)!important;}
.sidebar .userbox b{color:#fff!important;}
.btn,button{background:#2563eb!important;color:#fff!important;box-shadow:0 8px 18px rgba(37,99,235,.18)!important;}
.btn.ghost,button.secondary,.ghost{background:#fff!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important;box-shadow:none!important;}
.dashboard-hero{background:linear-gradient(135deg,#1d4ed8,#0ea5e9)!important;box-shadow:0 22px 55px rgba(37,99,235,.18)!important;}
.kpi-top em,.badge,.status-chip{color:#1d4ed8!important;background:#eff6ff!important;border-color:#bfdbfe!important;}
.kpi::after{background:linear-gradient(135deg,#eff6ff,#dbeafe)!important;}
body:not(.sidebar-hidden) .main{margin-left:284px!important;}
@media(max-width:1480px){body #app .topbar{grid-template-columns:1fr!important;align-items:stretch!important}.top-actions.pfc-v116-top-actions{grid-template-columns:minmax(260px,1fr) 170px 94px 112px 72px!important;justify-content:stretch!important}}
@media(max-width:1080px){body:not(.sidebar-hidden) .main{margin-left:0!important}.top-actions.pfc-v116-top-actions{grid-template-columns:1fr 1fr!important}.pfc-v116-search-card{grid-column:1/-1!important}.topbar .pfc-select{max-width:none!important}.topbar .pfc-select-menu{left:0!important;right:auto!important;width:100%!important}.pfc-v116-role-chip{width:100%!important;max-width:none!important}}
@media(max-width:760px){.top-actions.pfc-v116-top-actions{grid-template-columns:1fr!important}body #app .topbar p:not(.eyebrow){white-space:normal!important}}


/* =========================================================
   PFC V121 BLACK-BLUE COLOR PURGE - KEEP VISUAL STRUCTURE
   Purpose: remove remaining purple/pink/coral and restore previous black-blue gradient direction only.
   ========================================================= */
:root{
  --bg:#f4f8ff!important;
  --panel:#ffffff!important;
  --ink:#0f172a!important;
  --muted:#64748b!important;
  --line:#dbeafe!important;
  --green:#2563eb!important;
  --green2:#0ea5e9!important;
  --green3:#eff6ff!important;
  --gold:#2563eb!important;
  --brand:#2563eb!important;
  --brand2:#0ea5e9!important;
  --brand-dark:#0f172a!important;
  --brand-soft:#eff6ff!important;
  --blue:#2563eb!important;
  --pfc-blue:#2563eb!important;
  --pfc-blue2:#0ea5e9!important;
}
html,body{
  background:
    radial-gradient(circle at 12% -8%, rgba(37,99,235,.10), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(14,165,233,.08), transparent 30%),
    linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%)!important;
  color:#0f172a!important;
}
.login{
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.26),transparent 34%),
    linear-gradient(135deg,#020617 0%,#0f172a 42%,#1d4ed8 74%,#0ea5e9 100%)!important;
}
.logo,.brand-mark,.avatar{
  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(37,99,235,.24)!important;
}
body #app .topbar{
  position:sticky!important;top:12px!important;z-index:60!important;
  margin:12px 18px 0!important;width:calc(100% - 36px)!important;
  padding:14px 16px!important;
  display:grid!important;grid-template-columns:minmax(360px,1fr) minmax(560px,auto)!important;
  align-items:center!important;gap:16px!important;overflow:visible!important;
  border:1px solid rgba(191,219,254,.86)!important;border-radius:28px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.80))!important;
  box-shadow:0 22px 60px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;-webkit-backdrop-filter:blur(24px) saturate(160%)!important;
}
body #app .topbar-title-wrap{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;gap:14px!important;min-width:0!important;}
body #app .topbar h1{font-size:24px!important;line-height:1.05!important;margin:0!important;color:#0f172a!important;letter-spacing:-.45px!important;}
body #app .topbar p:not(.eyebrow){max-width:720px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#64748b!important;}
body #app .topbar .eyebrow{color:#2563eb!important;}
body #app .sidebar-toggle{width:44px!important;height:44px!important;min-width:44px!important;border-radius:16px!important;background:#fff!important;border:1px solid rgba(147,197,253,.55)!important;box-shadow:0 12px 24px rgba(15,23,42,.08)!important;}
body #app .sidebar-toggle span{background:#2563eb!important;}
.top-actions.pfc-v116-top-actions{display:grid!important;grid-template-columns:minmax(260px,360px) minmax(150px,190px) 92px 112px 72px!important;align-items:center!important;gap:10px!important;justify-content:end!important;min-width:0!important;}
.pfc-v116-search-card{height:42px!important;border-radius:999px!important;background:rgba(255,255,255,.90)!important;border:1px solid rgba(147,197,253,.50)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.90),0 10px 22px rgba(15,23,42,.06)!important;display:flex!important;align-items:center!important;overflow:visible!important;min-width:0!important;}
.pfc-v116-search-card input{height:40px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#0f172a!important;min-width:0!important;}
.pfc-v116-search-icon{color:#2563eb!important;}
.topbar .btn,.topbar button,.topbar select,.topbar .pfc-select-btn{height:42px!important;min-height:42px!important;border-radius:999px!important;font-size:12.5px!important;font-weight:900!important;white-space:nowrap!important;}
.topbar .btn,.topbar .ghost,.topbar button.ghost{background:rgba(255,255,255,.88)!important;color:#1d4ed8!important;border:1px solid rgba(147,197,253,.55)!important;box-shadow:0 10px 22px rgba(15,23,42,.06)!important;}
.pfc-v116-role-chip{max-width:72px!important;width:72px!important;overflow:hidden!important;text-overflow:ellipsis!important;padding-left:10px!important;padding-right:10px!important;}
.topbar .pfc-select{width:100%!important;max-width:190px!important;position:relative!important;}
.topbar .pfc-select > select{width:100%!important;}
.topbar .pfc-select-btn{width:100%!important;display:block!important;text-align:left!important;overflow:hidden!important;text-overflow:ellipsis!important;background:#fff!important;border:1px solid rgba(147,197,253,.55)!important;color:#0f172a!important;padding-right:34px!important;}
.topbar .pfc-select-btn::after{border-color:#2563eb!important;}
.topbar .pfc-select-menu{position:absolute!important;left:auto!important;right:0!important;top:calc(100% + 10px)!important;width:320px!important;max-width:min(320px,calc(100vw - 44px))!important;max-height:280px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:10px!important;border-radius:22px!important;background:rgba(255,255,255,.98)!important;border:1px solid rgba(147,197,253,.58)!important;box-shadow:0 28px 70px rgba(15,23,42,.18)!important;z-index:9999!important;}
.topbar .pfc-select-menu::-webkit-scrollbar{width:8px!important}.topbar .pfc-select-menu::-webkit-scrollbar-thumb{background:rgba(37,99,235,.26)!important;border-radius:999px!important;}
.topbar .pfc-select-item{width:100%!important;text-align:left!important;min-height:40px!important;padding:10px 14px!important;border-radius:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#0f172a!important;background:transparent!important;box-shadow:none!important;font-weight:850!important;}
.topbar .pfc-select-item.is-active,.topbar .pfc-select-item:hover{background:linear-gradient(135deg,#1d4ed8,#0ea5e9)!important;color:#fff!important;}
.sidebar{
  width:284px!important;padding:18px 14px!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(37,99,235,.32),transparent 34%),
    linear-gradient(180deg,#020617 0%,#0f172a 42%,#1e3a8a 72%,#0ea5e9 100%)!important;
  border-right:1px solid rgba(255,255,255,.16)!important;border-radius:0 34px 34px 0!important;
  box-shadow:22px 0 60px rgba(15,23,42,.22)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;-webkit-backdrop-filter:blur(24px) saturate(160%)!important;
}
.sidebar::before{content:""!important;display:block!important;position:absolute!important;inset:10px 8px 10px 10px!important;border-radius:0 28px 28px 0!important;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.12)!important;pointer-events:none!important;}
.sidebar .brand,.sidebar .nav,.sidebar .userbox{position:relative!important;z-index:2!important;}
.sidebar .brand{border-bottom:0!important;margin:0 2px 14px 0!important;padding:11px!important;border-radius:24px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.16)!important;}
.sidebar .brand h2,.sidebar .nav button span{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.30)!important;}
.sidebar .brand span,.sidebar .nav button small,.sidebar .userbox span,.sidebar .userbox small{color:#dbeafe!important;opacity:.98!important;text-shadow:0 1px 10px rgba(0,0,0,.24)!important;}
.sidebar .nav{gap:8px!important;}
.sidebar .nav button{min-height:52px!important;padding:10px 12px 10px 15px!important;border-radius:18px 28px 28px 18px!important;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;color:#fff!important;}
.sidebar .nav button.active,.sidebar .nav button:hover{background:linear-gradient(135deg,rgba(37,99,235,.46),rgba(14,165,233,.28))!important;border-color:rgba(191,219,254,.46)!important;transform:translateX(3px)!important;}
.sidebar .userbox{border-radius:24px 30px 30px 24px!important;background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.22)!important;}
.sidebar .userbox b{color:#fff!important;}
.btn,button{background:#2563eb!important;color:#fff!important;box-shadow:0 8px 18px rgba(37,99,235,.18)!important;}
.btn.ghost,button.secondary,.ghost{background:#fff!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important;box-shadow:none!important;}
.btn.gold,.gold{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;}
.dashboard-hero,.hero,#dashboard .hero{
  background:
    radial-gradient(circle at 94% 10%,rgba(255,255,255,.20),transparent 24%),
    linear-gradient(135deg,#020617 0%,#0f172a 34%,#1d4ed8 72%,#0ea5e9 100%)!important;
  box-shadow:0 24px 58px rgba(15,23,42,.18)!important;
}
.dashboard-hero p,.hero p,#dashboard .hero p{color:rgba(255,255,255,.88)!important;}
.dashboard-hero .eyebrow,.hero .eyebrow{color:#dbeafe!important;}
.kpi-top em,.badge,.status-chip{color:#1d4ed8!important;background:#eff6ff!important;border-color:#bfdbfe!important;}
.kpi::after{background:linear-gradient(135deg,#eff6ff,#dbeafe)!important;}
.card,.pfc-v109-card,.pfc-v109-kpi{border-color:#e2e8f0!important;box-shadow:0 12px 34px rgba(15,23,42,.06)!important;}
.clickable-card:hover{border-color:#93c5fd!important;box-shadow:0 18px 40px rgba(37,99,235,.10)!important;}
body:not(.sidebar-hidden) .main{margin-left:284px!important;}
@media(max-width:1480px){body #app .topbar{grid-template-columns:1fr!important;align-items:stretch!important}.top-actions.pfc-v116-top-actions{grid-template-columns:minmax(260px,1fr) 170px 94px 112px 72px!important;justify-content:stretch!important}}
@media(max-width:1080px){body:not(.sidebar-hidden) .main{margin-left:0!important}.top-actions.pfc-v116-top-actions{grid-template-columns:1fr 1fr!important}.pfc-v116-search-card{grid-column:1/-1!important}.topbar .pfc-select{max-width:none!important}.topbar .pfc-select-menu{left:0!important;right:auto!important;width:100%!important}.pfc-v116-role-chip{width:100%!important;max-width:none!important}}
@media(max-width:760px){.top-actions.pfc-v116-top-actions{grid-template-columns:1fr!important}body #app .topbar p:not(.eyebrow){white-space:normal!important}}


/* ===== V123 LOGIC MODULES: BANK + BUDGET ===== */
.bank-hero-v123,.budget-hero-v123{
  background:linear-gradient(135deg,#020617 0%,#0f172a 42%,#1d4ed8 100%)!important;
  color:#fff!important;border:1px solid rgba(191,219,254,.28)!important;
}
.bank-hero-v123 h2,.budget-hero-v123 h2{color:#fff!important;}
.bank-hero-v123 p,.budget-hero-v123 p{color:rgba(255,255,255,.86)!important;}
#bank .form-grid,#budget .form-grid{align-items:end;}
.bank-balance-positive,.budget-safe{color:#047857!important;font-weight:900;}
.bank-balance-negative,.budget-over{color:#b42318!important;font-weight:900;}
.budget-warning{color:#b45309!important;font-weight:900;}
.budget-table-wrap table td,.budget-table-wrap table th{white-space:nowrap;}
.budget-progress-v123{min-width:92px;height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px;}
.budget-progress-v123 i{display:block;height:100%;background:linear-gradient(90deg,#1d4ed8,#0ea5e9);border-radius:999px;}
.budget-progress-v123.over i{background:linear-gradient(90deg,#f97316,#b42318);}


/* PFC V124: final visual tuning handled in app.js injected style. */

/* PFC V128: Piutang/Hutang logic lock added in app.js */

/* PFC V129: Import Center Safe Preview added in app.js */

/* PFC V130: Audit & Backup Restore Lock added in app.js */

/* PFC V134: clean finance core consolidated directly in app.js V109 calculation. */

/* PFC V135: clean funding source unified. */

/* PFC V136: loan/liability flow correct; loan is not revenue. */

/* PFC V137: clean accounting core source of truth. */

/* PFC V138: full accounting flow lock for all audit findings. */

/* PFC V139: Accounting audit UI label and on-screen results fix. */

/* PFC V140: Unified Buku Besar Entry, old income/expense menu hidden but preserved. */

/* PFC V141: 3-button premium ledger entry UI refinement. */

/* PFC V142: premium transaction forms, user friendly, informative */
.pfc-v142-form-hero{
  position:relative;
  margin-bottom:18px;
  padding:18px 18px 16px;
  border-radius:24px;
  border:1px solid rgba(191,219,254,.68);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98)),
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30%);
  box-shadow:0 16px 34px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.85);
}
.pfc-v142-form-hero.compact{margin-top:14px}
.pfc-v142-form-hero-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.pfc-v142-form-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 52px;
  font-size:24px;
  font-weight:900;
  color:#fff;
  box-shadow:0 10px 24px rgba(37,99,235,.18);
}
.pfc-v142-form-hero.income .pfc-v142-form-icon{background:linear-gradient(135deg,#2563eb,#60a5fa)}
.pfc-v142-form-hero.expense .pfc-v142-form-icon{background:linear-gradient(135deg,#0f172a,#334155)}
.pfc-v142-form-hero.transfer .pfc-v142-form-icon{background:linear-gradient(135deg,#1d4ed8,#1e40af)}
.pfc-v142-form-hero h3{
  margin:0 0 4px!important;
  font-size:26px!important;
  line-height:1.15!important;
  letter-spacing:-.03em!important;
  color:#0f172a!important;
}
.pfc-v142-form-hero .help{
  margin:0!important;
  max-width:880px;
  color:#64748b!important;
  font-size:14px!important;
  line-height:1.55!important;
}
.pfc-v142-tip-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.pfc-v142-tip-grid > div{
  padding:12px 13px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid rgba(191,219,254,.58);
}
.pfc-v142-tip-grid b,
.pfc-v142-tip-grid span{display:block}
.pfc-v142-tip-grid b{
  font-size:12px;
  font-weight:900;
  color:#1d4ed8;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.pfc-v142-tip-grid span{
  font-size:12px;
  line-height:1.5;
  color:#475569;
  font-weight:600;
}
.pfc-v142-inline-note{
  margin-top:12px;
  padding:13px 14px;
  border-radius:16px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e3a8a;
  font-size:12px;
  line-height:1.55;
}
.pfc-v142-field-subhelp{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}
.pfc-v142-transfer-card{
  border-radius:28px!important;
  border:1px solid rgba(191,219,254,.7)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 18px 40px rgba(15,23,42,.08)!important;
}
#input .card .form-grid,
#pengeluaran .card .form-grid,
#pfcV140TransferModal .form-grid{
  gap:14px!important;
}
#input .card .form-grid label,
#pengeluaran .card .form-grid label,
#pfcV140TransferModal .form-grid label{
  padding:10px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));
  border:1px solid rgba(226,232,240,.95);
}
#input .card .form-grid input,
#input .card .form-grid select,
#input .card .form-grid textarea,
#pengeluaran .card .form-grid input,
#pengeluaran .card .form-grid select,
#pengeluaran .card .form-grid textarea,
#pfcV140TransferModal .form-grid input,
#pfcV140TransferModal .form-grid select,
#pfcV140TransferModal .form-grid textarea{
  margin-top:7px!important;
  border-radius:14px!important;
  min-height:46px;
  border:1px solid rgba(191,219,254,.72)!important;
  background:#fff!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
}
#input .card .form-grid textarea,
#pengeluaran .card .form-grid textarea,
#pfcV140TransferModal .form-grid textarea{
  min-height:98px;
  resize:vertical;
}
#input .card .form-grid input:focus,
#input .card .form-grid select:focus,
#input .card .form-grid textarea:focus,
#pengeluaran .card .form-grid input:focus,
#pengeluaran .card .form-grid select:focus,
#pengeluaran .card .form-grid textarea:focus,
#pfcV140TransferModal .form-grid input:focus,
#pfcV140TransferModal .form-grid select:focus,
#pfcV140TransferModal .form-grid textarea:focus{
  outline:none!important;
  border-color:#60a5fa!important;
  box-shadow:0 0 0 4px rgba(96,165,250,.14)!important;
}
#input .card > .btn-row,
#pengeluaran .card > .btn-row{
  margin-top:16px;
}
#input .card .btn,
#pengeluaran .card .btn,
#pfcV140TransferModal .btn{
  border-radius:16px!important;
}
@media (max-width: 1040px){
  .pfc-v142-tip-grid{grid-template-columns:1fr}
}

/* PFC V143: simplify form flow and route piutang / hutang to dedicated modules */
.pfc-v143-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.pfc-v143-choice{
  text-align:left!important;
  padding:13px 14px!important;
  min-height:92px;
  border-radius:18px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid rgba(191,219,254,.62)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
  transform:none!important;
}
.pfc-v143-choice:hover{
  border-color:rgba(96,165,250,.92)!important;
  box-shadow:0 12px 24px rgba(37,99,235,.08)!important;
}
.pfc-v143-choice b,
.pfc-v143-choice span{display:block}
.pfc-v143-choice b{
  color:#0f172a;
  font-size:13px;
  font-weight:900;
  line-height:1.3;
  margin-bottom:6px;
}
.pfc-v143-choice span{
  color:#64748b;
  font-size:12px;
  line-height:1.55;
  font-weight:600;
}
.pfc-v143-route-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  padding:14px 15px;
  border-radius:18px;
  background:linear-gradient(180deg,#eff6ff,#f8fbff);
  border:1px solid #bfdbfe;
}
.pfc-v143-route-note b,
.pfc-v143-route-note span{display:block}
.pfc-v143-route-note b{
  color:#1d4ed8;
  font-size:13px;
  line-height:1.3;
  margin-bottom:4px;
}
.pfc-v143-route-note span{
  color:#475569;
  font-size:12px;
  line-height:1.55;
  font-weight:600;
  max-width:760px;
}
.pfc-v143-route-note .btn{
  white-space:nowrap;
  min-height:44px;
}
@media (max-width: 1040px){
  .pfc-v143-choice-grid{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .pfc-v143-route-note{flex-direction:column;align-items:flex-start}
  .pfc-v143-route-note .btn{width:100%}
}

/* PFC V144: AR/AP ledger sync hardening clean. */

/* PFC V145: Transaction route guard and connectivity check. */

/* PFC V146: Setting page real connectivity check. */

/* PFC V161: sidebar overlay login-safe only. */

/* PFC V163: general project/unit name normalizer. */

/* PFC V164: receivable import dedupe normalizer. */


/* =========================================================
   PFC V165 - Receivable Data Reconcile Tool
   Scope: Setting panel only.
   ========================================================= */
.pfc-v165-reconcile-panel{
  margin-top:18px;
  border:1px solid rgba(147,197,253,.62)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
.pfc-v165-reconcile-panel .pfc-v165-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.pfc-v165-reconcile-panel .pfc-v165-head h3{
  margin:0 0 6px;
  font-size:18px;
  letter-spacing:-.02em;
}
.pfc-v165-reconcile-panel .pfc-v165-head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.pfc-v165-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pfc-v165-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.pfc-v165-kpi{
  padding:12px 13px;
  border-radius:16px;
  border:1px solid #dbeafe;
  background:#fff;
}
.pfc-v165-kpi span{
  display:block;
  color:#64748b;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.pfc-v165-kpi b{
  display:block;
  color:#0f172a;
  font-size:20px;
  margin-top:5px;
}
.pfc-v165-result{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid #dbeafe;
  background:#f8fbff;
  max-height:360px;
  overflow:auto;
}
.pfc-v165-result table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.pfc-v165-result th,
.pfc-v165-result td{
  padding:9px 10px;
  border-bottom:1px solid #e5edf8;
  text-align:left;
  vertical-align:top;
}
.pfc-v165-result th{
  color:#334155;
  background:#eff6ff;
  position:sticky;
  top:0;
  z-index:1;
}
.pfc-v165-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}
.pfc-v165-pill.ok{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#15803d;
}
.pfc-v165-pill.warn{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#c2410c;
}
.pfc-v165-note{
  margin-top:10px;
  color:#64748b;
  font-size:12px;
  line-height:1.55;
}
@media(max-width:900px){
  .pfc-v165-reconcile-panel .pfc-v165-head{display:block}
  .pfc-v165-actions{justify-content:flex-start;margin-top:12px}
  .pfc-v165-summary{grid-template-columns:1fr 1fr}
}

/* PFC V166: receivable table/detail sync fix. */


/* =========================================================
   PFC V167 - SIDEBAR MENU GROUPING VISUAL ONLY
   Scope:
   - Group existing sidebar buttons into visual sections.
   - Does NOT remove menu items.
   - Does NOT change showPage(), page IDs, route names, roles, or accounting logic.
   ========================================================= */

body #app .sidebar .nav.pfc-v167-nav{
  gap:10px!important;
  padding-bottom:132px!important;
}

body #app .sidebar .pfc-v167-menu-group{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  padding:8px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}

body #app .sidebar .pfc-v167-menu-heading{
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 8px!important;
  color:#bfdbfe!important;
  opacity:.95!important;
  pointer-events:none!important;
}

body #app .sidebar .pfc-v167-menu-heading span{
  color:#bfdbfe!important;
  font-size:9.5px!important;
  line-height:1!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.18em!important;
  text-shadow:0 1px 8px rgba(0,0,0,.22)!important;
}

body #app .sidebar .pfc-v167-menu-group button{
  margin:0!important;
  min-height:48px!important;
  border-radius:16px 24px 24px 16px!important;
}

body #app .sidebar .pfc-v167-menu-group button span{
  font-size:13.2px!important;
  line-height:1.18!important;
}

body #app .sidebar .pfc-v167-menu-group button small{
  font-size:10.5px!important;
  line-height:1.18!important;
}

/* Keep active menu easy to see inside grouped sections */
body #app .sidebar .pfc-v167-menu-group button.active{
  background:linear-gradient(135deg,rgba(37,99,235,.55),rgba(14,165,233,.32))!important;
  border-color:rgba(191,219,254,.50)!important;
  box-shadow:0 10px 22px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.14)!important;
}

/* Compact on shorter screens without changing behavior */
@media(max-height:820px){
  body #app .sidebar .pfc-v167-menu-group{
    gap:6px!important;
    padding:7px!important;
  }
  body #app .sidebar .pfc-v167-menu-heading{
    height:19px!important;
  }
  body #app .sidebar .pfc-v167-menu-group button{
    min-height:44px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
}


/* =========================================================
   PFC V170 - SIDEBAR DROPDOWN CLEAN SAFE
   Built from V167, not from V168/V169, to avoid conflicting toggle listeners.
   Scope:
   - Sidebar dropdown only.
   - No accounting/data/role/page logic changes.
   ========================================================= */

body #app .sidebar .nav.pfc-v167-nav{
  gap:9px!important;
  padding-bottom:132px!important;
}

body #app .sidebar .pfc-v167-menu-group{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:7px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;
  border:1px solid rgba(191,219,254,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Dropdown header */
body #app .sidebar .pfc-v170-group-toggle{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:0 13px!important;
  margin:0!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.075))!important;
  border:1px solid rgba(191,219,254,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 8px 18px rgba(15,23,42,.10)!important;
  color:#e0f2fe!important;
  transform:none!important;
  cursor:pointer!important;
  text-align:left!important;
}

body #app .sidebar .pfc-v170-group-toggle:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.10))!important;
  border-color:rgba(191,219,254,.34)!important;
}

body #app .sidebar .pfc-v170-group-toggle span{
  color:#e0f2fe!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.18em!important;
  text-shadow:0 1px 8px rgba(0,0,0,.22)!important;
}

body #app .sidebar .pfc-v170-group-toggle i{
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  color:#fff!important;
  background:rgba(219,234,254,.18)!important;
  font-style:normal!important;
  font-size:13px!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}

/* Closed by default: only header visible */
body #app .sidebar .pfc-v167-menu-group:not(.is-open) > button[data-page]{
  display:none!important;
}

/* Open submenu */
body #app .sidebar .pfc-v167-menu-group.is-open{
  gap:7px!important;
}

body #app .sidebar .pfc-v167-menu-group.is-open > .pfc-v170-group-toggle{
  background:linear-gradient(135deg,rgba(37,99,235,.42),rgba(14,165,233,.20))!important;
  border-color:rgba(191,219,254,.40)!important;
}

body #app .sidebar .pfc-v167-menu-group.is-open > .pfc-v170-group-toggle i{
  transform:rotate(90deg)!important;
}

body #app .sidebar .pfc-v167-menu-group.is-open > button[data-page]{
  display:block!important;
  min-height:46px!important;
  margin:0!important;
  border-radius:15px 22px 22px 15px!important;
}

body #app .sidebar .pfc-v167-menu-group.is-open > button[data-page] span{
  font-size:13px!important;
}

body #app .sidebar .pfc-v167-menu-group.is-open > button[data-page] small{
  font-size:10.3px!important;
}

/* Active current page highlight when group is open */
body #app .sidebar .pfc-v167-menu-group.has-active{
  border-color:rgba(147,197,253,.42)!important;
}

@media(max-height:820px){
  body #app .sidebar .pfc-v170-group-toggle{
    height:38px!important;
    min-height:38px!important;
  }
  body #app .sidebar .pfc-v167-menu-group.is-open > button[data-page]{
    min-height:42px!important;
  }
}


/* =========================================================
   PFC V171 - SIDEBAR DROPDOWN DEFAULT CLOSED FIX
   Scope:
   - Force all sidebar dropdown groups closed on initial login/load.
   - Keep groups clickable.
   - No page/accounting/data/role/sync changes.
   ========================================================= */

/* Hard default: closed unless user explicitly opens it */
body #app .sidebar .pfc-v167-menu-group:not(.is-open) > button[data-page]{
  display:none!important;
}

body #app .sidebar .pfc-v167-menu-group.is-open > button[data-page]{
  display:block!important;
}

/* Active group may have accent, but must not auto-open */
body #app .sidebar .pfc-v167-menu-group.has-active:not(.is-open){
  border-color:rgba(147,197,253,.34)!important;
}


/* =========================================================
   PFC V172 - MASTER PROYEK VISUAL POLISH ONLY
   Scope:
   - Visual alignment with Monitoring Proyek.
   - No input ID, onclick, data structure, page route, or logic changes.
   ========================================================= */

body #app #master.pfc-v172-master-section{
  display:none;
}

body #app #master.pfc-v172-master-section.active{
  display:block;
}

.pfc-v172-master-hero{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:22px!important;
  padding:26px 28px!important;
  margin-bottom:18px!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at top left,rgba(96,165,250,.18),transparent 34%),
    linear-gradient(135deg,#f8fbff,#ffffff)!important;
  border:1px solid rgba(147,197,253,.58)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.86)!important;
}

.pfc-v172-master-hero h2{
  margin:5px 0 8px!important;
  font-size:34px!important;
  line-height:1.05!important;
  letter-spacing:-.04em!important;
  color:#0f172a!important;
}

.pfc-v172-master-hero p{
  margin:0!important;
  max-width:780px!important;
  color:#64748b!important;
  font-size:14px!important;
  line-height:1.6!important;
  font-weight:650!important;
}

.pfc-v172-master-hero-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}

.pfc-v172-master-kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin-bottom:18px!important;
}

.pfc-v172-master-kpi{
  padding:18px!important;
  min-height:116px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid rgba(147,197,253,.50)!important;
  box-shadow:0 16px 36px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.88)!important;
}

.pfc-v172-master-kpi span{
  display:block!important;
  color:#64748b!important;
  font-size:10.5px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.14em!important;
}

.pfc-v172-master-kpi b{
  display:block!important;
  margin-top:10px!important;
  color:#0f172a!important;
  font-size:24px!important;
  line-height:1.06!important;
  letter-spacing:-.03em!important;
}

.pfc-v172-master-kpi small{
  display:block!important;
  margin-top:8px!important;
  color:#64748b!important;
  font-size:11px!important;
  line-height:1.3!important;
  font-weight:700!important;
}

.pfc-v172-master-grid.grid.two{
  grid-template-columns:minmax(420px,.88fr) minmax(560px,1.12fr)!important;
  gap:18px!important;
  align-items:start!important;
}

.pfc-v172-master-form-card,
.pfc-v172-master-list-card{
  border-radius:28px!important;
  border:1px solid rgba(147,197,253,.48)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.88)!important;
}

.pfc-v172-section-head{
  padding-bottom:14px!important;
  border-bottom:1px solid #e5edf8!important;
  margin-bottom:16px!important;
}

.pfc-v172-section-head h3{
  margin-top:4px!important;
  font-size:21px!important;
  letter-spacing:-.025em!important;
}

.pfc-v172-master-form-grid.form-grid{
  gap:13px!important;
}

.pfc-v172-master-form-grid label{
  padding:12px 13px!important;
  border-radius:18px!important;
  background:#ffffff!important;
  border:1px solid rgba(226,232,240,.95)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86)!important;
}

.pfc-v172-master-form-grid label input,
.pfc-v172-master-form-grid label select,
.pfc-v172-master-form-grid label textarea{
  margin-top:8px!important;
  border-radius:14px!important;
}

.pfc-v172-form-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  margin-top:4px!important;
}

.pfc-v172-master-table.table-wrap{
  border-radius:24px!important;
  border:1px solid #dbeafe!important;
  background:#ffffff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}

.pfc-v172-master-table table thead th{
  background:#f8fbff!important;
  color:#334155!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
}

.pfc-v172-master-table table tbody tr{
  transition:background .15s ease!important;
}

.pfc-v172-master-table table tbody tr:hover{
  background:#f8fbff!important;
}

.pfc-v172-master-table .project-badge{
  font-size:12px!important;
  padding:7px 10px!important;
}

.pfc-v172-master-table .badge{
  min-width:72px!important;
  justify-content:center!important;
}

.pfc-v172-master-table .small{
  height:31px!important;
  min-height:31px!important;
  padding:0 11px!important;
  border-radius:12px!important;
  font-size:11px!important;
}

@media(max-width:1280px){
  .pfc-v172-master-grid.grid.two{
    grid-template-columns:1fr!important;
  }
  .pfc-v172-master-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .pfc-v172-master-hero{
    display:block!important;
    padding:22px!important;
  }
  .pfc-v172-master-hero-actions{
    justify-content:flex-start!important;
    margin-top:14px!important;
  }
  .pfc-v172-master-hero h2{
    font-size:28px!important;
  }
  .pfc-v172-master-kpis{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   PFC V173 - MASTER PROJECT POPUP FORM
   Scope:
   - Only turns the existing Tambah Master Proyek form into a modal popup.
   - Keeps all original input IDs and addMasterProject() logic.
   - No data/accounting/sync changes.
   ========================================================= */

body #app #master.pfc-v172-master-section .pfc-v172-master-grid.grid.two{
  grid-template-columns:1fr!important;
}

body #app #master.pfc-v172-master-section .pfc-v172-master-form-card{
  display:none!important;
}

/* Modal overlay created by JS, only for the existing form card */
.pfc-v173-master-modal{
  position:fixed!important;
  inset:0!important;
  z-index:5000!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:22px!important;
  background:rgba(15,23,42,.34)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}

.pfc-v173-master-modal.is-open{
  display:flex!important;
}

.pfc-v173-master-modal .pfc-v172-master-form-card{
  display:block!important;
  width:min(980px,calc(100vw - 44px))!important;
  max-height:calc(100vh - 44px)!important;
  overflow:auto!important;
  margin:0!important;
  border-radius:30px!important;
  animation:pfcV173ModalIn .18s ease-out!important;
}

@keyframes pfcV173ModalIn{
  from{opacity:0; transform:translateY(14px) scale(.985);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.pfc-v173-modal-close{
  height:38px!important;
  min-height:38px!important;
  padding:0 14px!important;
  border-radius:14px!important;
  font-size:12px!important;
}

.pfc-v173-master-modal .pfc-v172-section-head{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  padding-top:2px!important;
}

body #app #master.pfc-v172-master-section .pfc-v172-master-list-card{
  min-width:0!important;
}

@media(max-width:760px){
  .pfc-v173-master-modal{
    padding:12px!important;
    align-items:flex-start!important;
  }
  .pfc-v173-master-modal .pfc-v172-master-form-card{
    width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px)!important;
  }
}


/* =========================================================
   PFC V174 - MASTER PROJECT MODAL DISPLAY FIX
   Fix:
   - V173 modal opened, but existing Master form hide rule still won.
   - This rule forces the form card visible only when inside/open modal.
   ========================================================= */

body #app #master.pfc-v172-master-section .pfc-v173-master-modal.is-open{
  display:flex!important;
}

body #app #master.pfc-v172-master-section .pfc-v173-master-modal.is-open .pfc-v172-master-form-card,
body #app #master.pfc-v172-master-section .pfc-v173-master-modal .pfc-v172-master-form-card{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

body #app #master.pfc-v172-master-section > .pfc-v172-master-form-card{
  display:none!important;
}

/* Make sure modal is above all app layers */
body .pfc-v173-master-modal{
  z-index:99999!important;
}

body.pfc-v173-modal-open{
  overflow:hidden!important;
}


/* =========================================================
   PFC V175 - MASTER PROJECT MODAL RESPONSIVE FIX
   Fix form popup cut off + make it flexible on resize.
   ========================================================= */

body .pfc-v173-master-modal,
body #app #master.pfc-v172-master-section .pfc-v173-master-modal{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  z-index:99999!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(10px,2vw,24px)!important;
  background:rgba(15,23,42,.34)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

body .pfc-v173-master-modal.is-open,
body #app #master.pfc-v172-master-section .pfc-v173-master-modal.is-open{
  display:flex!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-card,
body #app #master.pfc-v172-master-section .pfc-v173-master-modal.is-open .pfc-v172-master-form-card,
body #app #master.pfc-v172-master-section .pfc-v173-master-modal .pfc-v172-master-form-card{
  display:flex!important;
  flex-direction:column!important;
  visibility:visible!important;
  opacity:1!important;
  width:min(1180px,calc(100vw - clamp(20px,4vw,48px)))!important;
  max-width:1180px!important;
  max-height:calc(100dvh - clamp(20px,4vw,48px))!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-card > .section-head{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:24px 26px 16px!important;
  margin:0!important;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 72%,rgba(248,251,255,.96) 100%)!important;
  border-bottom:1px solid #e5edf8!important;
  flex:0 0 auto!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-grid{
  overflow:auto!important;
  padding:20px 26px 18px!important;
  max-height:calc(100dvh - 190px)!important;
  box-sizing:border-box!important;
  scrollbar-width:thin!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-card > .help{
  flex:0 0 auto!important;
  margin:0!important;
  padding:10px 26px 18px!important;
  background:#f8fbff!important;
  border-top:1px solid #e5edf8!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-grid.form-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-grid label.wide{
  grid-column:span 2!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-grid label.full,
body .pfc-v173-master-modal .pfc-v172-master-form-grid .full{
  grid-column:1 / -1!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-grid label{
  min-width:0!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-grid input,
body .pfc-v173-master-modal .pfc-v172-master-form-grid select,
body .pfc-v173-master-modal .pfc-v172-master-form-grid textarea{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

body .pfc-v173-master-modal .pfc-v172-master-form-grid textarea{
  min-height:92px!important;
  max-height:180px!important;
  resize:vertical!important;
}

body .pfc-v173-modal-close{
  flex:0 0 auto!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 18px!important;
  border-radius:16px!important;
}

body .pfc-v173-master-modal .pfc-v172-form-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:4!important;
  padding:14px 0 4px!important;
  background:linear-gradient(180deg,rgba(248,251,255,.76),#f8fbff)!important;
  border-top:1px solid #e5edf8!important;
}

@media(max-width:1200px){
  body .pfc-v173-master-modal .pfc-v172-master-form-grid.form-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:920px){
  body .pfc-v173-master-modal,
  body #app #master.pfc-v172-master-section .pfc-v173-master-modal{
    align-items:flex-start!important;
    padding:10px!important;
  }

  body .pfc-v173-master-modal .pfc-v172-master-form-card,
  body #app #master.pfc-v172-master-section .pfc-v173-master-modal .pfc-v172-master-form-card{
    width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:24px!important;
  }

  body .pfc-v173-master-modal .pfc-v172-master-form-card > .section-head{
    padding:18px 18px 14px!important;
  }

  body .pfc-v173-master-modal .pfc-v172-master-form-grid{
    padding:16px 18px!important;
    max-height:calc(100dvh - 165px)!important;
  }

  body .pfc-v173-master-modal .pfc-v172-master-form-grid.form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body .pfc-v173-master-modal .pfc-v172-master-form-card > .help{
    padding:10px 18px 16px!important;
  }
}

@media(max-width:620px){
  body .pfc-v173-master-modal .pfc-v172-master-form-card > .section-head{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:start!important;
    gap:12px!important;
  }

  body .pfc-v173-master-modal .pfc-v172-master-form-grid.form-grid{
    grid-template-columns:1fr!important;
  }

  body .pfc-v173-master-modal .pfc-v172-master-form-grid label.wide,
  body .pfc-v173-master-modal .pfc-v172-master-form-grid label.full,
  body .pfc-v173-master-modal .pfc-v172-master-form-grid .full{
    grid-column:1 / -1!important;
  }

  body .pfc-v173-master-modal .pfc-v172-form-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  body .pfc-v173-master-modal .pfc-v172-form-actions .btn{
    width:100%!important;
  }
}

/* PFC V176 - UPAH PROYEK SUBMENU FOUNDATION */
body #app #upah.pfc-v176-upah-section{display:none}
body #app #upah.pfc-v176-upah-section.active{display:block}
.pfc-v176-upah-hero{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important;padding:28px!important;margin-bottom:18px!important;border-radius:30px!important;background:radial-gradient(circle at top left,rgba(96,165,250,.20),transparent 34%),linear-gradient(135deg,#f8fbff,#ffffff)!important;border:1px solid rgba(147,197,253,.58)!important;box-shadow:0 18px 44px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.86)!important}
.pfc-v176-upah-hero h2{margin:6px 0 8px!important;font-size:34px!important;line-height:1.05!important;letter-spacing:-.04em!important;color:#0f172a!important}
.pfc-v176-upah-hero p{margin:0!important;max-width:790px!important;color:#64748b!important;font-size:14px!important;line-height:1.6!important;font-weight:650!important}
.pfc-v176-upah-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex-wrap:wrap!important}
.pfc-v176-upah-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin-bottom:18px!important}
.pfc-v176-upah-kpi{padding:18px!important;min-height:116px!important;border-radius:24px!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important;border:1px solid rgba(147,197,253,.50)!important;box-shadow:0 16px 36px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88)!important}
.pfc-v176-upah-kpi span{display:block!important;color:#64748b!important;font-size:10.5px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.14em!important}
.pfc-v176-upah-kpi b{display:block!important;margin-top:10px!important;color:#0f172a!important;font-size:24px!important;line-height:1.06!important;letter-spacing:-.03em!important}
.pfc-v176-upah-kpi small{display:block!important;margin-top:8px!important;color:#64748b!important;font-size:11px!important;line-height:1.3!important;font-weight:700!important}
.pfc-v176-upah-grid.grid.two{grid-template-columns:1fr 1fr!important;gap:18px!important;align-items:start!important}
.pfc-v176-upah-card{border-radius:28px!important;border:1px solid rgba(147,197,253,.48)!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important;box-shadow:0 18px 44px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88)!important}
.pfc-v176-flow,.pfc-v176-feature-list{display:grid!important;gap:10px!important}
.pfc-v176-flow div,.pfc-v176-feature-list div{padding:14px!important;border-radius:18px!important;border:1px solid #dbeafe!important;background:#fff!important}
.pfc-v176-flow div{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:3px 12px!important;align-items:start!important}
.pfc-v176-flow b{grid-row:span 2!important;width:34px!important;height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:13px!important;background:#eff6ff!important;color:#2563eb!important;font-size:14px!important}
.pfc-v176-flow span,.pfc-v176-feature-list span{display:block!important;color:#0f172a!important;font-size:14px!important;line-height:1.25!important;font-weight:950!important}
.pfc-v176-flow small,.pfc-v176-feature-list small{display:block!important;color:#64748b!important;font-size:12px!important;line-height:1.45!important;margin-top:4px!important}
.pfc-v176-upah-note{display:flex!important;align-items:flex-start!important;gap:10px!important;border-radius:24px!important;border:1px solid #fed7aa!important;background:#fff7ed!important;color:#9a3412!important}
.pfc-v176-upah-note b{color:#9a3412!important;white-space:nowrap!important}.pfc-v176-upah-note span{color:#9a3412!important;line-height:1.55!important}
@media(max-width:1280px){.pfc-v176-upah-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:920px){.pfc-v176-upah-hero{display:block!important}.pfc-v176-upah-actions{justify-content:flex-start!important;margin-top:14px!important}.pfc-v176-upah-grid.grid.two{grid-template-columns:1fr!important}}
@media(max-width:620px){.pfc-v176-upah-kpis{grid-template-columns:1fr!important}.pfc-v176-upah-hero h2{font-size:28px!important}.pfc-v176-upah-note{display:block!important}}


/* =========================================================
   PFC V177 - PAYROLL FORM PREMIUM VISUAL ONLY
   Scope: visual-only payroll/upah form polish. No save/posting logic.
   ========================================================= */
body #app #upah.pfc-v177-payroll-section{display:none}
body #app #upah.pfc-v177-payroll-section.active{display:block}

.pfc-v177-payroll-hero{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important;padding:28px!important;margin-bottom:18px!important;border-radius:30px!important;background:radial-gradient(circle at top left,rgba(96,165,250,.20),transparent 34%),linear-gradient(135deg,#f8fbff,#ffffff)!important;border:1px solid rgba(147,197,253,.58)!important;box-shadow:0 18px 44px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.86)!important}
.pfc-v177-payroll-hero h2{margin:6px 0 8px!important;font-size:34px!important;line-height:1.05!important;letter-spacing:-.04em!important;color:#0f172a!important}
.pfc-v177-payroll-hero p{margin:0!important;max-width:790px!important;color:#64748b!important;font-size:14px!important;line-height:1.6!important;font-weight:650!important}
.pfc-v177-payroll-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex-wrap:wrap!important}

.pfc-v177-payroll-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin-bottom:18px!important}
.pfc-v177-payroll-kpi{padding:18px!important;min-height:116px!important;border-radius:24px!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important;border:1px solid rgba(147,197,253,.50)!important;box-shadow:0 16px 36px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88)!important}
.pfc-v177-payroll-kpi span{display:block!important;color:#64748b!important;font-size:10.5px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.14em!important}
.pfc-v177-payroll-kpi b{display:block!important;margin-top:10px!important;color:#0f172a!important;font-size:24px!important;line-height:1.06!important;letter-spacing:-.03em!important}
.pfc-v177-payroll-kpi small{display:block!important;margin-top:8px!important;color:#64748b!important;font-size:11px!important;line-height:1.3!important;font-weight:700!important}

.pfc-v177-payroll-form-card{border-radius:30px!important;margin-bottom:18px!important;border:1px solid rgba(147,197,253,.50)!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important;box-shadow:0 18px 44px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88)!important}
.pfc-v177-payroll-head{align-items:flex-start!important;padding-bottom:16px!important;border-bottom:1px solid #e5edf8!important;margin-bottom:18px!important}
.pfc-v177-payroll-status{min-width:132px!important;padding:12px 14px!important;border-radius:18px!important;border:1px solid #bfdbfe!important;background:#eff6ff!important;text-align:right!important}
.pfc-v177-payroll-status span{display:block!important;color:#64748b!important;font-size:10px!important;font-weight:950!important;letter-spacing:.12em!important;text-transform:uppercase!important}
.pfc-v177-payroll-status b{display:block!important;margin-top:4px!important;color:#1d4ed8!important;font-size:13px!important}

.pfc-v177-payroll-form-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.pfc-v177-payroll-form-grid label{display:block!important;min-width:0!important;padding:13px 14px!important;border-radius:18px!important;background:#ffffff!important;border:1px solid rgba(226,232,240,.95)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.86)!important;color:#334155!important;font-size:12px!important;font-weight:850!important}
.pfc-v177-payroll-form-grid label.wide{grid-column:span 2!important}
.pfc-v177-payroll-form-grid label.full{grid-column:1 / -1!important}
.pfc-v177-payroll-form-grid input,.pfc-v177-payroll-form-grid select,.pfc-v177-payroll-form-grid textarea{width:100%!important;min-width:0!important;margin-top:8px!important;border-radius:14px!important;box-sizing:border-box!important}
.pfc-v177-payroll-form-grid textarea{min-height:94px!important;resize:vertical!important}

.pfc-v177-payroll-form-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin-top:18px!important;padding:16px!important;border-radius:22px!important;border:1px solid #dbeafe!important;background:#f8fbff!important}
.pfc-v177-payroll-form-footer b{display:block!important;color:#0f172a!important;margin-bottom:4px!important}
.pfc-v177-payroll-form-footer span{display:block!important;color:#64748b!important;font-size:12px!important;line-height:1.45!important}
.pfc-v177-payroll-form-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;justify-content:flex-end!important}

.pfc-v177-payroll-grid.grid.two{grid-template-columns:1fr 1fr!important;gap:18px!important;align-items:start!important}
.pfc-v177-payroll-card{border-radius:28px!important;border:1px solid rgba(147,197,253,.48)!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important;box-shadow:0 18px 44px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88)!important}
.pfc-v177-flow,.pfc-v177-feature-list{display:grid!important;gap:10px!important}
.pfc-v177-flow div,.pfc-v177-feature-list div{padding:14px!important;border-radius:18px!important;border:1px solid #dbeafe!important;background:#fff!important}
.pfc-v177-flow div{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:3px 12px!important;align-items:start!important}
.pfc-v177-flow b{grid-row:span 2!important;width:34px!important;height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:13px!important;background:#eff6ff!important;color:#2563eb!important;font-size:14px!important}
.pfc-v177-flow span,.pfc-v177-feature-list span{display:block!important;color:#0f172a!important;font-size:14px!important;line-height:1.25!important;font-weight:950!important}
.pfc-v177-flow small,.pfc-v177-feature-list small{display:block!important;color:#64748b!important;font-size:12px!important;line-height:1.45!important;margin-top:4px!important}
.pfc-v177-payroll-note{display:flex!important;align-items:flex-start!important;gap:10px!important;border-radius:24px!important;border:1px solid #fed7aa!important;background:#fff7ed!important;color:#9a3412!important}
.pfc-v177-payroll-note b{color:#9a3412!important;white-space:nowrap!important}.pfc-v177-payroll-note span{color:#9a3412!important;line-height:1.55!important}

@media(max-width:1280px){.pfc-v177-payroll-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pfc-v177-payroll-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pfc-v177-payroll-form-grid label.wide{grid-column:span 2!important}}
@media(max-width:920px){.pfc-v177-payroll-hero{display:block!important}.pfc-v177-payroll-actions{justify-content:flex-start!important;margin-top:14px!important}.pfc-v177-payroll-grid.grid.two{grid-template-columns:1fr!important}.pfc-v177-payroll-form-footer{display:block!important}.pfc-v177-payroll-form-actions{justify-content:flex-start!important;margin-top:12px!important}}
@media(max-width:620px){.pfc-v177-payroll-kpis{grid-template-columns:1fr!important}.pfc-v177-payroll-hero h2{font-size:28px!important}.pfc-v177-payroll-form-grid{grid-template-columns:1fr!important}.pfc-v177-payroll-form-grid label.wide,.pfc-v177-payroll-form-grid label.full{grid-column:1 / -1!important}.pfc-v177-payroll-note{display:block!important}.pfc-v177-payroll-status{text-align:left!important;margin-top:10px!important}}


/* =========================================================
   PFC V178 - PAYROLL DRAFT STORAGE + REKAP
   Scope:
   - Save payroll form as draft operational record.
   - Render payroll draft table + KPI summary.
   - Does NOT post to Buku Besar yet.
   ========================================================= */
.pfc-v178-payroll-table-card{
  border-radius:30px!important;
  margin-bottom:18px!important;
  border:1px solid rgba(147,197,253,.50)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.pfc-v178-payroll-toolbar.toolbar{
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) 180px 190px!important;
  gap:10px!important;
  margin:12px 0 14px!important;
}
.pfc-v178-payroll-toolbar input,
.pfc-v178-payroll-toolbar select{
  height:42px!important;
  border-radius:15px!important;
}
.pfc-v178-payroll-table.table-wrap{
  border-radius:24px!important;
  border:1px solid #dbeafe!important;
  background:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.pfc-v178-payroll-table table thead th{
  background:#f8fbff!important;
  color:#334155!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
}
.pfc-v178-payroll-table table tbody tr:hover{
  background:#f8fbff!important;
}
.pfc-v178-status-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:82px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:900!important;
  border:1px solid #bfdbfe!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
}
.pfc-v178-status-pill.pending{
  border-color:#fed7aa!important;
  background:#fff7ed!important;
  color:#c2410c!important;
}
.pfc-v178-status-pill.ok{
  border-color:#bbf7d0!important;
  background:#f0fdf4!important;
  color:#15803d!important;
}
.pfc-v178-status-pill.paid{
  border-color:#c4b5fd!important;
  background:#f5f3ff!important;
  color:#6d28d9!important;
}
.pfc-v178-payroll-table .small{
  height:31px!important;
  min-height:31px!important;
  padding:0 10px!important;
  border-radius:12px!important;
  font-size:11px!important;
}
@media(max-width:920px){
  .pfc-v178-payroll-toolbar.toolbar{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   PFC V179 - PAYROLL APPROVAL & PAYMENT
   Scope:
   - Approval flow and payment posting to Buku Besar.
   - Payment modal only for approved payroll drafts.
   ========================================================= */
.pfc-v179-payment-modal{
  position:fixed!important;
  inset:0!important;
  z-index:99999!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:rgba(15,23,42,.36)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}
.pfc-v179-payment-modal.is-open{display:flex!important}
.pfc-v179-payment-card{
  width:min(720px,calc(100vw - 36px))!important;
  max-height:calc(100dvh - 36px)!important;
  overflow:auto!important;
  border-radius:28px!important;
  border:1px solid rgba(147,197,253,.58)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 30px 90px rgba(15,23,42,.24)!important;
  padding:22px!important;
}
.pfc-v179-payment-summary{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:14px 0!important;
}
.pfc-v179-payment-summary div{
  padding:12px!important;
  border-radius:16px!important;
  border:1px solid #dbeafe!important;
  background:#fff!important;
}
.pfc-v179-payment-summary span{
  display:block!important;
  color:#64748b!important;
  font-size:10px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}
.pfc-v179-payment-summary b{
  display:block!important;
  color:#0f172a!important;
  font-size:16px!important;
  margin-top:5px!important;
}
.pfc-v179-payment-form{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.pfc-v179-payment-form label{
  display:block!important;
  padding:12px!important;
  border-radius:17px!important;
  border:1px solid #e2e8f0!important;
  background:#fff!important;
  color:#334155!important;
  font-size:12px!important;
  font-weight:850!important;
}
.pfc-v179-payment-form label.full{grid-column:1 / -1!important}
.pfc-v179-payment-form input,
.pfc-v179-payment-form select,
.pfc-v179-payment-form textarea{
  width:100%!important;
  min-width:0!important;
  margin-top:8px!important;
  border-radius:14px!important;
  box-sizing:border-box!important;
}
.pfc-v179-payment-form textarea{min-height:86px!important;resize:vertical!important}
.pfc-v179-payment-actions{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:16px!important;
  padding-top:14px!important;
  border-top:1px solid #e5edf8!important;
}
.pfc-v179-lock-note{
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.pfc-v179-paid-ref{
  display:block!important;
  margin-top:4px!important;
  color:#64748b!important;
  font-size:10.5px!important;
  line-height:1.25!important;
}
@media(max-width:720px){
  .pfc-v179-payment-summary{grid-template-columns:1fr!important}
  .pfc-v179-payment-form{grid-template-columns:1fr!important}
  .pfc-v179-payment-actions{display:block!important}
  .pfc-v179-payment-actions .btn{width:100%!important;margin-top:10px!important}
}


/* =========================================================
   PFC V180 - PAYROLL SLIP UPAH / KWITANSI
   Scope:
   - Print/export slip upah and kwitansi from payroll records.
   - No accounting posting changes.
   ========================================================= */
.pfc-v180-doc-modal{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:rgba(15,23,42,.38)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}
.pfc-v180-doc-modal.is-open{display:flex!important}
.pfc-v180-doc-shell{
  width:min(980px,calc(100vw - 36px))!important;
  max-height:calc(100dvh - 36px)!important;
  overflow:auto!important;
  border-radius:28px!important;
  background:#f8fbff!important;
  border:1px solid rgba(147,197,253,.58)!important;
  box-shadow:0 30px 90px rgba(15,23,42,.24)!important;
}
.pfc-v180-doc-toolbar{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:14px 16px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border-bottom:1px solid #dbeafe!important;
}
.pfc-v180-doc-toolbar h3{
  margin:0!important;
  color:#0f172a!important;
  font-size:18px!important;
}
.pfc-v180-doc-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.pfc-v180-doc-paper{
  width:210mm!important;
  min-height:297mm!important;
  margin:18px auto!important;
  padding:18mm!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:0 16px 42px rgba(15,23,42,.12)!important;
  border-radius:6px!important;
  box-sizing:border-box!important;
  font-family:Arial, sans-serif!important;
}
.pfc-v180-doc-head{
  display:flex!important;
  justify-content:space-between!important;
  gap:18px!important;
  border-bottom:3px solid #2563eb!important;
  padding-bottom:14px!important;
  margin-bottom:18px!important;
}
.pfc-v180-doc-company h2{
  margin:0 0 5px!important;
  font-size:22px!important;
  letter-spacing:-.02em!important;
}
.pfc-v180-doc-company p{
  margin:0!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.pfc-v180-doc-title{
  text-align:right!important;
}
.pfc-v180-doc-title h1{
  margin:0!important;
  font-size:24px!important;
  color:#1d4ed8!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}
.pfc-v180-doc-title span{
  display:block!important;
  margin-top:5px!important;
  color:#64748b!important;
  font-size:12px!important;
}
.pfc-v180-doc-info{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px 18px!important;
  margin-bottom:18px!important;
}
.pfc-v180-doc-info div{
  padding:10px 12px!important;
  border:1px solid #dbeafe!important;
  border-radius:10px!important;
  background:#f8fbff!important;
}
.pfc-v180-doc-info span{
  display:block!important;
  color:#64748b!important;
  font-size:10px!important;
  text-transform:uppercase!important;
  letter-spacing:.10em!important;
  font-weight:700!important;
}
.pfc-v180-doc-info b{
  display:block!important;
  margin-top:4px!important;
  color:#0f172a!important;
  font-size:13px!important;
}
.pfc-v180-doc-table{
  width:100%!important;
  border-collapse:collapse!important;
  margin:16px 0!important;
  font-size:12px!important;
}
.pfc-v180-doc-table th{
  background:#eff6ff!important;
  color:#334155!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  font-size:10px!important;
  padding:10px!important;
  border:1px solid #bfdbfe!important;
  text-align:left!important;
}
.pfc-v180-doc-table td{
  padding:10px!important;
  border:1px solid #dbeafe!important;
  vertical-align:top!important;
}
.pfc-v180-doc-table .num{text-align:right!important}
.pfc-v180-total-box{
  margin-left:auto!important;
  width:300px!important;
  border:1px solid #bfdbfe!important;
  border-radius:12px!important;
  overflow:hidden!important;
}
.pfc-v180-total-row{
  display:flex!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:10px 12px!important;
  border-bottom:1px solid #dbeafe!important;
  font-size:12px!important;
}
.pfc-v180-total-row:last-child{
  border-bottom:0!important;
  background:#eff6ff!important;
  font-weight:900!important;
  color:#1d4ed8!important;
}
.pfc-v180-signatures{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:36px!important;
  margin-top:36px!important;
}
.pfc-v180-sign-box{
  text-align:center!important;
  font-size:12px!important;
}
.pfc-v180-sign-space{
  height:72px!important;
}
.pfc-v180-doc-note{
  margin-top:18px!important;
  padding:10px 12px!important;
  border-radius:10px!important;
  background:#fff7ed!important;
  border:1px solid #fed7aa!important;
  color:#9a3412!important;
  font-size:11px!important;
  line-height:1.5!important;
}
@media(max-width:900px){
  .pfc-v180-doc-paper{
    width:100%!important;
    min-height:auto!important;
    padding:18px!important;
    margin:12px!important;
  }
  .pfc-v180-doc-head,.pfc-v180-doc-info,.pfc-v180-signatures{
    grid-template-columns:1fr!important;
    display:grid!important;
    text-align:left!important;
  }
  .pfc-v180-doc-title{text-align:left!important}
  .pfc-v180-total-box{width:100%!important}
}
@media print{
  body *{visibility:hidden!important}
  #pfcV180DocPaper,#pfcV180DocPaper *{visibility:visible!important}
  #pfcV180DocPaper{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:210mm!important;
    min-height:297mm!important;
    margin:0!important;
    padding:16mm!important;
    box-shadow:none!important;
    border-radius:0!important;
  }
  .pfc-v180-doc-toolbar{display:none!important}
}


/* =========================================================
   PFC V181 - PAYROLL BUDGET INTEGRATION
   Scope:
   - Payroll budget comparison + pending payroll commitments.
   - Integrates unpaid approved/submitted payroll into Monitoring Budget pending upah.
   ========================================================= */
.pfc-v181-payroll-budget-card{
  border-radius:30px!important;
  margin-bottom:18px!important;
  border:1px solid rgba(147,197,253,.50)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.pfc-v181-budget-kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin:12px 0 16px!important;
}
.pfc-v181-budget-kpis div{
  padding:14px!important;
  border-radius:20px!important;
  border:1px solid #dbeafe!important;
  background:#fff!important;
}
.pfc-v181-budget-kpis span{
  display:block!important;
  color:#64748b!important;
  font-size:10px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}
.pfc-v181-budget-kpis b{
  display:block!important;
  margin-top:7px!important;
  color:#0f172a!important;
  font-size:19px!important;
  line-height:1.1!important;
}
.pfc-v181-budget-table.table-wrap{
  border-radius:24px!important;
  border:1px solid #dbeafe!important;
  background:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.pfc-v181-budget-table table thead th{
  background:#f8fbff!important;
  color:#334155!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
}
.pfc-v181-progress{
  display:block!important;
  width:100%!important;
  height:8px!important;
  border-radius:999px!important;
  background:#dbeafe!important;
  overflow:hidden!important;
  margin-bottom:5px!important;
}
.pfc-v181-progress i{
  display:block!important;
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#60a5fa,#2563eb)!important;
}
.pfc-v181-progress.over i{
  background:linear-gradient(90deg,#fb7185,#dc2626)!important;
}
.pfc-v181-budget-safe{color:#15803d!important;font-weight:900!important}
.pfc-v181-budget-warn{color:#c2410c!important;font-weight:900!important}
.pfc-v181-budget-over{color:#dc2626!important;font-weight:900!important}
@media(max-width:1100px){
  .pfc-v181-budget-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  .pfc-v181-budget-kpis{grid-template-columns:1fr!important}
}


/* =========================================================
   PFC V182 - PAYROLL PREMIUM MODAL POLISH
   Scope:
   - Input Upah becomes popup/modal.
   - Payroll form visual upgraded to premium/professional.
   - Hide old Workflow / Module Plan / security note section.
   - Does not alter draft/approval/payment/budget posting logic.
   ========================================================= */

/* Hide outdated explanatory cards from earlier foundation stage */
body #app #upah .pfc-v177-payroll-grid,
body #app #upah .pfc-v177-payroll-note{
  display:none!important;
}

/* Main payroll page polish */
body #app #upah .pfc-v177-payroll-hero{
  position:relative!important;
  overflow:hidden!important;
  padding:30px 32px!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(59,130,246,.22),transparent 34%),
    radial-gradient(circle at 92% 16%,rgba(14,165,233,.14),transparent 32%),
    linear-gradient(135deg,#ffffff,#f8fbff)!important;
  border:1px solid rgba(147,197,253,.64)!important;
  box-shadow:0 22px 52px rgba(15,23,42,.065), inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body #app #upah .pfc-v177-payroll-hero::after{
  content:""!important;
  position:absolute!important;
  right:-80px!important;
  top:-90px!important;
  width:260px!important;
  height:260px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(14,165,233,.16))!important;
  pointer-events:none!important;
}
body #app #upah .pfc-v177-payroll-hero h2{
  font-size:38px!important;
  letter-spacing:-.045em!important;
}
body #app #upah .pfc-v177-payroll-actions .btn{
  min-height:46px!important;
  border-radius:17px!important;
}

body #app #upah .pfc-v177-payroll-kpis{
  gap:16px!important;
}
body #app #upah .pfc-v177-payroll-kpi{
  border-radius:26px!important;
  background:
    radial-gradient(circle at top left,rgba(219,234,254,.72),transparent 42%),
    linear-gradient(180deg,#ffffff,#f8fbff)!important;
}

/* Inline form card is hidden because input now opens in popup */
body #app #upah > .pfc-v177-payroll-form-card{
  display:none!important;
}

/* Premium modal shell */
.pfc-v182-payroll-modal{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(10px,2vw,24px)!important;
  background:rgba(15,23,42,.38)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  overflow:hidden!important;
}
.pfc-v182-payroll-modal.is-open{
  display:flex!important;
}
.pfc-v182-payroll-modal .pfc-v177-payroll-form-card{
  display:flex!important;
  flex-direction:column!important;
  width:min(1120px,calc(100vw - clamp(20px,4vw,48px)))!important;
  max-width:1120px!important;
  max-height:calc(100dvh - clamp(20px,4vw,48px))!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border-radius:32px!important;
  border:1px solid rgba(147,197,253,.68)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 32px 92px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.95)!important;
  animation:pfcV182PayrollModalIn .18s ease-out!important;
}
@keyframes pfcV182PayrollModalIn{
  from{opacity:0; transform:translateY(14px) scale(.985);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* Modal header */
.pfc-v182-payroll-modal .pfc-v177-payroll-head{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:24px 26px 18px!important;
  margin:0!important;
  border-bottom:1px solid #dbeafe!important;
  background:
    radial-gradient(circle at top left,rgba(96,165,250,.14),transparent 35%),
    linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
.pfc-v182-payroll-modal .pfc-v177-payroll-head h3{
  margin-top:6px!important;
  font-size:25px!important;
  letter-spacing:-.03em!important;
}
.pfc-v182-payroll-close{
  height:42px!important;
  min-height:42px!important;
  padding:0 18px!important;
  border-radius:16px!important;
  white-space:nowrap!important;
}

/* Modal form body */
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
  overflow:auto!important;
  padding:22px 26px!important;
  max-height:calc(100dvh - 250px)!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  scrollbar-width:thin!important;
}
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid label{
  position:relative!important;
  padding:13px 14px!important;
  border-radius:20px!important;
  background:
    linear-gradient(180deg,#ffffff,#fbfdff)!important;
  border:1px solid rgba(191,219,254,.70)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(15,23,42,.025)!important;
  color:#334155!important;
  font-size:12px!important;
  font-weight:900!important;
}
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid label.wide{
  grid-column:span 2!important;
}
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid label.full{
  grid-column:1 / -1!important;
}
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid input,
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid select,
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid textarea{
  height:44px!important;
  margin-top:9px!important;
  border-radius:15px!important;
  border-color:#dbeafe!important;
  background:#ffffff!important;
}
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid textarea{
  height:auto!important;
  min-height:92px!important;
}

/* Footer stays visible inside modal */
.pfc-v182-payroll-modal .pfc-v177-payroll-form-footer{
  position:sticky!important;
  bottom:0!important;
  z-index:5!important;
  margin:0!important;
  border-radius:0!important;
  padding:16px 26px!important;
  border-top:1px solid #dbeafe!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  background:linear-gradient(180deg,rgba(248,251,255,.86),#f8fbff)!important;
}
.pfc-v182-payroll-modal .pfc-v177-payroll-form-actions .btn{
  min-height:42px!important;
  border-radius:15px!important;
}

/* Payroll register and budget card make page cleaner after form moved to popup */
body #app #upah .pfc-v178-payroll-table-card,
body #app #upah .pfc-v181-payroll-budget-card{
  border-radius:30px!important;
  border:1px solid rgba(147,197,253,.52)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.88)!important;
}

@media(max-width:1120px){
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .pfc-v182-payroll-modal{
    align-items:flex-start!important;
    padding:10px!important;
  }
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-card{
    width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:24px!important;
  }
  .pfc-v182-payroll-modal .pfc-v177-payroll-head{
    padding:18px!important;
  }
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
    grid-template-columns:1fr!important;
    padding:16px 18px!important;
    max-height:calc(100dvh - 220px)!important;
  }
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-grid label.wide,
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-grid label.full{
    grid-column:1 / -1!important;
  }
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-footer{
    display:block!important;
    padding:14px 18px!important;
  }
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-actions{
    justify-content:flex-start!important;
    margin-top:12px!important;
  }
}


/* =========================================================
   PFC V183 - PAYROLL SIMPLE AUTO CALC FORM
   Scope:
   - Simplify payroll entry form.
   - Auto calculation for daily wage / borongan / opname.
   - Hide fields that should be automatic at draft stage.
   - No change to approval/payment/posting logic.
   ========================================================= */

/* Hide old complex/manual fields from V177 form */
.pfc-v183-hidden-field{
  display:none!important;
}

.pfc-v183-total-preview{
  grid-column:span 2!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:86px!important;
  padding:16px 18px!important;
  border-radius:22px!important;
  border:1px solid rgba(147,197,253,.65)!important;
  background:
    radial-gradient(circle at top left,rgba(96,165,250,.18),transparent 44%),
    linear-gradient(135deg,#eff6ff,#ffffff)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 10px 22px rgba(37,99,235,.06)!important;
}

.pfc-v183-total-preview span{
  display:block!important;
  color:#64748b!important;
  font-size:10px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.14em!important;
}

.pfc-v183-total-preview b{
  display:block!important;
  margin-top:7px!important;
  color:#0f172a!important;
  font-size:28px!important;
  line-height:1.05!important;
  letter-spacing:-.04em!important;
}

.pfc-v183-total-preview small{
  display:block!important;
  margin-top:7px!important;
  color:#64748b!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:700!important;
}

.pfc-v183-auto-field{
  border-color:rgba(147,197,253,.72)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}

.pfc-v183-helper-strip{
  grid-column:1 / -1!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:2px!important;
}

.pfc-v183-helper-strip div{
  padding:12px 14px!important;
  border-radius:18px!important;
  border:1px solid #dbeafe!important;
  background:#fff!important;
}

.pfc-v183-helper-strip span{
  display:block!important;
  color:#1d4ed8!important;
  font-size:12px!important;
  font-weight:950!important;
}

.pfc-v183-helper-strip small{
  display:block!important;
  margin-top:4px!important;
  color:#64748b!important;
  font-size:11px!important;
  line-height:1.35!important;
}

.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
  grid-template-columns:1.2fr 1fr 1fr!important;
}

.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid label.wide{
  grid-column:span 1!important;
}

.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid label.full{
  grid-column:1 / -1!important;
}

.pfc-v182-payroll-modal .pfc-v177-payroll-form-footer{
  border-top:1px solid #dbeafe!important;
}

@media(max-width:1120px){
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .pfc-v183-total-preview{grid-column:1 / -1!important}
  .pfc-v183-helper-strip{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
    grid-template-columns:1fr!important;
  }
  .pfc-v183-total-preview{grid-column:1 / -1!important}
}


/* =========================================================
   PFC V184 - PAYROLL FIELD CLEAN + HARIAN/BORONGAN MODE
   Fix:
   - Remove duplicate old fields from visible payroll modal.
   - Status and payment fields are automatic / handled in approval-payment.
   - Borongan supports contract value + progress opname.
   ========================================================= */

/* Robustly hide old duplicated fields even if JS runs late */
.pfc-v182-payroll-modal label:has(#payrollStatusPreview),
.pfc-v182-payroll-modal label:has(#payrollQtyPreview),
.pfc-v182-payroll-modal label:has(#payrollRatePreview),
.pfc-v182-payroll-modal label:has(#payrollDeductionPreview),
.pfc-v182-payroll-modal label:has(#payrollPaymentPreview),
.pfc-v182-payroll-modal label:has(#payrollBankPreview),
.pfc-v182-payroll-modal label:has(#payrollRefPreview){
  display:none!important;
}

/* Make the visible form more compact and user friendly */
.pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:13px!important;
}

.pfc-v184-mode-info{
  grid-column:1 / -1!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}

.pfc-v184-mode-info div{
  padding:13px 15px!important;
  border-radius:18px!important;
  border:1px solid #dbeafe!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}

.pfc-v184-mode-info b{
  display:block!important;
  color:#0f172a!important;
  font-size:13px!important;
}

.pfc-v184-mode-info small{
  display:block!important;
  margin-top:4px!important;
  color:#64748b!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}

.pfc-v183-total-preview{
  grid-column:1 / -1!important;
  min-height:92px!important;
  border-color:rgba(37,99,235,.35)!important;
}

.pfc-v183-total-preview b{
  font-size:32px!important;
}

/* Show only the fields relevant to the selected wage mode */
.pfc-v182-payroll-modal.is-daily .pfc-v183-borongan-field{
  display:none!important;
}
.pfc-v182-payroll-modal.is-borongan .pfc-v183-harian-field{
  display:none!important;
}

.pfc-v182-payroll-modal .pfc-v183-auto-field input{
  font-weight:850!important;
  letter-spacing:.02em!important;
}

@media(max-width:1000px){
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .pfc-v184-mode-info{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:680px){
  .pfc-v182-payroll-modal .pfc-v177-payroll-form-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   PFC V185 - PAYROLL AUTO APPROVAL + OPNAME CALC
   Scope:
   - Initial payroll entry becomes "Menunggu Approval" automatically.
   - Borongan/opname has automatic progress calculation and manual override.
   - Keeps payment posting safeguards from V179+.
   ========================================================= */
.pfc-v185-manual-toggle{
  grid-column:1 / -1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:13px 15px!important;
  border-radius:18px!important;
  border:1px solid rgba(147,197,253,.52)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
.pfc-v185-manual-toggle div b{
  display:block!important;
  color:#0f172a!important;
  font-size:13px!important;
}
.pfc-v185-manual-toggle div small{
  display:block!important;
  color:#64748b!important;
  font-size:11.5px!important;
  margin-top:4px!important;
  line-height:1.35!important;
}
.pfc-v185-switch{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  cursor:pointer!important;
  user-select:none!important;
  color:#2563eb!important;
  font-size:12px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.pfc-v185-switch input{
  width:42px!important;
  height:24px!important;
  appearance:none!important;
  border-radius:999px!important;
  border:1px solid #bfdbfe!important;
  background:#dbeafe!important;
  outline:none!important;
  cursor:pointer!important;
  transition:.15s ease!important;
  margin:0!important;
}
.pfc-v185-switch input:checked{
  background:#2563eb!important;
  border-color:#2563eb!important;
}
.pfc-v185-switch input::after{
  content:""!important;
  display:block!important;
  width:18px!important;
  height:18px!important;
  margin:2px!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 2px 8px rgba(15,23,42,.18)!important;
  transition:.15s ease!important;
}
.pfc-v185-switch input:checked::after{
  transform:translateX(18px)!important;
}
.pfc-v185-opname-readonly{
  background:#f8fafc!important;
  color:#64748b!important;
}
.pfc-v185-status-note{
  grid-column:1 / -1!important;
  padding:12px 14px!important;
  border-radius:18px!important;
  border:1px solid #fed7aa!important;
  background:#fff7ed!important;
  color:#9a3412!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
.pfc-v185-status-note b{
  color:#9a3412!important;
}


/* =========================================================
   PFC V186 - PAYROLL ACTION BUTTONS POLISH
   Scope:
   - Professional action button naming and layout in payroll table.
   - Prevent stacked/chaotic buttons.
   - No payroll logic/accounting changes.
   ========================================================= */
.pfc-v178-payroll-table table th:last-child,
.pfc-v178-payroll-table table td:last-child{
  min-width:260px!important;
  width:260px!important;
}

.pfc-v186-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  max-width:260px!important;
}

.pfc-v186-actions .small{
  height:30px!important;
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:11px!important;
  font-size:10.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
  letter-spacing:.01em!important;
}

.pfc-v186-actions .pfc-v186-primary{
  background:#2563eb!important;
  color:#fff!important;
  border-color:#2563eb!important;
}

.pfc-v186-actions .pfc-v186-soft{
  background:#eff6ff!important;
  color:#1d4ed8!important;
  border-color:#bfdbfe!important;
}

.pfc-v186-actions .pfc-v186-danger{
  background:#fff1f2!important;
  color:#be123c!important;
  border-color:#fecdd3!important;
}

.pfc-v186-doc-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
  margin-top:7px!important;
  padding-top:7px!important;
  border-top:1px dashed #dbeafe!important;
}

.pfc-v186-doc-actions .small{
  height:28px!important;
  min-height:28px!important;
  padding:0 9px!important;
  border-radius:10px!important;
  font-size:10.5px!important;
  white-space:nowrap!important;
}

.pfc-v186-paid-state{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  min-width:0!important;
}

.pfc-v186-paid-ref{
  display:block!important;
  color:#64748b!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  word-break:break-word!important;
}

@media(max-width:980px){
  .pfc-v178-payroll-table table th:last-child,
  .pfc-v178-payroll-table table td:last-child{
    min-width:220px!important;
    width:220px!important;
  }
  .pfc-v186-actions{
    max-width:220px!important;
  }
}


/* =========================================================
   PFC V187 - RECEIVABLE TARGET COMPONENT LABEL FIX
   Scope:
   - Rename "Unit / Item Proyek" to clearer payment-monitoring wording.
   - Make component field editable/free text.
   - Add helper/suggestions for termin/project payment components.
   ========================================================= */
#receivableTargetModal .receivable-edit-form label{
  position:relative!important;
}

#receivableTargetModal .pfc-v187-field-help{
  display:block!important;
  margin-top:7px!important;
  color:#64748b!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:650!important;
}

#receivableTargetModal #editRtUnit{
  background:#ffffff!important;
  cursor:text!important;
}

#receivableTargetModal .pfc-v187-quick-components{
  grid-column:1 / -1!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  padding:10px 12px!important;
  border-radius:18px!important;
  border:1px solid #dbeafe!important;
  background:#f8fbff!important;
}

#receivableTargetModal .pfc-v187-quick-components span{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  margin-right:2px!important;
}

#receivableTargetModal .pfc-v187-chip{
  height:30px!important;
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  border:1px solid #bfdbfe!important;
  background:#ffffff!important;
  color:#1d4ed8!important;
  font-size:11px!important;
  font-weight:850!important;
  cursor:pointer!important;
}

#receivableTargetModal .pfc-v187-chip:hover{
  background:#eff6ff!important;
}

#receivableTargetModal .receivable-modal-card{
  max-width:min(980px,calc(100vw - 40px))!important;
}

/* PFC V188 - RECEIVABLE BILLING SCHEME PREMIUM */
#receivableTargetModal .receivable-modal-card{max-width:min(1180px,calc(100vw - 44px))!important;border-radius:30px!important}
.pfc-v188-scheme-panel{margin:18px 0!important;padding:18px!important;border-radius:26px!important;border:1px solid rgba(147,197,253,.58)!important;background:radial-gradient(circle at top left,rgba(96,165,250,.18),transparent 34%),linear-gradient(180deg,#fff,#f8fbff)!important;box-shadow:0 18px 44px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.9)!important}
.pfc-v188-scheme-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;padding-bottom:14px!important;margin-bottom:14px!important;border-bottom:1px solid #dbeafe!important}
.pfc-v188-scheme-head h4{margin:5px 0 6px!important;font-size:22px!important;line-height:1.1!important;letter-spacing:-.025em!important;color:#0f172a!important}
.pfc-v188-scheme-head p{margin:0!important;color:#64748b!important;font-size:13px!important;line-height:1.5!important;font-weight:650!important}
.pfc-v188-mode-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:34px!important;padding:0 12px!important;border-radius:999px!important;border:1px solid #bfdbfe!important;background:#eff6ff!important;color:#1d4ed8!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.10em!important;white-space:nowrap!important}
.pfc-v188-scheme-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.pfc-v188-scheme-grid label,.pfc-v188-percent-grid label{display:block!important;min-width:0!important;padding:12px 13px!important;border-radius:18px!important;background:#fff!important;border:1px solid rgba(191,219,254,.72)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.88)!important;color:#334155!important;font-size:12px!important;font-weight:900!important}
.pfc-v188-scheme-grid input,.pfc-v188-scheme-grid select,.pfc-v188-percent-grid input{width:100%!important;min-width:0!important;margin-top:8px!important;height:42px!important;border-radius:14px!important;box-sizing:border-box!important}
.pfc-v188-percent-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin-top:12px!important}
.pfc-v188-scheme-preview{margin-top:14px!important;border-radius:22px!important;border:1px solid #dbeafe!important;background:#fff!important;overflow:hidden!important}
.pfc-v188-scheme-preview table{width:100%!important;border-collapse:collapse!important;font-size:12px!important}
.pfc-v188-scheme-preview th,.pfc-v188-scheme-preview td{padding:10px 12px!important;border-bottom:1px solid #e5edf8!important;text-align:left!important}
.pfc-v188-scheme-preview th{background:#eff6ff!important;color:#334155!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-size:10px!important}
.pfc-v188-scheme-preview .num{text-align:right!important;font-variant-numeric:tabular-nums!important}
.pfc-v188-scheme-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;margin-top:14px!important}
.pfc-v188-manual-divider{margin:14px 0 10px!important;display:flex!important;align-items:center!important;gap:12px!important;color:#64748b!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.12em!important}
.pfc-v188-manual-divider:before,.pfc-v188-manual-divider:after{content:""!important;height:1px!important;flex:1!important;background:#dbeafe!important}
@media(max-width:1120px){.pfc-v188-scheme-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pfc-v188-percent-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:720px){.pfc-v188-scheme-head{display:block!important}.pfc-v188-mode-badge{margin-top:10px!important}.pfc-v188-scheme-grid,.pfc-v188-percent-grid{grid-template-columns:1fr!important}.pfc-v188-scheme-actions{justify-content:flex-start!important;flex-wrap:wrap!important}}


/* =========================================================
   PFC V189 - RECEIVABLE FORM PREMIUM SIMPLIFIED
   Focus:
   - Simpler, more premium billing-scheme form
   - Better spacing and grouping
   - Collapsible manual section
   - Chip-like controls for select fields
   ========================================================= */
#receivableTargetModal .receivable-modal-card{
  max-width:min(1120px,calc(100vw - 44px))!important;
  border-radius:32px!important;
  padding:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
#receivableTargetModal .modal-head{
  padding:24px 26px 18px!important;
  border-bottom:1px solid #dbeafe!important;
  background:
    radial-gradient(circle at top left,rgba(96,165,250,.16),transparent 34%),
    linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
#receivableTargetModal .modal-head h3{
  font-size:28px!important;
  letter-spacing:-.03em!important;
}
#receivableTargetModal .modal-head p{
  max-width:700px!important;
  color:#64748b!important;
  line-height:1.5!important;
}
#receivableTargetModal .pfc-v188-scheme-panel{
  margin:16px 20px!important;
  padding:20px!important;
  border-radius:28px!important;
}
#receivableTargetModal .pfc-v188-scheme-head{
  align-items:center!important;
}
#receivableTargetModal .pfc-v188-scheme-head h4{
  font-size:24px!important;
}
#receivableTargetModal .pfc-v188-scheme-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
#receivableTargetModal .pfc-v189-field-wide{
  grid-column:1 / -1!important;
}
#receivableTargetModal .pfc-v188-scheme-grid label,
#receivableTargetModal .pfc-v188-percent-grid label,
#receivableTargetModal .receivable-edit-form label{
  border-radius:20px!important;
  padding:14px 15px!important;
  background:#ffffff!important;
  border:1px solid rgba(191,219,254,.88)!important;
  box-shadow:0 10px 22px rgba(15,23,42,.028), inset 0 1px 0 rgba(255,255,255,.92)!important;
}
#receivableTargetModal .pfc-v188-scheme-grid input,
#receivableTargetModal .pfc-v188-scheme-grid select,
#receivableTargetModal .pfc-v188-percent-grid input,
#receivableTargetModal .receivable-edit-form input,
#receivableTargetModal .receivable-edit-form select,
#receivableTargetModal .receivable-edit-form textarea{
  margin-top:9px!important;
  border-radius:15px!important;
  border-color:#dbeafe!important;
  background:#fbfdff!important;
  box-shadow:none!important;
}
#receivableTargetModal .pfc-v188-percent-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  margin-top:14px!important;
}
#receivableTargetModal .pfc-v189-scheme-summary{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 16px!important;
}
#receivableTargetModal .pfc-v189-scheme-summary > div{
  padding:14px 16px!important;
  border-radius:20px!important;
  border:1px solid #dbeafe!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
#receivableTargetModal .pfc-v189-scheme-summary span{
  display:block!important;
  color:#64748b!important;
  font-size:10px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}
#receivableTargetModal .pfc-v189-scheme-summary b{
  display:block!important;
  margin-top:7px!important;
  color:#0f172a!important;
  font-size:18px!important;
  line-height:1.2!important;
}
#receivableTargetModal .pfc-v188-scheme-preview{
  margin-top:16px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:0 12px 28px rgba(15,23,42,.035)!important;
}
#receivableTargetModal .pfc-v188-scheme-preview th{
  padding:12px!important;
  background:#f1f7ff!important;
}
#receivableTargetModal .pfc-v188-scheme-preview td{
  padding:12px!important;
}
#receivableTargetModal .pfc-v188-scheme-actions{
  margin-top:16px!important;
  justify-content:space-between!important;
}
#receivableTargetModal .pfc-v188-scheme-actions .btn{
  min-height:44px!important;
  border-radius:16px!important;
  padding:0 16px!important;
}
#receivableTargetModal .pfc-v189-manual-wrap{
  margin:0 20px 20px!important;
}
#receivableTargetModal .pfc-v189-manual-toggle{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  text-align:left!important;
  padding:16px 18px!important;
  border-radius:24px!important;
  border:1px solid rgba(191,219,254,.92)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.035)!important;
  cursor:pointer!important;
}
#receivableTargetModal .pfc-v189-manual-toggle b{
  display:block!important;
  margin-top:4px!important;
  color:#0f172a!important;
  font-size:17px!important;
}
#receivableTargetModal .pfc-v189-manual-toggle small{
  display:block!important;
  margin-top:5px!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.45!important;
}
#pfcV189ManualToggleLabel{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  border:1px solid #bfdbfe!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  font-size:11px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
}
#pfcV189ManualSection{
  display:none!important;
  margin-top:12px!important;
  padding:16px!important;
  border-radius:24px!important;
  border:1px solid #dbeafe!important;
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
}
#receivableTargetModal.manual-open #pfcV189ManualSection{
  display:grid!important;
}
#receivableTargetModal .receivable-edit-form{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
#receivableTargetModal .receivable-edit-form .full{
  grid-column:1 / -1!important;
}
#receivableTargetModal .receivable-edit-form textarea{
  min-height:90px!important;
}
#receivableTargetModal .receivable-edit-form .btn{
  min-height:44px!important;
  border-radius:16px!important;
}
#receivableTargetModal .pfc-v187-quick-components{
  border-radius:20px!important;
  padding:12px!important;
}
#receivableTargetModal .pfc-v187-chip{
  height:32px!important;
  min-height:32px!important;
  border-radius:999px!important;
  padding:0 12px!important;
}
@media(max-width:880px){
  #receivableTargetModal .pfc-v189-scheme-summary,
  #receivableTargetModal .pfc-v188-scheme-grid,
  #receivableTargetModal .pfc-v188-percent-grid,
  #receivableTargetModal .receivable-edit-form{
    grid-template-columns:1fr!important;
  }
  #receivableTargetModal .pfc-v188-scheme-actions{
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
  }
  #receivableTargetModal .pfc-v189-manual-toggle{
    display:block!important;
  }
  #pfcV189ManualToggleLabel{
    margin-top:12px!important;
  }
}


/* =========================================================
   PFC V190 - RECEIVABLE MODAL Z-INDEX + RESPONSIVE FIX
   Purpose:
   - Prevent topbar from covering receivable modal
   - Make modal fully scrollable and flexible on smaller browser sizes
   - Keep the form visible without being cut off
   ========================================================= */
#receivableTargetModal.modal-backdrop{
  z-index:999999!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:auto!important;
  padding:22px clamp(12px,2.8vw,28px)!important;
  background:rgba(15,23,42,.42)!important;
  backdrop-filter:blur(12px)!important;
}
#receivableTargetModal .receivable-modal-card{
  position:relative!important;
  margin:0 auto!important;
  width:min(1120px,100%)!important;
  max-width:min(1120px,calc(100vw - 24px))!important;
  max-height:calc(100vh - 44px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  border-radius:30px!important;
  box-sizing:border-box!important;
}
#receivableTargetModal .modal-head{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
}
#receivableTargetModal .pfc-v188-scheme-panel,
#receivableTargetModal .pfc-v189-manual-wrap{
  min-width:0!important;
}
#receivableTargetModal .pfc-v188-scheme-grid,
#receivableTargetModal .pfc-v188-percent-grid,
#receivableTargetModal .pfc-v189-scheme-summary,
#receivableTargetModal .receivable-edit-form{
  min-width:0!important;
}
#receivableTargetModal .pfc-v188-scheme-preview{
  overflow:auto!important;
}
#receivableTargetModal .pfc-v188-scheme-preview table{
  min-width:540px!important;
}
@media(max-width:1080px){
  #receivableTargetModal .receivable-modal-card{
    max-height:calc(100vh - 28px)!important;
    border-radius:24px!important;
  }
}
@media(max-width:760px){
  #receivableTargetModal.modal-backdrop{
    padding:10px!important;
  }
  #receivableTargetModal .receivable-modal-card{
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
    border-radius:20px!important;
  }
  #receivableTargetModal .modal-head{
    padding:18px 18px 14px!important;
  }
  #receivableTargetModal .modal-head h3{
    font-size:23px!important;
  }
  #receivableTargetModal .modal-head p{
    font-size:13px!important;
    max-width:none!important;
  }
  #receivableTargetModal .pfc-v188-scheme-panel{
    margin:12px!important;
    padding:14px!important;
    border-radius:22px!important;
  }
  #receivableTargetModal .pfc-v189-manual-wrap{
    margin:0 12px 12px!important;
  }
}


/* =========================================================
   PFC V191 - RECEIVABLE MANUAL EXCEPTION CLARITY
   Purpose:
   - Clarify manual input as exception/adjustment only
   - Replace confusing "component tagihan" wording in manual form
   - Make chips contextual for exceptions, not normal termin setup
   ========================================================= */
#receivableTargetModal .pfc-v189-manual-toggle b{
  color:#0f172a!important;
}
#receivableTargetModal .pfc-v189-manual-toggle{
  background:
    radial-gradient(circle at top left,rgba(251,146,60,.10),transparent 36%),
    linear-gradient(180deg,#ffffff,#fffaf5)!important;
  border-color:#fed7aa!important;
}
#pfcV189ManualToggleLabel{
  background:#fff7ed!important;
  color:#c2410c!important;
  border-color:#fed7aa!important;
}
#receivableTargetModal.manual-open #pfcV189ManualToggleLabel{
  background:#eff6ff!important;
  color:#1d4ed8!important;
  border-color:#bfdbfe!important;
}
#receivableTargetModal .pfc-v187-quick-components{
  background:#fff7ed!important;
  border-color:#fed7aa!important;
}
#receivableTargetModal .pfc-v187-quick-components span{
  color:#9a3412!important;
}
#receivableTargetModal .pfc-v187-chip{
  border-color:#fed7aa!important;
  color:#9a3412!important;
  background:#ffffff!important;
}
#receivableTargetModal .pfc-v187-chip:hover{
  background:#ffedd5!important;
}
#receivableTargetModal .pfc-v191-exception-note{
  grid-column:1 / -1!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:12px 14px!important;
  border-radius:18px!important;
  background:#fff7ed!important;
  border:1px solid #fed7aa!important;
  color:#9a3412!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
#receivableTargetModal .pfc-v191-exception-note b{
  color:#9a3412!important;
  white-space:nowrap!important;
}


/* =========================================================
   PFC V192 - MONITORING REMOVE EXPENSE INPUT BUTTON
   Monitoring Proyek must stay as analysis/monitoring only.
   Direct input pengeluaran shortcuts are removed to avoid duplicate input paths.
   ========================================================= */
body #app #proyek button[data-pfc-v192-expense-shortcut],
body #app #proyek .pfc-v192-hide-expense-shortcut{
  display:none!important;
}
body #app #proyek .pfc-v192-ledger-shortcut{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:0 18px!important;
  border-radius:16px!important;
  border:1px solid rgba(147,197,253,.64)!important;
  background:#ffffff!important;
  color:#1d4ed8!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  box-shadow:0 12px 26px rgba(37,99,235,.08)!important;
}


/* =========================================================
   PFC V193 - BILLING SCHEME DYNAMIC FIELDS FIX
   Purpose:
   - Unit/Kavling only appears for Proyek Perumahan / Unit or Akad KPR.
   - DP field only appears for DP + Termin.
   - Termin and percentage mode hidden for Full Financing / Akad / Manual.
   ========================================================= */
#receivableTargetModal #billingUnitWrap.pfc-v193-hidden,
#receivableTargetModal #billingDpWrap.pfc-v193-hidden,
#receivableTargetModal #billingTerminWrap.pfc-v193-hidden,
#receivableTargetModal #billingModeWrap.pfc-v193-hidden{
  display:none!important;
}

#receivableTargetModal #billingUnitWrap.pfc-v193-visible,
#receivableTargetModal #billingDpWrap.pfc-v193-visible,
#receivableTargetModal #billingTerminWrap.pfc-v193-visible,
#receivableTargetModal #billingModeWrap.pfc-v193-visible{
  display:block!important;
}


/* =========================================================
   PFC V194 - BILLING UNIT ONLY DYNAMIC FIX
   Purpose:
   - Do NOT change/filter Skema Pembayaran options by Jenis Proyek.
   - Only fix Unit/Kavling visibility.
   - Unit/Kavling appears only for Proyek Perumahan / Unit.
   ========================================================= */
#receivableTargetModal #billingUnitWrap.pfc-v194-hidden{
  display:none!important;
}
#receivableTargetModal #billingUnitWrap.pfc-v194-visible{
  display:block!important;
}


/* =========================================================
   PFC V195 - BILLING SCHEME KPR PERUMAHAN ONLY
   Purpose:
   - Akad KPR / Pencairan Bank only appears for Proyek Perumahan / Unit.
   - Proyek Pemerintah and Proyek Swasta keep professional schemes:
     Termin, DP+Termin, Full Financing, Manual.
   ========================================================= */
#receivableTargetModal .pfc-v195-scheme-note{
  grid-column:1 / -1!important;
  display:none!important;
  padding:11px 13px!important;
  border-radius:16px!important;
  border:1px solid #dbeafe!important;
  background:#f8fbff!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
#receivableTargetModal .pfc-v195-scheme-note.is-visible{
  display:block!important;
}


/* =========================================================
   PFC V196 - RECEIVABLE STAGE LABEL + CLEANUP
   Purpose:
   - Rename Unit / Item to Rincian Tagihan for multi-project clarity.
   - Stop Modal Kerja / funding cash-in from appearing as receivable target rows.
   - Hide invalid legacy Unit No. rows on non-housing projects when detectable.
   ========================================================= */
#receivable .receivable-table-wrap th:nth-child(3)::after{
  content:"";
}
#receivable .pfc-v196-clean-note{
  margin-top:10px!important;
  padding:11px 14px!important;
  border-radius:16px!important;
  border:1px solid #dbeafe!important;
  background:#f8fbff!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
#receivable .pfc-v196-clean-note b{
  color:#1d4ed8!important;
}


/* =========================================================
   PFC V197 - RECEIVABLE CLEANUP + VALIDATION
   Purpose:
   - Fix wrong receivable rows caused by old Unit/Item mapping.
   - Prevent Modal Kerja / funding cash-in from appearing as target tagihan.
   - Prevent Unit No. xx targets from appearing under non-housing projects.
   - Add safe cleanup action in Receivable Control.
   ========================================================= */
#receivable .pfc-v197-cleanup-bar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
  margin:12px 0!important;
  padding:13px 15px!important;
  border-radius:20px!important;
  border:1px solid #fed7aa!important;
  background:linear-gradient(180deg,#fffaf5,#ffffff)!important;
  color:#9a3412!important;
}
#receivable .pfc-v197-cleanup-bar b{
  display:block!important;
  color:#9a3412!important;
  font-size:13px!important;
}
#receivable .pfc-v197-cleanup-bar span{
  display:block!important;
  margin-top:4px!important;
  color:#b45309!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
#receivable .pfc-v197-cleanup-bar .btn{
  min-height:36px!important;
  border-radius:14px!important;
  background:#fff!important;
  border-color:#fed7aa!important;
  color:#c2410c!important;
  white-space:nowrap!important;
}
#receivable .pfc-v197-hidden-row-note{
  margin-top:8px!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:700!important;
}


/* =========================================================
   PFC V198 - RECEIVABLE PROJECT GROUPED MONITORING
   Purpose:
   - Monitoring Tagihan becomes project-level first.
   - Termin/payment breakdown appears as expandable child rows.
   - No per-termin "Isi Target" button in table.
   ========================================================= */
#receivable .pfc-v198-project-row{
  background:#ffffff!important;
}
#receivable .pfc-v198-project-row td{
  font-weight:850!important;
}
#receivable .pfc-v198-detail-row{
  background:#fbfdff!important;
}
#receivable .pfc-v198-detail-row td{
  color:#475569!important;
  font-size:13px!important;
}
#receivable .pfc-v198-detail-label{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding-left:18px!important;
}
#receivable .pfc-v198-detail-label:before{
  content:"↳"!important;
  color:#2563eb!important;
  font-weight:950!important;
}
#receivable .pfc-v198-detail-chip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:28px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  border:1px solid #dbeafe!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  font-weight:900!important;
  font-size:11px!important;
}
#receivable .pfc-v198-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
#receivable .pfc-v198-actions .small{
  min-height:30px!important;
  border-radius:11px!important;
  padding:0 10px!important;
  font-size:11px!important;
}
#receivable .pfc-v198-project-summary-note{
  margin:10px 0!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  border:1px solid #dbeafe!important;
  background:#f8fbff!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
#receivable .pfc-v198-toggle-icon{
  display:inline-flex!important;
  width:22px!important;
  height:22px!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  margin-right:8px!important;
  font-size:12px!important;
  font-weight:950!important;
}
#receivable .pfc-v198-muted{
  color:#94a3b8!important;
  font-size:12px!important;
  font-weight:700!important;
}


/* =========================================================
   PFC V199 - RECEIVABLE DETAIL STATUS FIX
   Purpose:
   - Remove Catatan from the monitoring table view.
   - Catatan remains available inside Detail.
   - Recalculate detail paid/status using robust project + rincian matching.
   ========================================================= */
#receivable .receivable-table-wrap th.pfc-v199-note-col,
#receivable .receivable-table-wrap td.pfc-v199-note-col{
  display:none!important;
}

#receivable .pfc-v198-detail-row td,
#receivable .pfc-v198-project-row td{
  vertical-align:middle!important;
}

#receivable .pfc-v198-actions{
  justify-content:flex-start!important;
  min-width:190px!important;
}


/* =========================================================
   PFC V200 - RECEIVABLE TABLE HEADER + UNIT MATCH FIX
   Fixes:
   - Remove Catatan column completely from header and rows.
   - Force 9-column table structure.
   - Improve Unit No matching for Unit No. 23 / Unit 23 / unit no 2 3 / text in description.
   ========================================================= */
#receivable .receivable-table-wrap table{
  table-layout:auto!important;
}
#receivable .receivable-table-wrap th:nth-child(9),
#receivable .receivable-table-wrap td:nth-child(9){
  min-width:190px!important;
}
#receivable .receivable-table-wrap th:nth-child(10),
#receivable .receivable-table-wrap td:nth-child(10){
  display:none!important;
}
#receivable .pfc-v200-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
#receivable .pfc-v200-actions .small{
  min-height:30px!important;
  border-radius:11px!important;
  padding:0 10px!important;
  font-size:11px!important;
}


/* =========================================================
   PFC V201 - RECEIVABLE HARD RENDER FIX
   Final lock for receivable monitoring:
   - 9 columns only, no Catatan column.
   - Action buttons always in Aksi column.
   - Paid/status uses the exact same payment rows as detail modal + normalized fallback.
   ========================================================= */
#receivable .receivable-table-wrap table thead tr th:nth-child(10),
#receivable .receivable-table-wrap table tbody tr td:nth-child(10){
  display:none!important;
}
#receivable .pfc-v201-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  min-width:210px!important;
}
#receivable .pfc-v201-actions .small{
  min-height:30px!important;
  border-radius:11px!important;
  padding:0 10px!important;
  font-size:11px!important;
  white-space:nowrap!important;
}
#receivable .pfc-v201-detail-row{
  background:#fbfdff!important;
}
#receivable .pfc-v201-detail-row td{
  vertical-align:middle!important;
}


/* =========================================================
   PFC V204 - EXPENSE QUICK CARDS + LEDGER BUTTON CLARITY
   ========================================================= */
#pengeluaran .expense-helper-card,
#pengeluaran .expense-type-card,
#pengeluaran .expense-guide-card,
#pengeluaran [data-expense-type-card]{
  cursor:pointer!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease!important;
  position:relative!important;
}
#pengeluaran .expense-helper-card:hover,
#pengeluaran .expense-type-card:hover,
#pengeluaran .expense-guide-card:hover,
#pengeluaran [data-expense-type-card]:hover{
  transform:translateY(-2px)!important;
  border-color:#93c5fd!important;
  box-shadow:0 16px 34px rgba(37,99,235,.10)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
}
#pengeluaran .expense-helper-card.is-selected,
#pengeluaran .expense-type-card.is-selected,
#pengeluaran .expense-guide-card.is-selected,
#pengeluaran [data-expense-type-card].is-selected{
  border-color:#2563eb!important;
  background:radial-gradient(circle at top left,rgba(37,99,235,.13),transparent 36%),linear-gradient(180deg,#ffffff,#eff6ff)!important;
  box-shadow:0 18px 40px rgba(37,99,235,.12)!important;
}
#pengeluaran .expense-helper-card.is-selected::after,
#pengeluaran .expense-type-card.is-selected::after,
#pengeluaran .expense-guide-card.is-selected::after,
#pengeluaran [data-expense-type-card].is-selected::after{
  content:"Dipilih"!important;
  position:absolute!important;
  top:12px!important;
  right:14px!important;
  min-height:24px!important;
  padding:0 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  border:1px solid #bfdbfe!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
#pengeluaran .pfc-v204-expense-inline-note{
  margin:10px 0 12px!important;
  padding:11px 14px!important;
  border-radius:16px!important;
  border:1px solid #dbeafe!important;
  background:#f8fbff!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
#pengeluaran .pfc-v204-expense-inline-note b{
  color:#1d4ed8!important;
}
#pengeluaran .pfc-v204-ledger-btn{
  display:none!important;
}


/* =========================================================
   PFC V205 - INCOME FORM PREMIUM MONITORING BUDGET STYLE
   Purpose:
   - Upgrade Form Pemasukan visual to premium/professional style.
   - Keep logic unchanged.
   - Make it visually consistent with Monitoring Budget cards.
   ========================================================= */
#pemasukan .income-premium-shell,
#pemasukan .income-form-card,
#pemasukan .cash-in-card,
#pemasukan .form-card,
#pemasukan form,
#pemasukan .entry-card{
  border-radius:28px!important;
}

#pemasukan .section-head,
#pemasukan .page-head,
#pemasukan .hero,
#pemasukan .module-hero{
  border-radius:30px!important;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f8fbff 48%,#eff6ff 100%)!important;
  border:1px solid rgba(191,219,254,.9)!important;
  box-shadow:0 22px 52px rgba(15,23,42,.06)!important;
  padding:24px 26px!important;
}

#pemasukan .section-head h2,
#pemasukan .page-head h2,
#pemasukan .hero h2,
#pemasukan .module-hero h2{
  letter-spacing:-.035em!important;
  color:#0f172a!important;
  font-size:clamp(28px,3vw,42px)!important;
  line-height:1.05!important;
}

#pemasukan .section-head p,
#pemasukan .page-head p,
#pemasukan .hero p,
#pemasukan .module-hero p{
  color:#64748b!important;
  max-width:920px!important;
  line-height:1.55!important;
  font-weight:650!important;
}

#pemasukan .eyebrow,
#pemasukan .kicker{
  color:#2563eb!important;
  letter-spacing:.22em!important;
  font-weight:950!important;
}

#pemasukan .form-grid,
#pemasukan form .grid,
#pemasukan .input-grid{
  gap:14px!important;
}

#pemasukan label{
  border-radius:20px!important;
}

#pemasukan .form-grid label,
#pemasukan form label,
#pemasukan .input-grid label{
  padding:14px 15px!important;
  border:1px solid rgba(191,219,254,.86)!important;
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.035), inset 0 1px 0 rgba(255,255,255,.92)!important;
  color:#334155!important;
  font-size:12px!important;
  font-weight:900!important;
}

#pemasukan input,
#pemasukan select,
#pemasukan textarea{
  border-radius:16px!important;
  border:1px solid #dbeafe!important;
  background:#ffffff!important;
  min-height:44px!important;
  box-shadow:none!important;
}

#pemasukan input:focus,
#pemasukan select:focus,
#pemasukan textarea:focus{
  border-color:#60a5fa!important;
  box-shadow:0 0 0 4px rgba(96,165,250,.15)!important;
}

#pemasukan .btn,
#pemasukan button{
  border-radius:16px!important;
}

#pemasukan .btn.primary,
#pemasukan button.primary,
#pemasukan .btn:not(.ghost):not(.secondary):not(.danger){
  box-shadow:0 16px 32px rgba(37,99,235,.18)!important;
}

#pemasukan .pfc-v205-income-mode-panel{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin:16px 0!important;
}

#pemasukan .pfc-v205-income-mode-card{
  position:relative!important;
  min-height:112px!important;
  padding:18px!important;
  border-radius:24px!important;
  border:1px solid rgba(191,219,254,.9)!important;
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.12),transparent 36%),
    linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 16px 38px rgba(15,23,42,.055)!important;
  cursor:pointer!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
  overflow:hidden!important;
}

#pemasukan .pfc-v205-income-mode-card:hover{
  transform:translateY(-2px)!important;
  border-color:#93c5fd!important;
  box-shadow:0 22px 48px rgba(37,99,235,.11)!important;
}

#pemasukan .pfc-v205-income-mode-card.is-selected{
  border-color:#2563eb!important;
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.18),transparent 34%),
    linear-gradient(180deg,#ffffff,#eff6ff)!important;
}

#pemasukan .pfc-v205-income-mode-card.is-selected::after{
  content:"Dipilih"!important;
  position:absolute!important;
  top:13px!important;
  right:13px!important;
  min-height:24px!important;
  padding:0 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  border:1px solid #bfdbfe!important;
  color:#1d4ed8!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

#pemasukan .pfc-v205-income-mode-card b{
  display:block!important;
  color:#0f172a!important;
  font-size:17px!important;
  letter-spacing:-.02em!important;
  margin-bottom:7px!important;
}

#pemasukan .pfc-v205-income-mode-card span{
  display:block!important;
  color:#64748b!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  font-weight:700!important;
}

#pemasukan .pfc-v205-income-mode-card .mini{
  display:inline-flex!important;
  margin-bottom:12px!important;
  min-height:28px!important;
  align-items:center!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  border:1px solid #dbeafe!important;
  color:#1d4ed8!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

#pemasukan .pfc-v205-income-note{
  margin:12px 0 14px!important;
  padding:13px 15px!important;
  border-radius:18px!important;
  border:1px solid #dbeafe!important;
  background:#f8fbff!important;
  color:#64748b!important;
  font-size:12.5px!important;
  line-height:1.48!important;
  font-weight:700!important;
}

#pemasukan .pfc-v205-income-note b{
  color:#1d4ed8!important;
}

#pemasukan .pfc-v205-form-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:12px 0!important;
  padding:12px 14px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid #dbeafe!important;
}

#pemasukan .pfc-v205-form-toolbar span{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
}

@media(max-width:980px){
  #pemasukan .pfc-v205-income-mode-panel{
    grid-template-columns:1fr!important;
  }
  #pemasukan .section-head,
  #pemasukan .page-head,
  #pemasukan .hero,
  #pemasukan .module-hero{
    padding:20px!important;
  }
}


/* =========================================================
   PFC V206 - INCOME FORM ACTUAL SECTION FIX
   V205 targeted the wrong section id. Actual Input Pemasukan page is #input.
   This version applies premium Monitoring Budget style directly to #input.
   ========================================================= */
#input.pfc-v206-income-page .pfc-v206-income-card{
  border-radius:32px!important;
  padding:22px!important;
  border:1px solid rgba(191,219,254,.92)!important;
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.12),transparent 34%),
    linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 24px 58px rgba(15,23,42,.07)!important;
}

#input .pfc-v206-income-hero{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:0 0 18px!important;
  margin-bottom:18px!important;
  border-bottom:1px solid #dbeafe!important;
  background:transparent!important;
  box-shadow:none!important;
}

#input .pfc-v206-income-hero .eyebrow{
  margin:0 0 8px!important;
  color:#2563eb!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.26em!important;
}

#input .pfc-v206-income-hero h3{
  margin:0 0 8px!important;
  color:#0f172a!important;
  font-size:clamp(30px,3.2vw,44px)!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
}

#input .pfc-v206-income-hero .muted{
  display:block!important;
  max-width:960px!important;
  color:#64748b!important;
  font-size:14px!important;
  line-height:1.55!important;
  font-weight:700!important;
}

#input .pfc-v206-income-mode-panel{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin:10px 0 16px!important;
}

#input .pfc-v206-income-mode-card{
  position:relative!important;
  text-align:left!important;
  min-height:126px!important;
  width:100%!important;
  padding:18px!important;
  border-radius:24px!important;
  border:1px solid rgba(191,219,254,.9)!important;
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.10),transparent 38%),
    linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 16px 38px rgba(15,23,42,.055)!important;
  cursor:pointer!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}

#input .pfc-v206-income-mode-card:hover{
  transform:translateY(-2px)!important;
  border-color:#93c5fd!important;
  box-shadow:0 22px 48px rgba(37,99,235,.12)!important;
}

#input .pfc-v206-income-mode-card.is-selected{
  border-color:#2563eb!important;
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.18),transparent 36%),
    linear-gradient(180deg,#ffffff,#eff6ff)!important;
}

#input .pfc-v206-income-mode-card.is-selected::after{
  content:"Dipilih"!important;
  position:absolute!important;
  top:13px!important;
  right:13px!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:24px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  border:1px solid #bfdbfe!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

#input .pfc-v206-income-mode-card em{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:0 10px!important;
  margin-bottom:12px!important;
  border-radius:999px!important;
  border:1px solid #dbeafe!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  font-style:normal!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
}

#input .pfc-v206-income-mode-card b{
  display:block!important;
  color:#0f172a!important;
  font-size:18px!important;
  letter-spacing:-.02em!important;
  margin-bottom:7px!important;
}

#input .pfc-v206-income-mode-card span{
  display:block!important;
  color:#64748b!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  font-weight:700!important;
}

#input .pfc-v206-income-note,
#input .pfc-v206-income-toolbar{
  padding:13px 15px!important;
  border-radius:18px!important;
  border:1px solid #dbeafe!important;
  background:#f8fbff!important;
  color:#64748b!important;
  font-size:12.5px!important;
  line-height:1.48!important;
  font-weight:700!important;
}

#input .pfc-v206-income-note{
  margin:12px 0!important;
}

#input .pfc-v206-income-note b{
  color:#1d4ed8!important;
}

#input .pfc-v206-income-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:12px 0 16px!important;
}

#input .pfc-v206-income-toolbar span{
  display:block!important;
}

#input .pfc-v206-income-form-grid{
  gap:14px!important;
}

#input .pfc-v206-income-form-grid label{
  padding:14px 15px!important;
  border-radius:20px!important;
  border:1px solid rgba(191,219,254,.9)!important;
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.035), inset 0 1px 0 rgba(255,255,255,.92)!important;
  color:#334155!important;
  font-size:12px!important;
  font-weight:900!important;
}

#input .pfc-v206-income-form-grid input,
#input .pfc-v206-income-form-grid select,
#input .pfc-v206-income-form-grid textarea{
  margin-top:8px!important;
  min-height:44px!important;
  border-radius:16px!important;
  border:1px solid #dbeafe!important;
  background:#ffffff!important;
  box-shadow:none!important;
}

#input .pfc-v206-income-form-grid input:focus,
#input .pfc-v206-income-form-grid select:focus,
#input .pfc-v206-income-form-grid textarea:focus{
  border-color:#60a5fa!important;
  box-shadow:0 0 0 4px rgba(96,165,250,.15)!important;
}

#input .pfc-v206-income-form-grid .btn{
  min-height:46px!important;
  border-radius:16px!important;
}

#input #btnSaveIncome{
  box-shadow:0 16px 34px rgba(37,99,235,.18)!important;
}

@media(max-width:980px){
  #input .pfc-v206-income-mode-panel{
    grid-template-columns:1fr!important;
  }
  #input.pfc-v206-income-page .pfc-v206-income-card{
    padding:18px!important;
    border-radius:26px!important;
  }
}


/* PFC V207 - SIDEBAR SCROLL + AUTO CLOSE FIX */
.sidebar, aside.sidebar, #sidebar{
  height:100vh!important; max-height:100vh!important; overflow:hidden!important;
  display:flex!important; flex-direction:column!important; box-sizing:border-box!important;
}
.sidebar .nav, aside.sidebar .nav, #sidebar .nav,
.sidebar .pfc-v167-nav, aside.sidebar .pfc-v167-nav, #sidebar .pfc-v167-nav{
  flex:1 1 auto!important; min-height:0!important; max-height:none!important;
  overflow-y:auto!important; overflow-x:hidden!important;
  padding-bottom:240px!important; scroll-padding-bottom:240px!important;
  overscroll-behavior:contain!important;
}
.sidebar .userbox, aside.sidebar .userbox, #sidebar .userbox{
  flex:0 0 auto!important; margin-top:auto!important;
}
body.sidebar-open .main, body.sidebar-expanded .main, body.nav-open .main,
.app.sidebar-open .main, .layout.sidebar-open .main{
  transform:none!important; margin-left:0!important;
}
.pfc-v207-overlay-clean,
body:not(.sidebar-open) .sidebar-backdrop,
body:not(.sidebar-open) .mobile-overlay,
body:not(.sidebar-open) .nav-backdrop,
body:not(.sidebar-open) .app-backdrop{
  display:none!important; opacity:0!important; pointer-events:none!important;
}
.pfc-v167-menu-group, .sidebar .pfc-v167-menu-group{ scroll-margin-bottom:160px!important; }
@media(max-width:1100px){
  .sidebar, aside.sidebar, #sidebar{ position:fixed!important; top:0!important; left:0!important; z-index:99990!important; }
  body.sidebar-open .sidebar, body.sidebar-expanded .sidebar, body.nav-open .sidebar{ overflow:hidden!important; }
}


/* =========================================================
   PFC V211 - RO FINAL DIRECT RENDER FIX
   Direct final override from stable baseline.
   ========================================================= */
#po .po-list-table,
#po .po-list-table table,
#po .po-list-table tbody,
#po .po-list-table tr,
#po .po-list-table td{
  overflow:visible!important;
}

#po .po-actions-final{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  position:relative!important;
  min-width:210px!important;
}

#po .po-actions-final .btn.small{
  min-height:34px!important;
  height:34px!important;
  padding:0 12px!important;
  border-radius:13px!important;
  font-size:12px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

#po .po-more-final{
  position:relative!important;
  display:inline-flex!important;
  overflow:visible!important;
}

#po .po-more-final-btn{
  width:40px!important;
  min-width:40px!important;
  padding:0!important;
  font-size:18px!important;
  line-height:1!important;
}

#po .po-more-final-list{
  position:absolute!important;
  top:calc(100% + 7px)!important;
  right:0!important;
  z-index:999999!important;
  width:188px!important;
  min-width:188px!important;
  padding:7px!important;
  border-radius:15px!important;
  border:1px solid #dbeafe!important;
  background:#ffffff!important;
  box-shadow:0 18px 42px rgba(15,23,42,.18)!important;
  display:none!important;
}

#po .po-more-final-list.open{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}

#po .po-more-final-list button{
  width:100%!important;
  height:36px!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 11px!important;
  margin:0!important;
  border:0!important;
  border-radius:11px!important;
  background:#ffffff!important;
  color:#1d4ed8!important;
  box-shadow:none!important;
  text-align:left!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}

#po .po-more-final-list button:hover{
  background:#eff6ff!important;
}

#po .po-list-table th:last-child,
#po .po-list-table td:last-child{
  min-width:220px!important;
}


/* =========================================================
   PFC V212 - RO ACTION MENU MODAL + TABLE ALIGN FIX
   Fix:
   - More menu closes before opening Cetak/Realisasi modal.
   - Action column no longer looks like detached/sticky table.
   ========================================================= */

/* Keep the RO table as one continuous table */
#po .po-list-table{
  border-radius:26px!important;
  overflow:auto!important;
  border:1px solid #dbeafe!important;
  background:#ffffff!important;
}

#po .po-list-table table{
  width:100%!important;
  border-collapse:collapse!important;
  border-spacing:0!important;
  background:#ffffff!important;
}

#po .po-list-table th,
#po .po-list-table td{
  position:static!important;
  background:inherit!important;
  border-bottom:1px solid #e5eefb!important;
  box-shadow:none!important;
  vertical-align:middle!important;
}

#po .po-list-table thead th{
  background:#f8fbff!important;
}

#po .po-list-table tbody tr{
  background:#ffffff!important;
}

#po .po-list-table tbody tr:hover{
  background:#fbfdff!important;
}

/* Specifically neutralize old sticky/action-column styles */
#po .po-list-table th:last-child,
#po .po-list-table td:last-child,
#po td.po-actions,
#po th.po-actions{
  position:static!important;
  right:auto!important;
  left:auto!important;
  background:inherit!important;
  box-shadow:none!important;
  border-left:0!important;
  min-width:220px!important;
}

/* Menu list stays compact, but table cell is not clipped */
#po td.po-actions{
  overflow:visible!important;
}

#po .po-actions-final{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  position:relative!important;
  min-width:210px!important;
  background:transparent!important;
}

#po .po-more-final{
  position:relative!important;
  display:inline-flex!important;
  overflow:visible!important;
}

#po .po-more-final-list{
  position:absolute!important;
  top:calc(100% + 7px)!important;
  right:0!important;
  z-index:999999!important;
  width:188px!important;
  min-width:188px!important;
  padding:7px!important;
  border-radius:15px!important;
  border:1px solid #dbeafe!important;
  background:#ffffff!important;
  box-shadow:0 18px 42px rgba(15,23,42,.18)!important;
}

#po .po-more-final-list.open{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}

#po .po-more-final-list:not(.open){
  display:none!important;
}

/* When realization modal/backdrop is open, force all RO more menus closed visually too */
body.po-modal-open #po .po-more-final-list,
body.modal-open #po .po-more-final-list{
  display:none!important;
}