/* Waafi Hub Incubation Platform — Production UI System 2026 */
:root{
  --wh-navy:#061D4A;--wh-deep:#1F2B5B;--wh-navy-2:#10295A;--wh-orange:#FB8304;--wh-orange-2:#ED8B05;
  --wh-bg:#F4F7FB;--wh-surface:#FFFFFF;--wh-text:#17233D;--wh-muted:#65748A;--wh-border:#DDE5EF;
  --wh-green:#16835B;--wh-red:#B93F46;--wh-blue:#315B9C;
  --wh-shadow:0 10px 28px rgba(6,29,74,.065);--wh-shadow-lg:0 18px 45px rgba(6,29,74,.10);
  --wh-radius:16px;--wh-radius-sm:11px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Inter,"Segoe UI",Arial,sans-serif!important;color:var(--wh-text);background:var(--wh-bg);font-size:15px;line-height:1.58;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
img{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit}
/* Readability */
p,.description,.program-description,.course-description,.hero-description,.card-text,.item-description,.detail-text,.wh-card p{line-height:1.68!important}
.description,.program-description,.course-description,.card-text,.item-description,.wh-card p{font-size:13.5px!important;color:var(--wh-muted)!important}
.panel-subtitle,.card-subtitle,.subtext,.wh-sub,.kpi-note,.stat-note,.metric-note,.wh-kpi-note,.field-help,.help,.hint{font-size:11px!important;line-height:1.5!important;color:var(--wh-muted)!important}
label,.wh-field label{font-size:12px!important;line-height:1.35!important;font-weight:800!important}
/* Cards */
.card,.program-card,.course-card,.event-card,.resource-card,.assignment-card,.trainer-card,.trainee-card,.module-card,.quick-card,.overview-card,.info-card,.profile-card,.panel,.wh-panel,.wh-card,.kpi,.stat-card,.metric-card,.summary-card,.mini-stat,.dashboard-card,.wh-kpi{
  height:auto!important;min-height:0!important;border-radius:var(--wh-radius)!important;border-color:var(--wh-border)!important;box-shadow:var(--wh-shadow)!important;background:var(--wh-surface)!important;
}
.card,.program-card,.course-card,.event-card,.resource-card,.assignment-card,.trainer-card,.trainee-card,.module-card,.quick-card,.overview-card,.info-card,.profile-card,.wh-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover,.program-card:hover,.course-card:hover,.event-card:hover,.resource-card:hover,.assignment-card:hover,.trainer-card:hover,.trainee-card:hover,.module-card:hover,.quick-card:hover,.overview-card:hover,.info-card:hover,.profile-card:hover,.wh-card:hover{transform:translateY(-2px);box-shadow:var(--wh-shadow-lg)!important;border-color:rgba(251,131,4,.26)!important}
.panel-title,.card-title,.wh-title{font-size:16px!important;line-height:1.3!important;font-weight:900!important;color:var(--wh-navy)!important}
.card h3,.program-card h3,.course-card h3,.event-card h3,.resource-card h3,.assignment-card h3,.wh-card h3{font-size:15px!important;line-height:1.35!important;color:var(--wh-navy)!important;font-weight:900!important}
/* KPI cards */
.kpis,.stats-grid,.metrics-grid,.wh-kpis{align-items:start!important;gap:10px!important}
.kpi,.stat-card,.metric-card,.summary-card,.mini-stat,.dashboard-card,.wh-kpi{padding:12px 14px!important;position:relative!important;overflow:hidden!important}
.kpi:before,.stat-card:before,.metric-card:before,.wh-kpi:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:#D9E4F1}
.kpi.accent:before,.stat-card.accent:before,.metric-card.accent:before,.wh-kpi.accent:before{background:var(--wh-orange)}
.kpi-label,.stat-label,.metric-label,.wh-kpi-label{font-size:10.5px!important;line-height:1.3!important;font-weight:850!important;letter-spacing:.02em!important}
.kpi-value,.stat-value,.metric-value,.wh-kpi-value{font-size:27px!important;line-height:1!important;font-weight:900!important;color:var(--wh-navy)!important;margin:5px 0 4px!important}
/* Navigation */
.nav-item,.navstrip a,.top-link,.wh-nav a,.header-links a,.menu a{font-size:11.5px!important;font-weight:800!important}
.nav-item,.wh-nav a{border-radius:9px!important}
/* Hero */
.hero,.wh-hero{border-radius:18px!important;box-shadow:var(--wh-shadow)!important}
.wh-hero{padding:20px 22px!important;background:linear-gradient(125deg,var(--wh-navy),var(--wh-deep))!important}
.wh-hero h1,.hero h1{font-weight:900!important;letter-spacing:-.025em!important}
.wh-hero h1{font-size:29px!important;margin:4px 0 7px!important}
.wh-hero p{font-size:13px!important;line-height:1.65!important;max-width:860px!important}
/* Panels & body spacing */
.wh-panel-head,.panel-head{padding:14px 16px!important}
.wh-body{padding:16px!important}
.wh-row{padding:10px 0!important}
.wh-label{font-size:9.5px!important}
.wh-value{font-size:12.5px!important;line-height:1.5!important}
/* Buttons */
.btn,.top-btn,.action-link,.small-action,.event-action,.resource-action,.wh-btn{min-height:40px!important;padding:0 13px!important;border-radius:10px!important;font-size:11.5px!important;font-weight:850!important;transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important}
.btn:hover,.top-btn:hover,.action-link:hover,.small-action:hover,.event-action:hover,.resource-action:hover,.wh-btn:hover{transform:translateY(-1px)}
/* Forms */
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.wh-field input,.wh-field select,.wh-field textarea{border-radius:10px!important;border-color:#D6E0EB!important;background:#FBFCFE!important;color:var(--wh-text)!important;font-size:14px!important;box-shadow:none!important}
input:not([type="checkbox"]):not([type="radio"]),select,.wh-field input,.wh-field select{min-height:44px!important}
textarea,.wh-field textarea{min-height:130px!important;line-height:1.6!important}
input:focus,select:focus,textarea:focus{border-color:var(--wh-orange)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(251,131,4,.10)!important;outline:none!important}
/* Tables */
.table-wrap,.table-responsive,.wh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
table,.wh-table{font-size:12.5px!important}
th,.wh-table th{font-size:10px!important;letter-spacing:.03em!important;padding:11px 12px!important}
td,.wh-table td{font-size:12px!important;line-height:1.5!important;padding:11px 12px!important}
/* Text safety */
.long-text,.detail-value,.description-preview,.full-work,.feedback-box,.wh-value{overflow-wrap:anywhere;word-break:break-word}
/* Badges */
.badge,.status-badge,.wh-badge{font-size:9.5px!important;font-weight:850!important;padding:5px 8px!important;border-radius:999px!important}
/* Responsive */
@media(max-width:1000px){.wh-grid{grid-template-columns:1fr!important}.kpis,.stats-grid,.metrics-grid,.wh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){
  body{font-size:14px!important;overflow-x:hidden}
  .wrap,.page,.container,.content,.wh-page{max-width:100%!important;width:calc(100% - 18px)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
  .header,.topbar,.wh-top{padding-left:12px!important;padding-right:12px!important}
  .hero,.wh-hero{padding:17px!important;border-radius:15px!important}
  .hero h1,.wh-hero h1,h1{font-size:clamp(24px,7.5vw,30px)!important;line-height:1.15!important}
  .hero p,.wh-hero p{font-size:12.5px!important;line-height:1.65!important}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  button,.btn,.top-btn,.action-link,.small-action,.event-action,.resource-action,.wh-btn{min-height:44px!important;font-size:12px!important}
  .kpi-value,.stat-value,.metric-value,.wh-kpi-value{font-size:24px!important}
  .card,.program-card,.course-card,.event-card,.resource-card,.assignment-card,.trainer-card,.trainee-card,.wh-card{padding-top:13px!important;padding-bottom:13px!important}
  .description,.program-description,.course-description,.card-text,.item-description,.wh-card p{font-size:13.5px!important}
  .wh-nav,.navstrip{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .wh-nav-in{width:max-content!important;min-width:100%!important;padding-left:8px!important;padding-right:8px!important}
  .wh-nav a{min-height:38px!important;display:inline-flex!important;align-items:center!important;white-space:nowrap!important}
  table,.wh-table{font-size:12px!important}
}
@media(max-width:380px){.kpis,.stats-grid,.metrics-grid,.wh-kpis{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Final brand consistency */
.wh-brand{display:flex!important;align-items:center!important;min-height:34px!important}
.wh-brand-logo{display:block!important;width:158px!important;max-width:100%!important;max-height:42px!important;height:auto!important;object-fit:contain!important;object-position:left center!important}
.brand-logo-image,.brand-logo-official{display:block!important;width:160px!important;max-width:100%!important;max-height:46px!important;height:auto!important;object-fit:contain!important;object-position:left center!important}
.wh-panel{position:relative}
.wh-panel:before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--wh-orange),rgba(251,131,4,0));z-index:1;pointer-events:none}
.wh-card{position:relative;overflow:hidden}
.wh-card:after{content:"";position:absolute;inset:auto -34px -38px auto;width:76px;height:76px;border-radius:50%;background:rgba(6,29,74,.025);pointer-events:none}
@media(max-width:760px){.wh-brand-logo{width:142px!important;max-height:38px!important}.brand-logo-image,.brand-logo-official{width:145px!important;max-height:42px!important}}
.brand-logo-image{background:#061D4A!important;padding:6px 8px!important;border-radius:10px!important;box-shadow:0 6px 18px rgba(6,29,74,.12)!important}

/* ============================================================
   FINAL LIVE POLISH — VISUAL HIERARCHY + RESPONSIVE BRANDING
============================================================ */
body{
  background:
    radial-gradient(circle at 100% 0,rgba(251,131,4,.045),transparent 24rem),
    linear-gradient(180deg,#F8FAFD 0%,#F4F7FB 56%,#F8FAFD 100%)!important;
}
.card,.program-card,.course-card,.event-card,.resource-card,.assignment-card,.trainer-card,.trainee-card,.module-card,.quick-card,.overview-card,.info-card,.profile-card,.panel,.wh-panel,.wh-card{
  border:1px solid var(--wh-border)!important;
}
.card,.program-card,.course-card,.event-card,.resource-card,.assignment-card,.trainer-card,.trainee-card,.module-card,.quick-card,.overview-card,.info-card,.profile-card,.wh-card{
  position:relative!important;
  overflow:hidden!important;
}
.card:before,.program-card:before,.course-card:before,.event-card:before,.resource-card:before,.assignment-card:before,.trainer-card:before,.trainee-card:before,.module-card:before,.quick-card:before,.overview-card:before,.info-card:before,.profile-card:before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--wh-orange),rgba(251,131,4,0));pointer-events:none;z-index:1;
}
.description,.program-description,.course-description,.card-text,.item-description,.detail-text,.wh-card p{
  font-size:14px!important;line-height:1.7!important;
}
.card h3,.program-card h3,.course-card h3,.event-card h3,.resource-card h3,.assignment-card h3,.trainer-card h3,.trainee-card h3,.wh-card h3{
  font-size:16px!important;line-height:1.38!important;
}
.panel-title,.card-title,.wh-title{font-size:16.5px!important;line-height:1.32!important}
.kpi,.stat-card,.metric-card,.summary-card,.mini-stat,.dashboard-card,.wh-kpi{
  padding:12px 14px!important;
}
.kpi-note,.stat-note,.metric-note,.wh-kpi-note{font-size:10.5px!important;line-height:1.45!important}
.hero,.wh-hero{
  background-image:
    radial-gradient(circle at 93% 10%,rgba(251,131,4,.17),transparent 15rem),
    linear-gradient(125deg,var(--wh-navy),var(--wh-deep))!important;
}
.wh-brand-logo,.brand-logo-image,.brand-logo-official{
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.14));
}
.nav-item.active,.wh-nav a.active{box-shadow:inset 0 0 0 1px rgba(251,131,4,.14)}
.btn,.top-btn,.action-link,.small-action,.event-action,.resource-action,.wh-btn{box-shadow:0 4px 12px rgba(6,29,74,.055)}
.btn:focus-visible,.top-btn:focus-visible,.action-link:focus-visible,.small-action:focus-visible,.event-action:focus-visible,.resource-action:focus-visible,.wh-btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid rgba(251,131,4,.25)!important;outline-offset:2px!important}

@media(max-width:760px){
  .card,.program-card,.course-card,.event-card,.resource-card,.assignment-card,.trainer-card,.trainee-card,.module-card,.quick-card,.overview-card,.info-card,.profile-card,.panel,.wh-panel,.wh-card{border-radius:14px!important}
  .description,.program-description,.course-description,.card-text,.item-description,.detail-text,.wh-card p{font-size:14.5px!important;line-height:1.72!important}
  .panel-title,.card-title,.wh-title{font-size:16px!important}
  .kpis,.stats-grid,.metrics-grid,.wh-kpis{gap:8px!important}
  .kpi,.stat-card,.metric-card,.summary-card,.mini-stat,.dashboard-card,.wh-kpi{padding:11px 12px!important}
  .wh-top-in,.topbar,.header{max-width:100%!important}
  .wh-table-wrap,.table-wrap,.table-responsive{margin-left:0!important;margin-right:0!important}
}