/* =============================================================================
   WC Wellness colour refresh
   Ported verbatim from the "Formula Builder - Mobile" and "- Z Fold" artboards.
   Sage gradient header, cream/sage surfaces, white nav links with a hover pill
   and the logo on a white plate.

   Scoped to <=1024px on purpose: the Desktop artboard does NOT carry the
   refresh, only the two narrow boards do. Widen this media query if the
   refresh should go app-wide.
   ============================================================================= */
@media (max-width: 1024px) {
    :root{
      --fb-primary:#4a8578; --fb-primary-dark:#3a6b60; --fb-primary-light:#7bb3a5;
      --fb-primary-soft:rgba(91,154,139,.14);
      --fb-secondary:#5b9a8b; --fb-cta:#4a8578; --fb-cta-hover:#3a6b60;
      --fb-cta-soft:rgba(74,133,120,.18);
      --fb-text:#243b36; --fb-text-light:#3f5b54; --fb-text-muted:#5f7b74; --fb-text-subtle:#7d938d;
      --fb-bg:#f6f2ea; --fb-bg-light:#FAF7F1; --fb-bg-dark:#efe8dc; --fb-bg-accent:#e3efe9;
      --fb-bg-sidebar:linear-gradient(180deg,#FFFFFF 0%,#f4efe6 100%);
      --fb-border:#ddd3c4; --fb-border-light:#e7dfd2; --fb-border-accent:#5b9a8b;
      --fb-border-subtle:rgba(91,154,139,.28);
      --fb-warning:#d98324; --fb-danger:#c4553d; --fb-info:#3f7f9b;
      --fb-shadow:0 2px 8px rgba(52,74,68,.10),0 1px 3px rgba(0,0,0,.05);
      --fb-shadow-md:0 4px 14px rgba(52,74,68,.13);
      --fb-shadow-lg:0 10px 28px rgba(52,74,68,.16);
      --slider-thumb-color:#4a8578;
    }
    .formula-builder-app,.app-main{background:#f6f2ea}
    .app-header{background:linear-gradient(135deg,#3a6b60 0%,#5b9a8b 100%);border-bottom:none;color:#fff}
    .app-header .header-title,.app-header .app-logo,.app-header .user-name{color:#fff}
    .app-header .user-role,.app-header .header-status{color:rgba(255,255,255,.88)}
    .app-header .btn-icon,.app-header .mobile-menu-btn,.app-header .help-btn{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
    .fb-topbar{background:#fff;border-bottom:2px solid #e7dfd2}
    .fb-toolbar{background:#fff;border:1px solid #e7dfd2;box-shadow:0 2px 8px rgba(52,74,68,.08)}
    .toolbar-label{color:#3f5b54}
    .panel-header,.sp-header,.ai-interview-header,.autocomplete-panel-header,.formula-select-header,.review-panel-header,.help-panel-header,.ai-modal-header,.checkout-modal-header{background:#eef4f1;border-bottom:1px solid #d7e4de}
    .panel-title{color:#243b36}
    .panel-icon{color:#4a8578}
    .section-header{background:#f4efe6;border-left:3px solid #5b9a8b}
    .section-header:not(.collapsed){background:#e3efe9;border-left-color:#4a8578}
    .section-title{color:#243b36;font-weight:650}
    .section-icon,.toggle-arrow{color:#4a8578}
    .fb-panel,.problem-panel,.results-panel,.polarity-panel,.stress-prediction-panel,.autocomplete-panel{background:#fff;border:1px solid #e7dfd2;box-shadow:0 2px 10px rgba(52,74,68,.07)}
    .app-header .nav-link,.app-header .btn-logout,.app-header .mobile-logout{color:rgba(255,255,255,.9)}
    .app-header .nav-link:hover{background:rgba(255,255,255,.14);border-radius:8px}
    .app-header .nav-link.active{color:#fff;background:rgba(255,255,255,.22);border-radius:8px}
    .app-header .header-logo-img,.app-header .footer-logo-img{background:rgba(255,255,255,.92);border-radius:8px;padding:3px 6px}
    .mobile-nav .nav-link{color:#3f5b54}
    .nav-link.active{color:#fff;background:#4a8578;border-radius:8px}
    .category-pill span,.filter-pill,.sp-chip{background:#fff;border:1px solid #d9cfc0;color:#3f5b54}
    .category-pill input:checked + span,.filter-pill.active,.sp-chip.active{background:#4a8578;border-color:#4a8578;color:#fff}
    .btn-add-to-formula,.btn-analyze,.sp-submit-btn,.btn-checkout-submit,.btn-accept-all,.btn-interview-send,.sp-modal-apply,.btn-complete-interview{background:#4a8578;border-color:#4a8578;color:#fff}
    .btn-add-to-cart,.btn-quick-search,.btn-autocomplete,.btn-polarity{background:#fff;border:1px solid #cbbfae;color:#3f5b54}
    .btn-import,.btn-print,.btn-download,.btn-new-session{color:#3f5b54}
    .estimate-badge,.item-count-badge,.matched-count-badge,.interview-progress-badge,.formula-count,.problem-count,.description-count,.draft-count,.pending-count{background:#f7a072;color:#4a2a18;font-weight:700}
    .description-item{border-bottom:1px solid #eee6da}
    .description-item:nth-child(even){background:#faf7f1}
    .description-number{color:#4a8578;font-weight:700}
    .description-text{color:#243b36}
    .health-slider-label,.bar-label,.sp-label,.filter-label,.info-label{color:#3f5b54}
    .health-slider-value{color:#4a8578;font-weight:700}
    .polarity-pole-name{color:#4a8578}
    .polarity-vs{color:#f7a072}
    .app-footer{background:#243b36;color:#e7dfd2}
    .app-footer a,.footer-links a{color:#a8cfc4}
    .summary-total{color:#243b36;border-top:2px solid #5b9a8b}



}

/* The mobile drawer is a full-screen WHITE panel that lives inside
   .app-header, so the white header link colour above renders its links
   invisible once the hamburger is opened. Restore dark text there. */
@media (max-width: 768px) {
    .app-header .app-nav .nav-link,
    .app-header .app-nav .btn-logout,
    .app-header .app-nav .mobile-logout {
        color: #3f5b54;
    }

    .app-header .app-nav .nav-link:hover {
        background: #eef4f1;
    }

    .app-header .app-nav .nav-link.active {
        background: #4a8578;
        color: #fff;
    }
}