/* ============================================================================
   PCA — Phase 1 Enhancements: Theme system (Light default / Dark / System),
   modern polish, analytics chart cards, and advanced table tools.
   Scoped mostly to the staff dashboard (#staffWrap) plus a global theme switch.
   ============================================================================ */

/* Smooth theme + motion */
:root{ --pca-ease:cubic-bezier(.22,.61,.36,1); }
#staffWrap, #staffWrap *{ transition:background-color .35s var(--pca-ease), color .35s var(--pca-ease), border-color .35s var(--pca-ease), box-shadow .35s var(--pca-ease); }
@media (prefers-reduced-motion: reduce){ #staffWrap, #staffWrap *{ transition:none !important; } }

/* ── DARK THEME (applied via html[data-theme="dark"]) ──────────────────── */
html[data-theme="dark"] body{ background:#0e0814; }
html[data-theme="dark"] #staffWrap{
  background:
    radial-gradient(900px 500px at 8% -8%, #2a1030 0%, transparent 60%),
    radial-gradient(820px 600px at 100% 0%, #1a1226 0%, transparent 55%),
    linear-gradient(180deg,#140c1d 0%,#0e0814 100%) !important;
  color:#ECE6F2;
}
html[data-theme="dark"] #staffWrap .ssec,
html[data-theme="dark"] #staffWrap .sstat{
  background:rgba(40,24,54,.66) !important; border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 10px 36px rgba(0,0,0,.45) !important; color:#ECE6F2;
}
html[data-theme="dark"] #staffWrap .ssec>h3,
html[data-theme="dark"] #staffWrap .ssec h3{ color:#F3E9FF; border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] #staffWrap .sstat .sv{ -webkit-text-fill-color:initial; background:none; color:#E8B84B; }
html[data-theme="dark"] #staffWrap .sstat .sl{ color:#B8A9CC; }
html[data-theme="dark"] #staffWrap table{ background:rgba(30,18,42,.5) !important; border-color:rgba(255,255,255,.10); }
html[data-theme="dark"] #staffWrap table th{ background:rgba(255,255,255,.06) !important; color:#F3E9FF !important; }
html[data-theme="dark"] #staffWrap table td{ border-color:rgba(255,255,255,.08) !important; color:#E4DAEE; }
html[data-theme="dark"] #staffWrap table tbody tr:hover{ background:rgba(201,150,60,.12) !important; }
html[data-theme="dark"] #staffWrap .rpt-row,
html[data-theme="dark"] #staffWrap .alog-row{ border-color:rgba(255,255,255,.08); color:#E4DAEE; }
html[data-theme="dark"] #staffWrap .rpt-row:hover,
html[data-theme="dark"] #staffWrap .alog-row:hover{ background:rgba(255,255,255,.05); }
html[data-theme="dark"] #staffWrap .empty-st{ color:#B8A9CC; }
html[data-theme="dark"] #staffWrap .pca-toolbar input{ background:rgba(255,255,255,.06); color:#ECE6F2; border-color:rgba(255,255,255,.16); }
html[data-theme="dark"] #userBar{ background:linear-gradient(90deg,#241433,#2a1d12) !important; color:#E4DAEE; }

/* ── THEME SWITCHER ────────────────────────────────────────────────────── */
.pca-theme-switch{
  position:fixed; bottom:18px; left:18px; top:auto; right:auto; z-index:100000; display:flex; gap:4px; padding:5px;
  border-radius:999px; background:rgba(255,255,255,.82); border:1px solid rgba(74,25,66,.15);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 8px 26px rgba(74,25,66,.18); font-family:Inter,Arial,sans-serif;
}
html[data-theme="dark"] .pca-theme-switch{ background:rgba(40,24,54,.88); border-color:rgba(255,255,255,.14); }
.pca-theme-switch button{
  border:none; background:transparent; cursor:pointer; font-size:.72rem; font-weight:600;
  color:#6A6280; padding:6px 11px; border-radius:999px; display:flex; align-items:center; gap:5px;
  transition:all .25s var(--pca-ease);
}
html[data-theme="dark"] .pca-theme-switch button{ color:#B8A9CC; }
.pca-theme-switch button.active{ background:linear-gradient(135deg,#4A1942,#6B2D62); color:#fff; box-shadow:0 4px 12px rgba(74,25,66,.3); }
@media(max-width:760px){ .pca-theme-switch{left:10px;bottom:10px;} }
@media(max-width:560px){ .pca-theme-switch button span{ display:none; } .pca-theme-switch button{ padding:7px 9px; } }

.pca-toast-container{
  position:fixed; top:18px; right:18px; z-index:100001; display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.pca-toast{
  min-width:240px; max-width:320px; padding:14px 16px; border-radius:16px;
  background:rgba(20,14,44,.95); color:#fff; box-shadow:0 20px 40px rgba(0,0,0,.18);
  font-family:Inter,Arial,sans-serif; font-size:.92rem; line-height:1.4; opacity:0; transform:translateY(-10px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:auto;
}
.pca-toast.show{opacity:1; transform:translateY(0);}
.pca-toast.success{background:linear-gradient(135deg,#2D6A4F,#52B788);}
.pca-toast.info{background:linear-gradient(135deg,#3C2A6B,#6B2D62);}
.pca-toast.warn{background:linear-gradient(135deg,#C9963C,#E67E22);}
@media(max-width:640px){ .pca-toast-container{right:12px;left:12px;top:12px;} }


/* ── GLOBAL SEARCH (in staff nav) ──────────────────────────────────────── */
.pca-gsearch{ display:flex; align-items:center; gap:8px; margin:0 8px; flex:1; min-width:160px; max-width:340px; }
.pca-gsearch input{
  width:100%; padding:9px 14px; border-radius:999px; border:1px solid var(--brd);
  font-family:Inter,Arial,sans-serif; font-size:.82rem; background:rgba(255,255,255,.7);
  outline:none; transition:box-shadow .25s var(--pca-ease), border-color .25s;
}
.pca-gsearch input:focus{ border-color:#C9963C; box-shadow:0 0 0 3px rgba(201,150,60,.2); }

/* ── TABLE TOOLS ───────────────────────────────────────────────────────── */
#staffWrap .pca-toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
#staffWrap .pca-toolbar input.pca-tsearch{
  flex:1; min-width:160px; padding:8px 13px; border-radius:10px; border:1px solid var(--brd);
  font-family:Inter,Arial,sans-serif; font-size:.8rem; outline:none;
}
#staffWrap .pca-toolbar .pca-btn{
  border:none; cursor:pointer; border-radius:10px; padding:8px 13px; font-family:Inter,Arial,sans-serif;
  font-size:.74rem; font-weight:600; color:#fff; background:linear-gradient(135deg,#4A1942,#6B2D62);
  transition:transform .2s var(--pca-ease), box-shadow .2s;
}
#staffWrap .pca-toolbar .pca-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(74,25,66,.3); }
#staffWrap .pca-toolbar .pca-btn.csv{ background:linear-gradient(135deg,#2D6A4F,#52B788); }
#staffWrap .pca-tablewrap{ max-height:560px; overflow:auto; border-radius:12px; border:1px solid var(--brd); }
#staffWrap .pca-tablewrap table{ border:none; border-radius:0; }
#staffWrap .pca-tablewrap thead th{ position:sticky; top:0; z-index:3; cursor:pointer; user-select:none; }
#staffWrap .pca-tablewrap thead th::after{ content:"\2195"; opacity:.35; font-size:.8em; margin-left:6px; }
#staffWrap .pca-tablewrap thead th.sort-asc::after{ content:"\2191"; opacity:1; }
#staffWrap .pca-tablewrap thead th.sort-desc::after{ content:"\2193"; opacity:1; }

/* ── ANALYTICS CHART CARDS ─────────────────────────────────────────────── */
#pcaCharts{ display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:20px; }
#pcaCharts .chart-card{
  border:1px solid rgba(255,255,255,.7); border-radius:18px; padding:18px 20px;
  background:rgba(255,255,255,.66); backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%); box-shadow:0 10px 36px rgba(74,25,66,.09);
}
html[data-theme="dark"] #pcaCharts .chart-card{ background:rgba(40,24,54,.66); border-color:rgba(255,255,255,.10); box-shadow:0 10px 36px rgba(0,0,0,.45); }
#pcaCharts .chart-card h4{ font-family:Inter,Arial,sans-serif; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.06em; color:#6A6280; margin:0 0 12px; }
html[data-theme="dark"] #pcaCharts .chart-card h4{ color:#B8A9CC; }
#pcaCharts .chart-wrap{ position:relative; height:240px; }
#pcaCharts .chart-full{ grid-column:1 / -1; }
@media(max-width:820px){ #pcaCharts{ grid-template-columns:1fr; } }

/* KPI trend chips (used by analytics row) */
.pca-trend{ display:inline-flex; align-items:center; gap:3px; font-size:.7rem; font-weight:700;
  padding:2px 8px; border-radius:999px; margin-left:6px; }
.pca-trend.up{ color:#1a7f37; background:rgba(45,106,79,.12); }
.pca-trend.down{ color:#b3261e; background:rgba(192,57,43,.12); }

/* Skeleton shimmer (loading) */
.pca-skel{ background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size:400% 100%;
  animation:pcaShimmer 1.3s ease infinite; border-radius:8px; }
@keyframes pcaShimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }