/* The page header every page shares (heroHead in app.js): an icon tile, where you are, the title, one line about
   the page, and its actions. Loaded after every other stylesheet so it replaces the older .page-head, .we-head and
   .cm-page-head looks. Tones: default CRM indigo, .wa WhatsApp green, .ai AI Campaigner violet, .set settings slate. */

.page-head.ph{
  --ph-grad:linear-gradient(135deg,#7476ff 0%,#4c4ce0 55%,#3434b8 100%);--ph-shadow:rgba(76,76,224,.45);--ph-glow:rgba(116,118,255,.14);--ph-crumb:#5b5bd6;
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;
  margin:0 0 22px;padding:20px 24px;background:#fff;border:1px solid #e3e6f3;border-radius:20px;
  box-shadow:0 1px 2px rgba(9,29,66,.04),0 12px 32px -22px rgba(9,29,66,.35)
}
.page-head.ph::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px 180px at 100% -20%,var(--ph-glow),transparent 70%),radial-gradient(280px 120px at 0% 120%,rgba(25,199,195,.06),transparent 70%)}
.page-head.ph.wa{--ph-grad:linear-gradient(135deg,#3ddc97 0%,#16a34a 55%,#0b7f55 100%);--ph-shadow:rgba(22,163,74,.42);--ph-glow:rgba(37,211,102,.13);--ph-crumb:#0f8a5f}
.page-head.ph.ai{--ph-grad:linear-gradient(135deg,#b07bff 0%,#7c3aed 55%,#5521b5 100%);--ph-shadow:rgba(124,58,237,.42);--ph-glow:rgba(168,85,247,.13);--ph-crumb:#7c3aed}
.page-head.ph.set{--ph-grad:linear-gradient(135deg,#7b8aa6 0%,#475569 55%,#1f2b44 100%);--ph-shadow:rgba(51,65,85,.4);--ph-glow:rgba(100,116,139,.12);--ph-crumb:#475569}

.page-head.ph .ph-main{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 380px}
.page-head.ph .ph-icon{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--ph-grad);
  box-shadow:0 10px 20px -10px var(--ph-shadow),inset 0 1px 0 rgba(255,255,255,.28)}
.page-head.ph .ph-icon svg{width:24px;height:24px}
.page-head.ph .ph-text{min-width:0;width:auto}
.page-head.ph .ph-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 5px;font-size:11.5px;font-weight:650;letter-spacing:.2px;color:var(--ph-crumb)}
.page-head.ph .ph-crumbs span{white-space:nowrap}
.page-head.ph .ph-crumbs span+i+span,.page-head.ph .ph-crumbs span:not(:first-child){color:#7d88a3;font-weight:600}
.page-head.ph .ph-crumbs i{font-style:normal;color:#c4cadb}
.page-head.ph h1{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.6px;font-weight:700;color:var(--ink,#091d42);overflow-wrap:anywhere}
.page-head.ph p{margin:5px 0 0;max-width:760px;color:#66718c;font-size:13.5px;line-height:1.55}
.page-head.ph p .we-link,.page-head.ph p .wb-link{font-size:inherit}

/* Actions sit on the right, level with the title; small icon buttons become soft square chips. */
.page-head.ph>.head-actions,.page-head.ph>.cm-page-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin:0;width:auto}
.page-head.ph .head-actions .icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;position:relative;border:1px solid #e3e6f3;background:#fff;color:#5c6a7e;transition:background .15s,color .15s,border-color .15s}
.page-head.ph .head-actions .icon-btn:hover{background:#f5f6ff;color:#091d42;border-color:#cfd3f5}
.page-head.ph .head-actions .icon-btn svg{width:18px;height:18px}
.page-head.ph .head-actions .bell-badge{top:-5px;right:-5px}
.page-head.ph .head-actions .btn{min-height:40px}
.page-head.ph .head-total{display:inline-flex;align-items:baseline;gap:5px;padding:8px 14px;border-radius:12px;background:#f4f5ff;color:#24477a;font-weight:700;font-size:15px;margin:0}
.page-head.ph .we-number{gap:8px}
.page-head.ph .we-number>span{font-size:12px;color:#7d88a3}
.page-head.ph .we-number .input{min-height:40px;margin:0;border-radius:12px}

/* A header directly above tabs or a toolbar keeps a little less space under it. */
.page-head.ph+.settings-tabs{margin-top:-4px}
/* Settings tabs stay on one tidy row; on a narrow window the row scrolls sideways instead of wrapping. */
.settings-tabs{flex-wrap:nowrap;overflow-x:auto;gap:2px;padding:6px;scrollbar-width:thin}
.settings-tabs .tab{flex:none;white-space:nowrap;padding:8px 12px;font-size:13px;gap:7px}

@media (max-width:1100px){.page-head.ph{padding:18px 20px}.page-head.ph h1{font-size:24px}}
@media (max-width:760px){
  .page-head.ph{padding:16px;border-radius:16px;gap:14px;margin-bottom:16px}
  .page-head.ph .ph-main{flex-basis:100%;gap:12px;align-items:flex-start}
  .page-head.ph .ph-icon{width:42px;height:42px;border-radius:13px}
  .page-head.ph .ph-icon svg{width:20px;height:20px}
  .page-head.ph h1{font-size:21px;letter-spacing:-.4px}
  .page-head.ph p{font-size:13px}
  .page-head.ph>.head-actions,.page-head.ph>.cm-page-actions{width:100%;justify-content:flex-start}
  .page-head.ph .we-number{flex:1 1 100%}
  .page-head.ph .we-number .input{flex:1;min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.page-head.ph .head-actions .icon-btn{transition:none}}