:root{
  --pf-primary:#15184a;
  --pf-primary-2:#0f123f;
  --pf-bg:#f5f6fa;
  --pf-card:#ffffff;
  --pf-border:#e6e8ef;
  --pf-text:#141824;
  --pf-muted:#6b7280;
  --pf-success:#1f9d40;
  --pf-danger:#dc2626;
  --pf-warning:#d97706;
}

html,body{ height:100%; }
body{
  background:var(--pf-bg);
  color:var(--pf-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

/* ── TOPBAR ── */
.pf-topbar{
  background:linear-gradient(90deg,var(--pf-primary) 0%,var(--pf-primary-2) 100%);
  box-shadow:0 2px 12px rgba(0,0,0,.10);
}
.pf-brand-dot{
  display:inline-block;
  width:10px;height:10px;
  border-radius:50%;
  background:#fff;
  margin-right:.5rem;
  box-shadow:0 0 0 4px rgba(255,255,255,.15);
}
.navbar .nav-link{ cursor:pointer; }
.navbar .nav-link.active{
  font-weight:700;
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:6px;
}

/* ── SHELL ── */
.pf-shell{ padding-top:1.25rem; padding-bottom:2.5rem; }
.pf-page{ background:transparent; }

.pf-page-header{
  background:var(--pf-card);
  border:1px solid var(--pf-border);
  border-radius:12px;
  padding:1.15rem 1.25rem;
  margin-bottom:1rem;
  box-shadow:0 6px 20px rgba(17,24,39,.05);
  overflow: visible;        /* ← ADD */
  position: relative;       /* ← ADD */
  z-index: 10;              /* ← ADD */
}
.pf-muted{ color:var(--pf-muted); }

/* ── CARDS ── */
.card{
  border:1px solid var(--pf-border);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(17,24,39,.05);
}
.card-header{
  border-bottom:1px solid var(--pf-border);
  border-top-left-radius:12px !important;
  border-top-right-radius:12px !important;
}

/* ── STAT CARDS ── */
.pf-stat .card-body{ padding:1.15rem 1.1rem; }
.pf-stat-icon{
  width:42px;height:42px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(21,24,74,.08);
  color:var(--pf-primary);
  font-size:1.1rem;
}
.pf-stat-icon.green{ background:rgba(31,157,64,.10); color:var(--pf-success); }
.pf-stat-icon.red  { background:rgba(220,38,38,.10);  color:var(--pf-danger); }
.pf-stat-icon.amber{ background:rgba(217,119,6,.10);  color:var(--pf-warning); }
.pf-stat-value{
  font-size:1.55rem;
  font-weight:750;
  letter-spacing:.2px;
  margin-top:.25rem;
}

/* ── QUICK ACTIONS ── */
.pf-quick{
  border:1px solid var(--pf-border);
  transition:transform .15s ease,box-shadow .15s ease;
}
.pf-quick:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(17,24,39,.08);
}
.pf-quick-ic{
  width:38px;height:38px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(21,24,74,.08);
  color:var(--pf-primary);
}

/* ── TABLES ── */
.table thead th{ font-weight:650; white-space:nowrap; }
.table td{ vertical-align:middle; }
.badge.pf-badge{ font-weight:650; letter-spacing:.2px; }

/* ── PERIOD TABS ── */
.pf-period-tabs{
  display:inline-flex;
  background:#f0f1f5;
  border-radius:8px;
  padding:3px;
  gap:2px;
}
.pf-period-tab{
  border:none;background:none;
  font-size:12.5px;font-weight:500;
  padding:5px 13px;border-radius:6px;
  color:var(--pf-muted);cursor:pointer;
  font-family:inherit;transition:all .12s;
}
.pf-period-tab.active{
  background:#fff;color:var(--pf-primary);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  font-weight:600;
}

/* ── CHART ── */
.pf-chart-wrap{ position:relative; height:220px; }

/* ── BREAKDOWN TABLE ── */
.pf-breakdown{ width:100%;border-collapse:collapse; }
.pf-breakdown thead th{
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--pf-muted);
  padding:0 10px 9px;
  border-bottom:1px solid var(--pf-border);
  text-align:left;
}
.pf-breakdown thead th:not(:first-child){ text-align:right; }
.pf-breakdown tbody td{
  padding:9px 10px;font-size:13px;
  color:#374151;border-bottom:1px solid #f3f4f6;
}
.pf-breakdown tbody td:not(:first-child){
  text-align:right;font-family:monospace;font-size:12.5px;
}
.pf-breakdown tbody tr:last-child td{ border-bottom:none; }
.pf-breakdown tbody tr:hover td{ background:#f9faff; }

/* ── RESP CELL ── */
td.pf-resp{
  max-width:160px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  cursor:default;position:relative;
}
td.pf-resp:hover::after{
  content:attr(data-full);
  position:absolute;left:0;top:100%;z-index:200;
  background:#1f2937;color:#fff;
  padding:7px 11px;border-radius:7px;
  font-size:12px;white-space:normal;
  max-width:260px;line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

/* ── LOGIN PAGE ── */
.pf-login-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--pf-primary) 0%,var(--pf-primary-2) 60%,#1a1d5e 100%);
}
.pf-login-card{
  width:100%;max-width:400px;
  background:#fff;border-radius:16px;
  padding:40px 36px;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.pf-login-logo{ display:flex;align-items:center;gap:10px;margin-bottom:28px; }
.pf-login-logo-icon{
  width:36px;height:36px;border-radius:9px;
  background:var(--pf-primary);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;
}
.pf-login-logo-name{ font-size:15px;font-weight:700;color:var(--pf-primary);letter-spacing:-.2px; }
.pf-login-title{ font-size:21px;font-weight:700;margin-bottom:3px;letter-spacing:-.3px; }
.pf-login-sub  { font-size:13px;color:var(--pf-muted);margin-bottom:24px; }

.pf-pass-wrap{ position:relative; }
.pf-pass-toggle{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  cursor:pointer;color:var(--pf-muted);font-size:13px;
  background:none;border:none;padding:0;
}
.pf-err{
  display:none;font-size:12.5px;
  color:#991b1b;background:#fef2f2;
  padding:8px 12px;border-radius:8px;margin-top:10px;
}
.pf-suc{
  display:none;font-size:12.5px;
  color:#065f46;background:#ecfdf5;
  padding:8px 12px;border-radius:8px;margin-top:10px;
}
.pf-forgot-link{ font-size:12px;color:var(--pf-primary);cursor:pointer; }
.pf-forgot-link:hover{ text-decoration:underline; }

/* ── PROFILE CARD ── */
.pf-profile-row{
  display:flex;align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--pf-border);
  font-size:13.5px;
}
.pf-profile-row:last-child{ border-bottom:none; }
.pf-profile-label{ width:160px;color:var(--pf-muted);font-weight:500;flex-shrink:0; }
.pf-profile-value{ color:var(--pf-text);font-weight:500; }

/* ── FORMS ── */
.form-control,.form-select,.input-group-text{
  border-radius:10px;border-color:var(--pf-border);
}
.form-control:focus,.form-select:focus{
  border-color:var(--pf-primary);
  box-shadow:0 0 0 3px rgba(21,24,74,.10);
}
.btn{ border-radius:10px; }

/* ── DATATABLES ── */
div.dataTables_wrapper{ width:100%; }
.dt-container .dt-search input,
.dt-container .dt-length select{
  border-radius:10px;border:1px solid var(--pf-border);
}

/* ── FOOTER ── */
.pf-footer{ margin-top:1.25rem;padding:1rem 0 0; }

/* ── LOADER ── */
#pfLoader {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: opacity .25s ease;
}
#pfLoader.hide {
  opacity: 0;
  pointer-events: none;
}
.pf-spinner {
  width: 42px; height: 42px;
  border: 3px solid var(--pf-border);
  border-top-color: var(--pf-primary);
  border-radius: 50%;
  animation: pfSpin .7s linear infinite;
}
.pf-loader-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--pf-muted);
  letter-spacing: .2px;
}
@keyframes pfSpin {
  to { transform: rotate(360deg); }
}
.pf-page-header {
  overflow: visible;
}