/*!
 * AFSocial UI v4 — premium page-design polish.
 * AFSocial is a property of Afrifounders.
 *
 * Loaded AFTER afsocial-theme.css, afsocial-ui-v2.css, afsocial-ui-v3.css.
 * v3 fixed structure (page headers, max-width container, wizard, review layout).
 * v4 adds VISUAL DEPTH AND FINISH on top of that structure: a richer hero band,
 * deeper/softer card shadows, a stronger type scale, premium metric/action/
 * provider cards, a wizard panel + stepper, modern tables, form cards, status
 * chips and soft alerts — plus a shared-component pass so un-rebuilt vendor
 * pages (Add New Post, Posts list, Settings, Members, Debug…) lift too.
 * No external assets, no framework, additive only.
 */

:root{
  --v4-primary:#4f46e5; --v4-primary-2:#7c3aed; --v4-primary-700:#4338ca; --v4-primary-050:#eef2ff;
  --v4-surface:#fff; --v4-surface-2:#fbfbfe; --v4-border:#e7e9f2; --v4-border-2:#eef0f7;
  --v4-text:#151a2e; --v4-muted:#69708a;
  --v4-ok:#15803d; --v4-ok-bg:#dcfce7; --v4-warn:#b45309; --v4-warn-bg:#fef3c7;
  --v4-danger:#dc2626; --v4-danger-bg:#fee2e2; --v4-info:#3730a3; --v4-info-bg:#e0e7ff;
  --v4-r-lg:18px; --v4-r:14px; --v4-r-sm:10px;
  --v4-sh-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  --v4-sh-2:0 4px 14px rgba(16,24,40,.07);
  --v4-sh-3:0 16px 40px rgba(16,24,40,.12);
}

/* ==================================================================
   1. Foundation — type scale, page shell, mobile-stack utility
   ================================================================== */
h1,h2,h3,h4,.afs-page-title{ letter-spacing:-.015em; }
.afs-shell{ max-width:1240px; margin:0 auto; }

.afs-mobile-stack{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
@media (max-width:767px){ .afs-mobile-stack{ grid-template-columns:1fr!important; } }

/* ==================================================================
   2. Premium page hero (kicker + title + subtitle)
   ================================================================== */
.afs-page-hero{
  position:relative; overflow:hidden; border-radius:var(--v4-r-lg);
  background:linear-gradient(135deg,#f8f9ff 0%,#fdfdff 55%,#f6f4ff 100%);
  border:1px solid var(--v4-border); box-shadow:var(--v4-sh-2);
  padding:26px 28px; margin-bottom:24px;
}
.afs-page-hero::after{
  content:""; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.10),rgba(124,58,237,0) 70%); pointer-events:none;
}
.afs-page-kicker{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--v4-primary-700); background:var(--v4-primary-050); border:1px solid var(--v4-primary-050);
  border-radius:999px; padding:3px 11px; margin-bottom:10px;
}
/* Scoped under .afs-page-hero to out-specificity v3's ".afs-page-head .afs-ph-title"
 * (2-class descendant selector) — a bare ".afs-page-title" rule would lose that fight
 * regardless of load order, since equal-specificity ties (not lower specificity) are
 * what source order resolves. */
.afs-page-hero .afs-page-title{ font-size:28px; font-weight:800; margin:0; line-height:1.18; color:var(--v4-text); }
.afs-page-hero .afs-page-subtitle{ color:var(--v4-muted); font-size:14.5px; margin:7px 0 0; max-width:68ch; line-height:1.55; }
.afs-page-hero .afs-ph-actions{ position:relative; z-index:1; }
@media (max-width:767px){
  .afs-page-hero{ padding:20px 18px; }
  .afs-page-hero .afs-page-title{ font-size:22px; }
}

/* ==================================================================
   3. Premium card system (depth without heaviness)
   ================================================================== */
.afs-premium-card{
  background:var(--v4-surface); border:1px solid var(--v4-border); border-radius:var(--v4-r-lg);
  box-shadow:var(--v4-sh-2); padding:24px; position:relative;
}
.afs-premium-card::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg,rgba(124,58,237,.25),rgba(79,70,229,0));
}
.afs-premium-card > h4:first-child,.afs-premium-card > h3:first-child{ margin-top:0; }

/* ==================================================================
   4. Command grid + action cards (dashboard primary actions)
   ================================================================== */
.afs-command-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:24px; }
.afs-action-card{
  position:relative; border-radius:var(--v4-r); border:1px solid var(--v4-border); background:var(--v4-surface);
  box-shadow:var(--v4-sh-1); transition:box-shadow .15s,transform .15s,border-color .15s;
}
.afs-action-card:hover{ box-shadow:var(--v4-sh-3); transform:translateY(-2px); border-color:#c7d2fe; }
.afs-command-grid > a.afs-action-card:first-child,.afs-action-card.afs-action-primary{
  background:linear-gradient(135deg,var(--v4-primary),var(--v4-primary-2)); border-color:transparent;
  box-shadow:0 10px 26px rgba(79,70,229,.28);
}
.afs-command-grid > a.afs-action-card:first-child .afs-quick-ic,
.afs-action-card.afs-action-primary .afs-quick-ic{ background:rgba(255,255,255,.18); color:#fff; }
.afs-command-grid > a.afs-action-card:first-child .afs-quick-t,
.afs-command-grid > a.afs-action-card:first-child .afs-quick-d,
.afs-action-card.afs-action-primary .afs-quick-t,.afs-action-card.afs-action-primary .afs-quick-d{ color:#fff; }
.afs-command-grid > a.afs-action-card:first-child .afs-quick-d,
.afs-action-card.afs-action-primary .afs-quick-d{ opacity:.85; }

/* ==================================================================
   5. Metric cards (readiness / summary numbers)
   ================================================================== */
.afs-metric-card{
  border-radius:var(--v4-r); border:1px solid var(--v4-border); background:var(--v4-surface);
  box-shadow:var(--v4-sh-1); position:relative; overflow:hidden; transition:box-shadow .15s;
}
.afs-metric-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--v4-border-2); }
.afs-metric-card.tone-ok::before,.afs-metric-card.ok::before{ background:var(--v4-ok); }
.afs-metric-card.tone-info::before,.afs-metric-card.info::before{ background:var(--v4-primary); }
.afs-metric-card.tone-warn::before,.afs-metric-card.warn::before{ background:var(--v4-warn); }
.afs-metric-card:hover{ box-shadow:var(--v4-sh-2); }

/* ==================================================================
   6. Provider cards — pro finish
   ================================================================== */
.afs-provider-card-pro{
  padding:20px!important; gap:14px!important; border-radius:var(--v4-r-lg)!important;
  box-shadow:var(--v4-sh-1)!important;
}
.afs-provider-card-pro:hover{ box-shadow:var(--v4-sh-3)!important; }
.afs-provider-card-pro .afs-pc-ico{ box-shadow:var(--v4-sh-2); }
.afs-provider-card-pro .afs-pc-body{ padding-bottom:2px; border-bottom:1px dashed var(--v4-border-2); padding-bottom:12px; }
.afs-provider-card-pro .afs-pc-foot{ margin-top:2px; }

/* ==================================================================
   7. Wizard panel + stepper (provider detail)
   ================================================================== */
.afs-wizard-panel{
  background:var(--v4-surface-2); border:1px solid var(--v4-border); border-radius:var(--v4-r-lg);
  padding:22px; box-shadow:var(--v4-sh-1);
}
.afs-stepper{ position:relative; }
.afs-stepper .afs-step{
  box-shadow:none!important; border:1px solid transparent!important; background:transparent!important;
  padding:12px 0 12px 0!important; position:relative;
}
.afs-stepper .afs-step:not(:last-child)::after{
  content:""; position:absolute; left:13px; top:40px; bottom:-12px; width:2px; background:var(--v4-border);
}
.afs-stepper .afs-step.done:not(:last-child)::after{ background:var(--v4-ok-bg); }
.afs-stepper .afs-step::before{ box-shadow:0 0 0 4px var(--v4-surface-2); position:relative; z-index:1; }

/* ==================================================================
   8. Empty states — friendlier, more illustrative
   ================================================================== */
.afs-empty-state{
  text-align:center; padding:46px 24px; border-radius:var(--v4-r-lg); border:1px dashed var(--v4-border);
  background:linear-gradient(180deg,var(--v4-surface-2),var(--v4-surface));
}
.afs-empty-state .afs-empty-ico{
  width:64px; height:64px; border-radius:20px; display:inline-grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg,var(--v4-primary-050),#fff); color:var(--v4-primary-700); font-size:27px;
  box-shadow:var(--v4-sh-1);
}
.afs-empty-state h4{ font-weight:800; margin:0 0 6px; }
.afs-empty-state p{ color:var(--v4-muted); margin:0 auto 16px; max-width:440px; }

/* ==================================================================
   9. Modern tables
   ================================================================== */
.afs-modern-table{ border-collapse:separate!important; border-spacing:0; width:100%; }
.afs-modern-table > thead > tr > th{
  background:var(--v4-surface-2); border-bottom:1px solid var(--v4-border)!important; border-top:none!important;
  color:var(--v4-muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:800;
  padding:12px 14px!important;
}
.afs-modern-table > thead > tr > th:first-child{ border-top-left-radius:var(--v4-r-sm); }
.afs-modern-table > thead > tr > th:last-child{ border-top-right-radius:var(--v4-r-sm); }
.afs-modern-table > tbody > tr > td{ padding:13px 14px!important; border-top:1px solid var(--v4-border-2)!important; font-size:13.5px; }
.afs-modern-table > tbody > tr:hover{ background:var(--v4-primary-050); }
.afs-modern-table.table-striped > tbody > tr:nth-of-type(odd){ background:var(--v4-surface-2); }
.afs-modern-table.table-striped > tbody > tr:nth-of-type(odd):hover{ background:var(--v4-primary-050); }

/* Posts list (DataTables) — styled in place, not JS-wrapped (DataTables owns
 * its own wrapper/controls; double-wrapping would nest scroll containers). */
div.dataTables_wrapper{ font-size:13.5px; }
#list-post.table > thead > tr > th{
  background:var(--v4-surface-2); color:var(--v4-muted); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; font-weight:800; border-bottom:1px solid var(--v4-border);
}
#list-post.table > tbody > tr > td{ padding:13px 12px; vertical-align:middle; }
#list-post.table > tbody > tr:hover{ background:var(--v4-primary-050); }
#list-post .quick-status{ font-weight:700; }

/* ==================================================================
   10. Form cards (credential forms, compose forms)
   ================================================================== */
.afs-form-card{
  border-radius:var(--v4-r-lg)!important; border:1px solid var(--v4-border)!important;
  box-shadow:var(--v4-sh-1)!important; position:relative; overflow:hidden;
}
.afs-form-card::before{
  content:""; position:absolute; top:0; left:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--v4-primary),var(--v4-primary-2));
}
.afs-form-card .box-header,.afs-form-card > .add-new-post-title{ padding-left:23px!important; }
.afs-form-card .box-body{ padding-left:23px!important; }
.afs-form-card .form-group{ margin-bottom:18px; }
.afs-form-card label{ color:var(--v4-text); }

/* ==================================================================
   11. Review panel (manual publish)
   ================================================================== */
.afs-review-panel{ align-items:stretch; }
.afs-review-panel .afs-preview{ box-shadow:var(--v4-sh-2); }
.afs-review-panel .afs-premium-card{ padding:20px; }

/* ==================================================================
   12. Status chips (richer than the plain pill)
   ================================================================== */
.afs-status-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; padding:.35em .75em;
  border-radius:999px; line-height:1.4; box-shadow:inset 0 0 0 1px rgba(16,24,40,.04);
}
.afs-status-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.afs-status-chip.ok{ background:var(--v4-ok-bg); color:var(--v4-ok); }
.afs-status-chip.warn{ background:var(--v4-warn-bg); color:var(--v4-warn); }
.afs-status-chip.info{ background:var(--v4-info-bg); color:var(--v4-info); }
.afs-status-chip.off{ background:#eef0f5; color:#4a5169; }
.afs-status-chip.danger{ background:var(--v4-danger-bg); color:var(--v4-danger); }

/* ==================================================================
   13. Soft alerts (calmer than a full-bleed banner)
   ================================================================== */
.afs-soft-alert{ box-shadow:none!important; background-image:none; position:relative; }
.afs-soft-alert.tone-info{ background:var(--v4-primary-050)!important; }
.afs-soft-alert.tone-ok{ background:#f0fdf4!important; }
.afs-soft-alert.tone-warn{ background:#fffbeb!important; }
.afs-soft-alert .afs-banner-ico{ opacity:.9; }

/* ==================================================================
   14. Shared vendor component pass (section M) — reaches un-rebuilt pages
   ================================================================== */
.box{ border-radius:var(--v4-r)!important; box-shadow:var(--v4-sh-1)!important; }
.box:hover{ box-shadow:var(--v4-sh-2)!important; }
.box.box-info,.box.box-danger,.box.box-warning,.box.box-success{ border-top-color:var(--v4-border)!important; }
.box-header .box-title{ font-weight:800; }
.table{ font-size:13.5px; }
.table > thead > tr > th{ font-weight:800; }
.form-control{ transition:border-color .12s,box-shadow .12s; }
.btn{ transition:box-shadow .12s,transform .12s; }
.btn-primary{ box-shadow:0 2px 8px rgba(79,70,229,.22); }
.btn-primary:hover{ box-shadow:0 4px 14px rgba(79,70,229,.30); }
.alert{ border:1px solid var(--v4-border); box-shadow:var(--v4-sh-1); }
.pagination > li > a,.pagination > li > span{ border-radius:var(--v4-r-sm)!important; margin:0 2px; border-color:var(--v4-border); }
.pagination > .active > a,.pagination > .active > span{ background:var(--v4-primary)!important; border-color:var(--v4-primary)!important; }
.nav-tabs{ border-bottom:1px solid var(--v4-border); }
.nav-tabs > li > a{ border-radius:var(--v4-r-sm) var(--v4-r-sm) 0 0; font-weight:700; color:var(--v4-muted); }
.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{
  color:var(--v4-primary-700); border-color:var(--v4-border) var(--v4-border) transparent; }
.modal-content{ border-radius:var(--v4-r-lg); border:none; box-shadow:var(--v4-sh-3); }
.modal-header{ border-bottom:1px solid var(--v4-border-2); }
.label{ border-radius:999px; font-weight:700; padding:.3em .7em; }
.callout{ box-shadow:var(--v4-sh-1); }

/* ==================================================================
   15. Login page polish
   ================================================================== */
body.login-page{ background:linear-gradient(160deg,#f7f8ff 0%,#f3f2ff 45%,#eef0fb 100%)!important; }
.login-page .bg-plum-plate{
  background:linear-gradient(150deg,#171b36,#241f4d)!important; position:relative; overflow:hidden;
}
.login-page .bg-plum-plate::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 25% 20%,rgba(124,58,237,.35),transparent 55%),
             radial-gradient(circle at 80% 80%,rgba(79,70,229,.28),transparent 50%);
}
.login-page .login-logo-inner{ position:relative; z-index:1; }
.login-page .login-box{
  border-radius:var(--v4-r-lg); box-shadow:var(--v4-sh-3); border:1px solid var(--v4-border);
  padding:8px; background:var(--v4-surface);
}
.login-page .login-text{ font-weight:800; }
.login-page .btn-primary{ width:100%; height:44px; font-weight:700; }

/* ==================================================================
   16. Mobile refinements (extends v3's 767px breakpoint)
   ================================================================== */
@media (max-width:767px){
  .afs-command-grid{ grid-template-columns:1fr; }
  .afs-premium-card{ padding:18px; }
  .afs-wizard-panel{ padding:16px; }
  .afs-form-card .box-header,.afs-form-card .box-body{ padding-left:18px!important; }
  .afs-modern-table > thead > tr > th,.afs-modern-table > tbody > tr > td{ white-space:nowrap; }
  .afs-empty-state{ padding:32px 16px; }
}
@media (max-width:991px){ .afs-page-hero{ padding:22px 20px; } }