/* Front styles – PJODP */
.pjodp-widget{
  border: 1px solid #d0d7de;
  border-radius: 18px;
  padding: 14px;
  background:#fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.04);
  margin: 18px 0;
}
.pjodp-widget-head{ display:flex; flex-direction:column; gap:6px; margin-bottom: 10px; }
.pjodp-widget-title{ font-size: 18px; font-weight: 750; letter-spacing:-0.2px; }
.pjodp-widget-sub{ color:#57606a; font-size: 13px; }
.pjodp-api-link{ margin-left: 6px; font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(11,116,222,.35); color:#0b74de; }
.pjodp-api-link:hover{ border-bottom-color: rgba(11,116,222,.85); }
.pjodp-muted{ color:#57606a; }
.pjodp-sections{ margin-top: 10px; }
.pjodp-section-tabs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-bottom: 12px;
}
.pjodp-tab-btn{
  border: 1px solid #d0d7de;
  background: linear-gradient(180deg,#ffffff,#f6f8fa);
  border-radius: 16px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 800;
  text-align:center;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.pjodp-tab-btn:hover{ transform: translateY(-1px); }
.pjodp-tab-btn.pjodp-active{
  background: linear-gradient(135deg,#0b74de,#0b4dde);
  color:#fff;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(11,116,222,0.25);
}
@media (max-width: 720px){
  .pjodp-section-tabs{ grid-template-columns: 1fr; }
}
.pjodp-section-panel{ display:none; }
.pjodp-section-panel.pjodp-active{ display:block; }

.pjodp-tabbed{ border:1px solid #eef1f4; border-radius: 16px; padding: 12px; background:#fbfcfd; }
.pjodp-inner-tabs{ display:flex; gap:8px; margin-bottom: 10px; }
.pjodp-inner-tab{
  border: 1px solid #d0d7de;
  background:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  font-weight: 850;
}
.pjodp-inner-tab.pjodp-active{
  background:#0b74de;
  color:#fff;
  border-color:#0b74de;
}
.pjodp-view{ display:none; }
.pjodp-view.pjodp-active{ display:block; }

.pjodp-table-responsive{ overflow:auto; border-radius: 12px; }
.pjodp-front-table{ width:100%; border-collapse: collapse; background:#fff; border-radius: 12px; overflow:hidden; }
.pjodp-front-table th, .pjodp-front-table td{ padding: 10px 12px; border-bottom: 1px solid #eef1f4; text-align:left; }
.pjodp-front-table th{ background:#f6f8fa; font-weight: 750; }
.pjodp-front-table tr:last-child td{ border-bottom:none; }
.pjodp-chart-note{ margin-top: 8px; font-size: 12px; color:#57606a; }
.pjodp-chart-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.pjodp-chart-type{border:1px solid #d0d7de;border-radius:12px;padding:6px 10px;background:#fff;}

.pjodp-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0;}
@media (max-width: 900px){ .pjodp-summary-grid{grid-template-columns:1fr;} }
.pjodp-summary-box{border:1px solid #eef1f4;border-radius:18px;padding:12px;background:linear-gradient(180deg,#ffffff,#f7faff);box-shadow:0 8px 20px rgba(0,0,0,0.03);}
.pjodp-summary-label{font-weight:900;margin-bottom:6px;letter-spacing:-0.2px;}
.pjodp-summary-metrics{display:grid;gap:4px;}
.pjodp-empty{ background:#fff8c5; border-color:#d4a72c; }
.pjodp-empty-inline{ padding: 10px; color:#57606a; }

/* KPI dashboard (modern boksiki) */
.pjodp-kpi-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:12px 0 14px;}
@media (max-width: 1100px){ .pjodp-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width: 720px){ .pjodp-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 420px){ .pjodp-kpi-grid{grid-template-columns:1fr;} }

.pjodp-kpi{
  position:relative;
  border:1px solid #e6ebf2;
  border-radius:20px;
  padding:12px;
  background: radial-gradient(1200px 200px at 20% 0%, rgba(11,116,222,.10), transparent 60%),
              linear-gradient(180deg,#ffffff,#f7faff);
  box-shadow: 0 10px 26px rgba(0,0,0,0.04);
  overflow:hidden;
}
.pjodp-kpi:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(11,116,222,.22), rgba(11,77,222,.10), transparent 60%);
  opacity:.35;
}
.pjodp-kpi-label{position:relative;font-size:12px;font-weight:900;letter-spacing:.2px;color:#57606a;text-transform:uppercase;}
.pjodp-kpi-value{position:relative;margin-top:6px;font-size:22px;font-weight:950;letter-spacing:-0.4px;line-height:1.1;}
.pjodp-kpi-hint{position:relative;margin-top:6px;font-size:12px;color:#57606a;}

/* Period selector (range/month) */
.pjodp-period{margin:10px 0 14px;}
.pjodp-period-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.pjodp-period label{font-weight:700;}
.pjodp-period-range{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.pjodp-period-field{display:flex;flex-direction:column;gap:4px;}
.pjodp-period-field-label{font-size:12px;font-weight:800;color:#57606a;letter-spacing:.1px;}
.pjodp-select{border:1px solid #d0d7de;border-radius:12px;padding:6px 10px;background:#fff;min-width:96px;max-width:200px;font-size:13px;width:auto !important;display:inline-block;}
.pjodp-select-compact{min-width:96px;max-width:140px;padding:5px 8px;font-size:12px;}
.pjodp-btn{border:1px solid #d0d7de;border-radius:14px;padding:8px 12px;cursor:pointer;font-weight:800;background:#fff;}
.pjodp-btn-compact{padding:8px 14px;}
.pjodp-btn-primary{background:linear-gradient(135deg,#0b74de,#0b4dde);color:#fff;border-color:transparent;}
.pjodp-period-hint{margin-top:6px;font-size:12px;}

@media (max-width: 640px){
  .pjodp-period-row{align-items:stretch;}
  .pjodp-select-compact{min-width:0;max-width:100%;width:100% !important;}
  .pjodp-btn-compact{width:100%;}
}

/* Modal – API docs */
.pjodp-modal{ position: fixed; inset: 0; display: none; z-index: 9999; }
.pjodp-modal.pjodp-open{ display: block; }
.pjodp-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.55); }
.pjodp-modal-dialog{ position: relative; max-width: 920px; width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: auto; margin: 12px auto; background:#fff; border-radius: 22px; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.pjodp-modal-close{ position: sticky; top: 0; float:right; margin: 10px 10px 0 0; border:1px solid #d0d7de; background:#fff; width: 38px; height: 38px; border-radius: 14px; font-size: 22px; font-weight: 900; cursor:pointer; }
.pjodp-modal-body{ padding: 16px; }
.pjodp-modal-footer{ padding: 0 16px 16px; }
.pjodp-api-docs h2{ margin: 0 0 10px; }
.pjodp-api-docs h3{ margin: 18px 0 8px; }
.pjodp-api-docs code{ padding: 2px 6px; border-radius: 10px; background: #f6f8fa; }
.pjodp-api-docs .pjodp-api-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (max-width: 720px){ .pjodp-api-docs .pjodp-api-grid{ grid-template-columns: 1fr; } }