/* =====================================================================
   PAI FLOW THEME — shared layer for every Prioriti AI app page.
   Mirrors the Orchestration (prompt.html) design: graphite + slate,
   orange as the single accent, indigo/blue as data accents, light Inter,
   hairline rules, outlined white icons, teal→indigo dot-wave background.
   Loaded last in <head>; js/pai-flow-theme.js draws the wave.
   Scope: body.pf-theme (added in the page markup).
   ===================================================================== */
:root{
  --pf-bg:#0B0E13; --pf-bg2:#141C28; --pf-bg3:#1B2432; --pf-bg4:#26303F;
  --pf-ink:#F2F5F9; --pf-ink2:#C9D2DC; --pf-mute:#8C99A8; --pf-dim:#6A7788;
  --pf-line:rgba(201,210,220,.12); --pf-line2:rgba(201,210,220,.22);
  --pf-orange:#FF6B00; --pf-orange2:#FF9933; --pf-orange3:#FFB066;
  --pf-indigo:#5468F2; --pf-blue:#2B8BE6; --pf-teal:#2EC4B6;
  --pf-ease:cubic-bezier(.2,.8,.2,1);
}
html:has(body.pf-theme){background:var(--pf-bg)!important}
html body.pf-theme{
  /* re-point common page variables at the PAI palette */
  --bg:#0B0E13; --surface:#141C28; --surface2:#1B2432; --surface3:#26303F;
  --border:rgba(201,210,220,.12); --border2:rgba(201,210,220,.22);
  --accent:#FF6B00; --accent2:#D9580A; --primary:#FF6B00; --primary-2:#FF9933;
  --accent-color:#FF6B00; --accent-color-light:#FF9933; --accent-color-dark:#D9580A;
  --text:#F2F5F9; --text2:#8C99A8; --text3:#6A7788; --muted:#8C99A8;
  --text-primary:#F2F5F9; --text-secondary:#8C99A8;
  --accent-blue:#2B8BE6; --accent-purple:#5468F2; --purple:#5468F2; --orange:#FF6B00; --orange2:#FF9933;
  --panel:#141C28; --panel-2:#1B2432;
  --gradient:linear-gradient(135deg,#FF6B00,#FF9933);
  --grad:linear-gradient(135deg,#FF6B00,#FF9933);
  --grad-primary:linear-gradient(135deg,#FF6B00,#FF9933);
  --sans:'Inter',system-ui,sans-serif;
  background:transparent!important;
  color:var(--pf-ink);
  color-scheme:dark;
  font-family:'Inter',system-ui,-apple-system,sans-serif!important;
  font-weight:300;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  scrollbar-width:thin;scrollbar-color:#3A4658 transparent;
}
/* light Inter everywhere (icons and code keep their own faces) */
html body.pf-theme :where(h1,h2,h3,h4,h5,h6,p,span,div,a,li,td,th,label,button,input,select,textarea,small,strong,b,em){
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
html body.pf-theme :is(code,pre,kbd,samp,.mono,[class*="mono"]){font-family:'IBM Plex Mono',ui-monospace,monospace!important}
html body.pf-theme h1{font-weight:200!important;letter-spacing:-.02em}
html body.pf-theme h2{font-weight:300!important;letter-spacing:-.01em}
html body.pf-theme h3{font-weight:400!important}
html body.pf-theme :is(h4,h5,h6,th,strong,b){font-weight:500!important}
html body.pf-theme ::selection{background:rgba(255,107,0,.35);color:#fff}
html body.pf-theme ::-webkit-scrollbar{width:8px;height:8px}
html body.pf-theme ::-webkit-scrollbar-track{background:transparent}
html body.pf-theme ::-webkit-scrollbar-thumb{background:#3A4658;border-radius:4px}
html body.pf-theme ::-webkit-scrollbar-thumb:hover{background:#4A576B}

/* ---------------- background dot-wave ---------------- */
#pfWave{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:-1;opacity:.85}
@media print{#pfWave{display:none}}

/* ---------------- icons: one family, outlined, white ---------------- */
html body.pf-theme .material-icons,
html body.pf-theme .material-icons-round,
html body.pf-theme .material-icons-sharp,
html body.pf-theme .material-icons-two-tone,
html body.pf-theme .material-icons-outlined{
  font-family:'Material Icons Outlined'!important;font-weight:normal!important;font-style:normal!important;
  letter-spacing:normal!important;text-transform:none!important;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga'!important;font-feature-settings:'liga'!important;
}
html body.pf-theme :is(.material-icons,.material-icons-outlined,.material-icons-round,.material-icons-sharp,.material-symbols-outlined){
  color:#fff!important;-webkit-text-fill-color:#fff!important;background-clip:border-box!important;-webkit-background-clip:border-box!important;
}

/* ---------------- top bar (pai-header.js header, Orchestration pattern) ---------------- */
html body.pf-theme .pai-hd{
  background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
  padding:16px 24px!important;min-height:0!important;gap:12px;
}
html body.pf-theme .pai-hd.pf-hd{display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:nowrap!important;grid-template-columns:none!important}
html body.pf-theme .pai-hd.pf-hd > .pf-titlewrap{margin-right:auto!important;flex:0 1 auto;min-width:0;text-align:left!important;position:static!important;transform:none!important;left:auto!important}
html body.pf-theme .pai-hd.pf-hd > :not(.pf-lead):not(.pf-titlewrap){flex:none}
html body.pf-theme .pf-lead .pf-logolink{display:flex;align-items:center;border:0!important;background:none!important;width:auto!important;height:auto!important;border-radius:0!important;padding:0!important}
html body.pf-theme .pai-hd.pai-hd-card{border:0!important;background:transparent!important;margin:0 0 8px!important}
html body.pf-theme .pai-hd .pai-hd-menu{display:none!important}
html body.pf-theme .pf-lead{display:flex;align-items:center;gap:12px;flex:none;margin-right:4px}
html body.pf-theme .pf-lead .pf-logo{height:24px!important;width:auto!important;display:block}
html body.pf-theme .pf-sep{width:1px;height:22px;background:var(--pf-line);flex:none}
html body.pf-theme .pai-hd .pai-hd-title{
  font:500 11px/1.3 Inter,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase!important;
  color:var(--pf-mute)!important;-webkit-text-fill-color:var(--pf-mute)!important;background:none!important;margin:0!important;
}
html body.pf-theme .pai-hd .pai-hd-title *{-webkit-text-fill-color:var(--pf-mute)!important;color:var(--pf-mute)!important}
html body.pf-theme .pai-hd .pai-hd-sub{font-size:12px!important;color:var(--pf-dim)!important;-webkit-text-fill-color:var(--pf-dim)!important;letter-spacing:.02em}
html body.pf-theme .pf-ibtn{
  width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border-radius:50%!important;
  display:inline-grid!important;place-items:center;border:1px solid var(--pf-line)!important;background:transparent!important;
  color:#fff!important;box-shadow:none!important;position:relative;flex:none;transform:none!important;cursor:pointer;
  transition:background .2s,border-color .2s;
}
html body.pf-theme .pf-ibtn:hover{background:rgba(255,255,255,.06)!important;border-color:var(--pf-line2)!important}
html body.pf-theme .pf-ibtn :is(.material-icons,.material-icons-outlined){font-size:19px!important;margin:0!important}
html body.pf-theme .pai-hd .pf-hbtn{
  height:36px!important;padding:0 14px!important;border-radius:999px!important;border:1px solid var(--pf-line)!important;
  background:transparent!important;color:#fff!important;box-shadow:none!important;font:500 13px Inter,sans-serif!important;
  display:inline-flex!important;align-items:center;gap:8px;white-space:nowrap;transform:none!important;
}
html body.pf-theme .pai-hd .pf-hbtn:hover{border-color:rgba(255,107,0,.55)!important;background:rgba(255,107,0,.06)!important}
html body.pf-theme .pai-hd .pf-hbtn :is(.material-icons,.material-icons-outlined){font-size:17px!important}
html body.pf-theme .pai-hd .pf-hbtn.pf-cta{border-color:var(--pf-orange)!important;background:var(--pf-orange)!important}
html body.pf-theme .pf-live{
  display:inline-flex!important;align-items:center;gap:7px;background:transparent!important;border:0!important;box-shadow:none!important;
  font:500 11px Inter,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase;color:var(--pf-mute)!important;padding:0 6px!important;
}
html body.pf-theme .pai-hd .pf-avatar-img{width:34px!important;height:34px!important;border-radius:50%!important;border:1px solid var(--pf-line2)!important;object-fit:cover}
html body.pf-theme .pf-apps-float{position:fixed!important;top:14px;left:14px;z-index:58;background:rgba(11,14,19,.7)!important}

/* ---------------- sidebar -> apps overlay (same as Orchestration) ---------------- */
html body.pf-theme .sidebar:not(#pfNav .sidebar){display:none!important}
#pfNav{position:fixed;inset:0;z-index:9000;background:rgba(6,8,12,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s}
#pfNav.show{opacity:1;pointer-events:auto}
#pfNav .pf-navpanel{position:absolute;top:64px;left:24px;bottom:24px;width:320px;max-width:calc(100vw - 32px);overflow-y:auto;padding:12px;border-radius:18px;background:rgba(20,28,40,.97);border:1px solid var(--pf-line2);transform:translateY(-8px);transition:transform .3s var(--pf-ease);scrollbar-width:thin;scrollbar-color:#3A4658 transparent}
#pfNav.show .pf-navpanel{transform:none}
html body.pf-theme #pfNav .sidebar{position:static!important;width:auto!important;min-width:0!important;max-width:none!important;flex:none!important;height:auto!important;min-height:0!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;overflow:visible!important;display:block!important;left:auto!important;top:auto!important}
html body.pf-theme #pfNav .sidebar-header,html body.pf-theme #pfNav .pai-sb-toggle{display:none!important}
html body.pf-theme #pfNav nav{padding:0!important}
html body.pf-theme #pfNav .nav-item{display:flex!important;align-items:center;gap:12px!important;width:100%!important;padding:9px 10px!important;margin:0!important;border-radius:10px!important;border:0!important;background:none!important;color:var(--pf-ink2)!important;font:400 14px Inter,sans-serif!important;text-align:left;cursor:pointer;box-shadow:none!important;transform:none!important}
html body.pf-theme #pfNav .nav-item:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
html body.pf-theme #pfNav :is(.nav-item.active,.nav-item.active-page,.nav-item.pai-current){background:rgba(255,107,0,.12)!important;color:#fff!important}
html body.pf-theme #pfNav .nav-item:before{display:none!important}
html body.pf-theme #pfNav .nav-item > :is(.material-icons,.material-icons-outlined){font-size:19px!important;margin:0!important;opacity:.85}
html body.pf-theme #pfNav .nav-subitems{padding-left:10px!important;background:none!important;border:0!important}
html body.pf-theme #pfNav :is(.nav-text,.nav-item > span:not([class])){display:inline!important;opacity:1!important}
html body.pf-theme #pfNav :is(.expand-icon,.section-arrow,.pai-tm-chev){margin-left:auto!important;color:var(--pf-mute)!important}
html body.pf-theme #pfNav :is(.step,.nav-badge,.step-num){display:inline!important;margin-left:auto;color:var(--pf-dim)!important}
html body.pf-theme #pfNav :is(.nav-group,.nav-section-title,.sidebar-label,.pai-sb-group,.nav-group-label,.nav-label,.sidebar-section-title){font-size:10.5px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--pf-dim)!important;padding:14px 10px 4px!important;font-weight:500!important}
html body.pf-theme #pfNav .pai-tm .pai-tm-kids{border-left:1px solid var(--pf-line2)!important;margin-left:20px!important}

/* ---------------- surfaces & accents classified by pai-flow-theme.js ---------------- */
html body.pf-theme .pf-surface{
  background:rgba(20,28,40,.55)!important;background-image:none!important;
  border:1px solid var(--pf-line)!important;box-shadow:none!important;
}
html body.pf-theme .pf-surface .pf-surface{background:rgba(255,255,255,.025)!important}
html body.pf-theme .pf-ghost{
  background:transparent!important;background-image:none!important;border:1px solid var(--pf-line2)!important;
  color:var(--pf-ink)!important;box-shadow:none!important;
}
html body.pf-theme .pf-ghost:hover{border-color:rgba(255,107,0,.55)!important;background:rgba(255,107,0,.08)!important;color:#fff!important}
html body.pf-theme .pf-ghost:is(.active,.selected,.on,.is-active,[aria-selected="true"],[aria-pressed="true"]){border-color:var(--pf-orange)!important;background:rgba(255,107,0,.12)!important;color:#fff!important}
html body.pf-theme .pf-cta{background:var(--pf-orange)!important;background-image:none!important;border-color:var(--pf-orange)!important;color:#fff!important;box-shadow:0 8px 24px rgba(255,107,0,.28)!important}
html body.pf-theme .pf-tile{background:transparent!important;background-image:none!important;border:1px solid var(--pf-line2)!important;box-shadow:none!important}
html body.pf-theme .pf-tag{background:rgba(84,104,242,.14)!important;background-image:none!important;border:1px solid rgba(84,104,242,.28)!important;color:#C3CBFB!important;box-shadow:none!important}
html body.pf-theme .pf-band{background:transparent!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--pf-line)!important;box-shadow:none!important}

/* ---------------- buttons: orange is the primary action ---------------- */
html body.pf-theme :is(.btn-primary,.primary-btn,.button-primary,.btn.primary,button.primary,.cta-button,.btn-cta,.action-btn.primary,.submit-btn,.save-btn,.btn-save,.btn-submit,[class*="-btn-primary"],[class*="-primary-btn"]){
  background:var(--pf-orange)!important;border-color:var(--pf-orange)!important;color:#fff!important;
  box-shadow:0 8px 24px rgba(255,107,0,.28)!important;font-weight:500!important;
}
html body.pf-theme :is(.btn-primary,.primary-btn,.button-primary,.btn.primary,button.primary,.cta-button,.btn-cta,.action-btn.primary,.submit-btn,.save-btn,.btn-save,.btn-submit,[class*="-btn-primary"],[class*="-primary-btn"]):hover{
  background:#FF7A1A!important;box-shadow:0 12px 30px rgba(255,107,0,.4)!important;
}
html body.pf-theme :is(.btn-secondary,.secondary-btn,.btn-outline,.btn-ghost,.btn.secondary,button.secondary){
  background:transparent!important;border:1px solid var(--pf-line2)!important;color:var(--pf-ink)!important;box-shadow:none!important;
}
html body.pf-theme :is(.btn-secondary,.secondary-btn,.btn-outline,.btn-ghost,.btn.secondary,button.secondary):hover{
  border-color:rgba(255,107,0,.55)!important;background:rgba(255,107,0,.08)!important;color:#fff!important;
}

/* ---------------- big numbers: light, tabular (like the Orchestration stats) ---------------- */
html body.pf-theme :is([class*="kpi-value"],[class*="stat-value"],[class*="metric-value"],[class*="kpi-number"],[class*="stat-number"],[class*="big-number"],[class*="kpi-val"],.stat .n,.kpi-num){
  font-weight:200!important;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}

/* ---------------- tabs / chips / pills ---------------- */
html body.pf-theme :is(.tab,.tab-btn,.tab-button,.nav-tab,.view-tab,.view-btn,.toggle-btn,.filter-btn,.segment-btn).active{
  color:#fff!important;border-color:var(--pf-orange)!important;
}
html body.pf-theme :is(.chip,.pill,.tag,.filter-chip).active{border-color:var(--pf-orange)!important;background:rgba(255,107,0,.12)!important;color:#fff!important}

/* ---------------- surfaces: hairline rules ---------------- */
html body.pf-theme :is(.card,.panel,.widget,.kpi-card,.metric-card,.stat-card,.summary-card,.chart-card,.chart-container,.dashboard-card,.content-card,.glass-card,.section-card,.tool-card,.info-card,.module-card){
  border-color:var(--pf-line)!important;
}
html body.pf-theme hr{border:0;border-top:1px solid var(--pf-line)}
html body.pf-theme table :is(th,td){border-color:var(--pf-line)!important}
html body.pf-theme table th{color:var(--pf-mute)!important;letter-spacing:.08em}

/* ---------------- form fields ---------------- */
html body.pf-theme :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
  border-color:var(--pf-line2);
}
html body.pf-theme :is(input,select,textarea):focus{
  outline:none!important;border-color:rgba(255,107,0,.6)!important;box-shadow:0 0 0 4px rgba(255,107,0,.1)!important;
}
html body.pf-theme input[type=checkbox],html body.pf-theme input[type=radio],html body.pf-theme input[type=range],html body.pf-theme progress{accent-color:var(--pf-orange)}

/* ---------------- modals ---------------- */
html body.pf-theme :is(.modal-content,.modal-box,.modal-dialog,.dialog,.modal-container){
  background:linear-gradient(180deg,rgba(20,28,40,.97),rgba(14,19,27,.98))!important;
  border:1px solid var(--pf-line2)!important;box-shadow:0 30px 80px rgba(0,0,0,.5)!important;
}

/* ---------------- Pria chat launcher (pria-widget.js) ---------------- */
html body.pf-theme :is(.chatbot-toggle,.chatbot-trigger,.chat-toggle,.pria-fab,#priaFab,.chatbot-button,.chat-fab){
  background:var(--pf-orange)!important;box-shadow:0 10px 30px rgba(255,107,0,.35)!important;border:0!important;
}
html body.pf-theme .chatbot-window{background:linear-gradient(180deg,rgba(20,28,40,.97),rgba(14,19,27,.98))!important;border:1px solid var(--pf-line2)!important}
html body.pf-theme .chatbot-header{background:transparent!important;border-bottom:1px solid var(--pf-line)!important}

@media print{
  html body.pf-theme{background:#fff!important;color:#0d0f14}
}
html body.pf-theme .pai-hd.pf-hd > *,html body.pf-theme .pf-lead > *{position:static!important;transform:none!important;left:auto!important;right:auto!important;margin-top:0!important;margin-bottom:0!important}
html body.pf-theme .pf-surface.pf-solid{background:linear-gradient(180deg,rgba(20,28,40,.98),rgba(14,19,27,.98))!important;border-color:var(--pf-line2)!important;box-shadow:0 30px 80px rgba(0,0,0,.5)!important}
/* the dot-wave replaces the old image backdrop */
html body.pf-theme .background-pattern{display:none!important}
html body.pf-theme #pfNav a.nav-item{text-decoration:none!important}
html body.pf-theme .pf-topbar{position:relative;z-index:30;display:flex;align-items:center;gap:12px;padding:16px 24px}
html body.pf-theme .pf-topbar .pf-logo{height:24px;display:block}
html body.pf-theme .pf-bartitle{font:500 11px/1.3 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pf-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.pf-theme .pf-apps-inline{margin-right:12px;vertical-align:middle}
html body.pf-theme .pf-topbar.pf-topbar-abs{position:absolute!important;top:0;left:0;right:0}