/* 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}