/* ═══════════════════════════════════════════════════════════════════════════
 * no-gold.css — V1 ERP : élimination définitive de toute couleur dorée.
 * Charge APRÈS tokens.css et ux-enhancements.css pour cascader par-dessus.
 * Combiné avec /js/no-gold.js (sentinelle runtime) qui réécrit les <style>
 * inline et les style="" injectés dynamiquement par les composants V2.
 * Charte cible : navy #0B2140 · bleu primaire #2471a3 · bleu clair #5dade2
 * ═══════════════════════════════════════════════════════════════════════════ */

:root, html, body {
  --gold:        #2471a3 !important;
  --gold-soft:   #5dade2 !important;
  --gold-dark:   #1a4a7a !important;
  --accent-gold: #2471a3 !important;
  --color-gold:  #2471a3 !important;
  --hyd-gold:    #2471a3 !important;
}

/* Classes utilitaires globales nommées "gold" → bleu primaire */
.gold, .text-gold, .clr-gold, .color-gold,
.has-gold, .is-gold,
.dlux-btn-gold,
.badge.gold {
  color: #2471a3 !important;
  border-color: #2471a3 !important;
}
.bg-gold, .has-bg-gold, .background-gold {
  background-color: #e8f4fd !important;
  color: #0B2140 !important;
}
.border-gold { border-color: #2471a3 !important; }

/* Boutons "dorés" type premium.css */
.dlux-btn-gold {
  background: linear-gradient(135deg, #2471a3, #5dade2) !important;
  color: #ffffff !important;
}

/* KPIs dorés (clients-v2, business-modules-v2) */
.cli2-kpi--gold .cli2-kpi__value,
.biz2-kpi--gold .biz2-kpi__value,
.dlux-kpi.dlux-gold .dlux-kpi-val {
  color: #2471a3 !important;
}
.cli2-kpi--gold, .biz2-kpi--gold { --accent: #2471a3 !important; }

/* Pills "gold" */
.cli2-pill--gold {
  background: #e8f4fd !important;
  color: #0B2140 !important;
  border-color: #cfe2f3 !important;
}

/* Badge.gold (client-portal, etc.) — neutralise le gradient amber luxe */
.badge.gold {
  background: linear-gradient(135deg, #e8f4fd, #cfe2f3) !important;
  color: #0B2140 !important;
}

/* Mini-stat "gold" (CRM) — neutralise color #efc84a */
.crm-mini-stat.gold .crm-mini-value {
  color: #2471a3 !important;
}

/* KPI variantes "gold" (dlux + biz2 + cli2) — évite le flash de premier rendu
   avant que la sentinelle JS no-gold.js ne réécrive le hex */
.dlux-kpi.dlux-gold .dlux-kpi-val,
.biz2-kpi--gold .biz2-kpi-val,
.biz2-kpi--gold,
.cli2-kpi--gold .cli2-kpi-val,
.cli2-kpi--gold {
  color: #2471a3 !important;
}

/* Totaux dorés (devis-list, factures…) — bleu gradient propre */
.total.gold,
.stat-card .val.gold {
  background: linear-gradient(135deg, #2471a3, #5dade2) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RENFORCEMENT — KPI cards "gold" sur TOUS les namespaces V1
 * (dv2 dashboard, biz2 compta, cli2 CRM, dir2 direction, aff2, devis2, fact2,
 * me2, sal2, temps2, cong2). Neutralise :
 *   - le fond gradient gold (devient blanc opaque)
 *   - la couleur de valeur gold (devient navy)
 *   - la variable --accent / --c locale (devient bleu primaire)
 *   - la barre verticale gauche (héritée de --accent → bleue)
 * ═══════════════════════════════════════════════════════════════════════════ */
.aff2-kpi--gold,
.biz2-kpi--gold,
.cli2-kpi--gold,
.cong2-kpi--gold,
.devis2-kpi--gold,
.dir2-kpi--gold,
.dv2-kpi--gold,
.fact2-kpi--gold,
.me2-kpi--gold,
.sal2-kpi--gold,
.temps2-kpi--gold {
  background: #ffffff !important;
  background-image: none !important;
  --accent: #2471a3 !important;
  --c: #2471a3 !important;
}

.aff2-kpi--gold .aff2-kpi__value,
.biz2-kpi--gold .biz2-kpi__value,
.cli2-kpi--gold .cli2-kpi__value,
.cong2-kpi--gold .cong2-kpi__value,
.devis2-kpi--gold .devis2-kpi__value,
.dv2-kpi--gold .dv2-kpi__value,
.fact2-kpi--gold .fact2-kpi__value,
.temps2-kpi--gold .temps2-kpi__value,
.dir2-kpi--gold .dir2-kpi__val,
.me2-kpi--gold .me2-kpi__val,
.sal2-kpi--gold .sal2-kpi__val {
  color: #0B2140 !important;
}

/* Pills/badges "gold" résiduels — fond bleu très pâle + texte navy */
.cli2-pill--gold,
.aff2-pill--gold,
.devis2-pill--gold,
.fact2-pill--gold,
.dir2-pill--gold {
  background: #e8f4fd !important;
  color: #0B2140 !important;
  border: 1px solid #cfe2f3 !important;
}

/* Boutons/chips "gold" génériques (les composants V2 utilisent ces variantes) */
.btn--gold,
.chip--gold,
.tag--gold,
.dlux-btn-gold,
.bp-gold {
  background: linear-gradient(135deg, #2471a3, #5dade2) !important;
  color: #ffffff !important;
  border-color: #2471a3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * NEUTRALISATION DES GRADIENTS GOLD (résidus premium.css + composants V2)
 * Les hex ci-dessous sont les plus courants : #f9c349, #fde68a, #fff3b8,
 * #fffbe6, #fef3c7, #ca8a04, #f5c842, #c9a227, #d4af37, #ffd700, #b7791f,
 * #a16207. On capture quelques cas inline largement utilisés.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Hero/header gradients contenant #f9c349 → on remplace par navy/cyan */
[style*="#f9c349"][style*="linear-gradient"],
[style*="#FDE68A"][style*="linear-gradient"],
[style*="#fde68a"][style*="linear-gradient"],
[style*="#fff3b8"][style*="linear-gradient"],
[style*="#fffbe6"][style*="linear-gradient"] {
  background-image: linear-gradient(135deg, #0B2140 0%, #2471a3 60%, #5dade2 100%) !important;
}

/* Variables CSS dorées au cas où des composants en injectent d'autres */
:root {
  --amber: #2471a3 !important;
  --amber-luxe: #2471a3 !important;
  --hyd-amber: #2471a3 !important;
  --gold2: #5dade2 !important;
  --gold3: #e8f4fd !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * NO-ORANGE / NO-AMBER — neutralisation forcée de la palette orange/amber
 * (demande user : "retire la couche orange et dorée définitivement")
 * Toutes les classes amber/warning utility passent en bleu HYDPOLL.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Classes utility génériques V1 */
.b-amber, .badge.amber, .badge-amber, .tag-amber, .chip-amber,
.text-amber, .clr-amber, .color-amber {
  background: #e8f4fd !important;
  color: #0B2140 !important;
  border-color: #cfe2f3 !important;
}
.bg-amber, .has-bg-amber { background-color: #e8f4fd !important; }
.border-amber { border-color: #2471a3 !important; }
.text-orange, .clr-orange, .color-orange, .bg-orange, .has-bg-orange {
  color: #2471a3 !important;
}

/* KPI variantes amber sur tous les namespaces V1/V2 */
.aff2-kpi--amber, .biz2-kpi--amber, .cli2-kpi--amber, .cong2-kpi--amber,
.devis2-kpi--amber, .dir2-kpi--amber, .dv2-kpi--amber, .fact2-kpi--amber,
.me2-kpi--amber, .sal2-kpi--amber, .temps2-kpi--amber,
.dlux-kpi.dlux-amber {
  background: #ffffff !important;
  background-image: none !important;
  --accent: #2471a3 !important;
  --c: #2471a3 !important;
}
.aff2-kpi--amber .aff2-kpi__value,
.biz2-kpi--amber .biz2-kpi__value,
.cli2-kpi--amber .cli2-kpi__value,
.devis2-kpi--amber .devis2-kpi__value,
.dv2-kpi--amber .dv2-kpi__value,
.fact2-kpi--amber .fact2-kpi__value,
.temps2-kpi--amber .temps2-kpi__value,
.dlux-kpi.dlux-amber .dlux-kpi-val {
  color: #2471a3 !important;
}

/* Pills warning/amber V2 — fond bleu pâle + texte navy */
.cli2-pill--amber, .aff2-pill--amber, .devis2-pill--amber,
.fact2-pill--amber, .dir2-pill--amber,
.pill-amber, .pill-warning, .chip-warning {
  background: #e8f4fd !important;
  color: #0B2140 !important;
  border-color: #cfe2f3 !important;
}

/* Variables CSS amber au cas où des composants en injectent */
:root {
  --orange: #2471a3 !important;
  --warning: #2471a3 !important;
  --hyd-orange: #2471a3 !important;
  --hyd-warning: #2471a3 !important;
}

/* Inline styles gradient orange/amber : reset au gradient HYDPOLL */
[style*="#f59e0b"][style*="linear-gradient"],
[style*="#fbbf24"][style*="linear-gradient"],
[style*="#d97706"][style*="linear-gradient"],
[style*="#ea580c"][style*="linear-gradient"],
[style*="#f97316"][style*="linear-gradient"],
[style*="#fed7aa"][style*="linear-gradient"],
[style*="#ffedd5"][style*="linear-gradient"] {
  background-image: linear-gradient(135deg, #0B2140 0%, #2471a3 60%, #5dade2 100%) !important;
}

/* Bordures left coloré amber (status-card, alert) → bleu */
[style*="border-left:3px solid #f"][style*="amber"],
[style*="border-left:4px solid #f"][style*="amber"] {
  border-left-color: #2471a3 !important;
}

/* Status badges (devis-v2, fact2-status-) utilisant amber variant */
.devis2-status-select--amber, .fact2-status-select--amber,
.status-select.amber, .status-pill.amber {
  background: #e8f4fd !important;
  color: #0B2140 !important;
  border-color: #cfe2f3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DLUX HERO — halos bronze résiduels + lisibilité des labels KPI
 * Le ::before utilisait rgba(199,154,59,…) et rgba(201,162,39,…), non couverts
 * par no-gold.js. On les neutralise en bleu, on garantit un fond solide
 * (au cas où le gradient ne s'applique pas) et on remonte le contraste des
 * labels de 0.62/0.65 → 0.92 pour qu'ils restent lisibles partout.
 * ═══════════════════════════════════════════════════════════════════════════ */
.dlux-hero {
  background-color: #0B2140 !important;  /* fallback solide */
  background-image: linear-gradient(135deg, #04111F 0%, #0A2040 50%, #143360 100%) !important;
  border-color: rgba(36, 113, 163, .18) !important;
  box-shadow: 0 24px 56px rgba(4, 17, 31, .35), 0 1px 0 rgba(36, 113, 163, .25) !important;
}
.dlux-hero::before {
  background: radial-gradient(circle, rgba(36, 113, 163, .18) 0%, transparent 68%) !important;
}
.dlux-hero::after {
  background: radial-gradient(circle, rgba(93, 173, 226, .14) 0%, transparent 68%) !important;
}
.dlux-kpi:hover {
  border-color: rgba(93, 173, 226, .40) !important;
}
.dlux-kpi.dlux-active {
  background: rgba(36, 113, 163, .18) !important;
  border-color: rgba(93, 173, 226, .55) !important;
}
.dlux-kpi-val {
  color: #ffffff !important;
}
.dlux-kpi-lbl {
  opacity: .92 !important;
  color: rgba(255, 255, 255, .88) !important;
}
.dlux-kpi.dlux-gold .dlux-kpi-val  { color: #5dade2 !important; }
.dlux-kpi.dlux-green .dlux-kpi-val { color: #4ade80 !important; }
.dlux-kpi.dlux-red   .dlux-kpi-val { color: #f87171 !important; }
.dlux-kpi.dlux-amber .dlux-kpi-val { color: #fbbf24 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * RETRAIT DES ENCADREMENTS DE SURCOUCHE (bleu/orange) autour des KPI bancaires
 * Le wrapper du module banque (V2) recevait un cadre dégradé via un style
 * parent. On force transparent + border 0 pour neutraliser.
 * ═══════════════════════════════════════════════════════════════════════════ */
.banque-page,
.banque-page > div,
.bnk-kpis,
.bnk-kpis-wrap,
#view-root .banque-page,
#view-root .bnk-kpis {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Les KPI internes restent intacts (border-left coloré + ombre subtile)
   car .bnk-kpi a sa propre règle non couverte par les sélecteurs ci-dessus. */

/* ═══════════════════════════════════════════════════════════════════════════
 * NO-FRAME — élimine TOUS les encadrements de surcouche autour des KPI
 *   (toute l'app, pas seulement la banque)
 *
 * Cible :
 *   1. Les strips/bandes de KPI connus (dx, dv2, bnk, aff2, cli2, biz2, crm, dlux)
 *   2. Tout wrapper immédiat (.dx-extras-host etc.)
 *   3. Le parent direct du strip (sélecteur :has + fallback inline JS dans
 *      no-frame.js qui couvre les navigateurs sans :has)
 *
 * Les cartes internes (.dx-kpi, .dv2-kpi, .bnk-kpi, etc.) gardent leur style.
 * ═══════════════════════════════════════════════════════════════════════════ */
.dx-kpi-strip, .dx-extras-host, .dx-row,
.dv2-kpis, .bnk-kpis, .bnk-kpis-wrap,
.aff2-kpis, .cli2-kpis, .biz2-kpis,
.crm-kpis, .dlux-kpis,
.kpi-strip, .kpi-bar, .kpis-bar, .kpis-strip, .kpi-row,
[class*="kpi-strip"], [class*="kpi-bar"], [class*="-kpis"] {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Pseudo-éléments parents (frames via ::before / ::after) */
.dx-kpi-strip::before, .dx-kpi-strip::after,
.dx-extras-host::before, .dx-extras-host::after,
.dx-row::before, .dx-row::after {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  content: none !important;
}
/* Parent direct du strip (navigateurs supportant :has) */
:has(> .dx-kpi-strip),
:has(> .dx-extras-host),
:has(> .dv2-kpis),
:has(> .bnk-kpis),
:has(> .aff2-kpis) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Force les cartes KPI à rester blanches (si une override les a tintées) */
.dx-kpi {
  background: #ffffff !important;
  background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Dashboard mobile polish — réduit les overlays et rend les cartes lisibles.
 * Ces règles sont volontairement limitées au dashboard mobile.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.mf-dashboard-active {
    --mf-dashboard-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.mf-dashboard-active #main {
    left: 0 !important;
    width: 100vw !important;
    right: auto !important;
    overflow-x: hidden !important;
    padding: 14px 10px calc(var(--mf-dashboard-bottom) + 16px) !important;
  }

  body.mf-dashboard-active .hdr {
    overflow: hidden !important;
  }

  body.mf-dashboard-active .hdr-right {
    max-width: calc(100vw - 112px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    gap: 6px !important;
    justify-content: flex-end !important;
  }

  body.mf-dashboard-active .hdr-right > *:not(#notif-btn):not(.notif-btn):not(.theme-toggle):not([title*="Déconnexion"]):not(button[onclick*="doLogout"]) {
    display: none !important;
  }

  body.mf-dashboard-active #help-toggle-btn,
  body.mf-dashboard-active #help-toggle-icon {
    display: none !important;
  }

  body.mf-dashboard-active #nav-back-chip {
    display: none !important;
  }

  body.mf-dashboard-active #hyd-suite-dashboard-strip {
    margin: 0 0 12px !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.mf-dashboard-active #hyd-suite-dashboard-strip::-webkit-scrollbar {
    display: none !important;
  }

  body.mf-dashboard-active #hyd-suite-dashboard-strip > div {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(252px, 82vw) !important;
    grid-template-columns: none !important;
    gap: 10px !important;
  }

  body.mf-dashboard-active #hyd-suite-dashboard-strip button {
    min-width: 252px !important;
    min-height: 94px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    white-space: normal !important;
  }

  body.mf-dashboard-active #hyd-suite-dashboard-strip button b {
    font-size: 13px !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.mf-dashboard-active #hyd-suite-dashboard-strip button span {
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  body.mf-dashboard-active .mod-help-banner {
    padding: 16px 14px 14px !important;
    border-radius: 16px !important;
  }

  body.mf-dashboard-active .mod-help-banner .mod-help-decor {
    display: none !important;
  }

  body.mf-dashboard-active #achk-card {
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  body.mf-dashboard-active #achk-card .achk-head {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.mf-dashboard-active #achk-card .achk-title-wrap {
    gap: 12px !important;
  }

  body.mf-dashboard-active #achk-card .achk-title__main {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  body.mf-dashboard-active #achk-card .achk-title__sub {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body.mf-dashboard-active #achk-card .achk-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: 248px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  body.mf-dashboard-active #achk-card .achk-step {
    min-height: 76px !important;
    padding: 12px !important;
  }

  body.mf-dashboard-active #achk-card .achk-foot {
    display: none !important;
  }

  body.mf-dashboard-active .st-section {
    border-radius: 16px !important;
    padding: 16px 12px !important;
    overflow: hidden !important;
  }

  body.mf-dashboard-active .st-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 44px !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  body.mf-dashboard-active .st-item__main {
    min-width: 0 !important;
  }

  body.mf-dashboard-active .st-item__title {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }

  body.mf-dashboard-active .st-item__sub {
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  body.mf-dashboard-active .st-item__actions {
    opacity: 1 !important;
    width: 44px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  body.mf-dashboard-active .st-item__btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.mf-dashboard-active .st-item__btn--snooze {
    display: none !important;
  }

  body.mf-dashboard-active #mob-bottom-nav,
  body.mf-dashboard-active .mf-bottom-nav {
    display: none !important;
  }

  body.mf-dashboard-active #mob2-nav {
    height: 62px !important;
    padding: 6px max(12px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: content-box !important;
    z-index: 99500 !important;
  }

  body.mf-dashboard-active #pwa-install-fab,
  body.mf-dashboard-active #mob2-pwa,
  body.mf-dashboard-active #epnl-wrap,
  body.mf-dashboard-active #hydai-bubble,
  body.mf-dashboard-active .hp-ai-pane.collapsed,
  body.mf-dashboard-active .mf-fab,
  body.mf-dashboard-active .mf-command-trigger {
    display: none !important;
    pointer-events: none !important;
  }

  body.mf-dashboard-active .qafab2-btn {
    right: 14px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 99480 !important;
  }

  body.mf-dashboard-active .qafab2-bd:not(.show),
  body.mf-dashboard-active .qafab2-pop:not(.show) {
    display: none !important;
  }

  body.mf-dashboard-active .toast {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 901px) {
  body.topbar-v2-active #mob2-pwa,
  body.topbar-v2-active #pwa-install-fab {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Dashboard mobile/tablette — version icônes seules + anti-débordement.
 * Les sélecteurs body.is-mobile couvrent aussi les cas où la classe dashboard
 * arrive avec un léger retard au boot.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.is-mobile {
    --mf-dashboard-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  body.is-mobile > :not(script):not(style):not(link):not(template) {
    zoom: 1 !important;
  }

  body.is-mobile #app,
  body.is-mobile #login-screen {
    width: 100% !important;
  }

  body.is-mobile #app {
    height: 100vh !important;
  }

  body.is-mobile #login-screen {
    min-height: 100vh !important;
  }

  body.is-mobile .modal,
  body.is-mobile .cmdk-overlay,
  body.is-mobile .help-drawer-overlay,
  body.is-mobile .notif-panel {
    width: 100vw !important;
  }

  html,
  body.is-mobile {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.is-mobile #main:has(#hyd-suite-dashboard-strip),
  body.mf-dashboard-active #main {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: auto !important;
    overflow-x: hidden !important;
    padding: 12px 10px calc(var(--mf-dashboard-bottom) + 18px) !important;
  }

  body.is-mobile #main:has(#hyd-suite-dashboard-strip) > *,
  body.mf-dashboard-active #main > * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  body.is-mobile #hyd-suite-dashboard-strip,
  body.mf-dashboard-active #hyd-suite-dashboard-strip {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 0 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.is-mobile #hyd-suite-dashboard-strip::-webkit-scrollbar,
  body.mf-dashboard-active #hyd-suite-dashboard-strip::-webkit-scrollbar {
    display: none !important;
  }

  body.is-mobile #hyd-suite-dashboard-strip > div,
  body.mf-dashboard-active #hyd-suite-dashboard-strip > div {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(164px, calc((100vw - 34px) / 2)) !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: max-content !important;
    max-width: none !important;
  }

  body.is-mobile #hyd-suite-dashboard-strip button,
  body.mf-dashboard-active #hyd-suite-dashboard-strip button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 118px !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  body.is-mobile #hyd-suite-dashboard-strip button b,
  body.mf-dashboard-active #hyd-suite-dashboard-strip button b {
    font-size: 15px !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.is-mobile #hyd-suite-dashboard-strip button span,
  body.mf-dashboard-active #hyd-suite-dashboard-strip button span {
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.is-mobile .mod-help-banner,
  body.mf-dashboard-active .mod-help-banner {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 16px 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  body.is-mobile .mod-help-banner .mod-help-decor,
  body.mf-dashboard-active .mod-help-banner .mod-help-decor {
    display: none !important;
  }

  body.is-mobile .mod-help-icon,
  body.mf-dashboard-active .mod-help-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    line-height: 1 !important;
  }

  body.is-mobile .mod-help-body,
  body.mf-dashboard-active .mod-help-body {
    min-width: 0 !important;
  }

  body.is-mobile .mod-help-text,
  body.mf-dashboard-active .mod-help-text {
    font-size: 14px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body.is-mobile .mod-help-close,
  body.mf-dashboard-active .mod-help-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    justify-self: end !important;
  }

  body.is-mobile #st-card,
  body.mf-dashboard-active #st-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 20px 14px 14px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  body.is-mobile #st-card .st-head,
  body.mf-dashboard-active #st-card .st-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  body.is-mobile #st-card .st-title-wrap,
  body.mf-dashboard-active #st-card .st-title-wrap {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    align-items: center !important;
  }

  body.is-mobile #st-card .st-title__icon,
  body.mf-dashboard-active #st-card .st-title__icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
  }

  body.is-mobile #st-card .st-title__main,
  body.mf-dashboard-active #st-card .st-title__main {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  body.is-mobile #st-card .st-title__sub,
  body.mf-dashboard-active #st-card .st-title__sub {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  body.is-mobile #st-card .st-stats,
  body.mf-dashboard-active #st-card .st-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  body.is-mobile #st-card .st-section,
  body.mf-dashboard-active #st-card .st-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.is-mobile #st-card .st-list,
  body.mf-dashboard-active #st-card .st-list {
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  body.is-mobile #st-card .st-item,
  body.mf-dashboard-active #st-card .st-item {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  body.is-mobile #st-card .st-item__urgency-dot,
  body.mf-dashboard-active #st-card .st-item__urgency-dot {
    left: 10px !important;
    transform: translateY(-50%) !important;
  }

  body.is-mobile #st-card .st-item__ico,
  body.mf-dashboard-active #st-card .st-item__ico {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 19px !important;
  }

  body.is-mobile #st-card .st-item__main,
  body.is-mobile #st-card .st-item__title,
  body.is-mobile #st-card .st-item__sub,
  body.mf-dashboard-active #st-card .st-item__main,
  body.mf-dashboard-active #st-card .st-item__title,
  body.mf-dashboard-active #st-card .st-item__sub {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  body.is-mobile #st-card .st-item__title,
  body.mf-dashboard-active #st-card .st-item__title {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  body.is-mobile #st-card .st-item__sub,
  body.mf-dashboard-active #st-card .st-item__sub {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.is-mobile #st-card .st-item__actions,
  body.mf-dashboard-active #st-card .st-item__actions,
  body.is-mobile #st-card .st-foot,
  body.mf-dashboard-active #st-card .st-foot {
    display: none !important;
  }

  body.is-mobile #mob-bottom-nav,
  body.is-mobile .mf-bottom-nav,
  body.mf-dashboard-active #mob-bottom-nav,
  body.mf-dashboard-active .mf-bottom-nav {
    display: none !important;
    pointer-events: none !important;
  }

  body.is-mobile #mob2-nav,
  body.mf-dashboard-active #mob2-nav {
    display: grid !important;
    grid-template-columns: repeat(var(--mob2-slot-count, 6), minmax(0, 1fr)) !important;
    align-items: center !important;
    height: 64px !important;
    padding: 6px max(10px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: content-box !important;
    z-index: 99500 !important;
  }

  body.is-mobile #mob2-nav .mob2-it,
  body.mf-dashboard-active #mob2-nav .mob2-it {
    min-width: 0 !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 !important;
  }

  body.is-mobile #mob2-nav .mob2-it__lbl,
  body.mf-dashboard-active #mob2-nav .mob2-it__lbl,
  body.is-mobile #mob-bottom-nav .mob-nav-item > span:not(.mob-nav-icon),
  body.mf-dashboard-active #mob-bottom-nav .mob-nav-item > span:not(.mob-nav-icon),
  body.is-mobile .mf-bottom-nav .mf-label,
  body.mf-dashboard-active .mf-bottom-nav .mf-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.is-mobile #mob2-nav .mob2-it__icon,
  body.mf-dashboard-active #mob2-nav .mob2-it__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body.is-mobile #mob2-nav .mob2-it[data-tab="__plus"] .mob2-it__icon,
  body.mf-dashboard-active #mob2-nav .mob2-it[data-tab="__plus"] .mob2-it__icon {
    font-size: 0 !important;
    padding: 0 !important;
  }

  body.is-mobile .qafab2-btn,
  body.mf-dashboard-active .qafab2-btn {
    right: 16px !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 99480 !important;
  }

  body.is-mobile .qafab2-pop,
  body.mf-dashboard-active .qafab2-pop {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 700px) and (max-width: 900px) {
  body.is-mobile #hyd-suite-dashboard-strip > div,
  body.mf-dashboard-active #hyd-suite-dashboard-strip > div {
    grid-auto-columns: minmax(188px, calc((100vw - 48px) / 3)) !important;
  }

  body.is-mobile #st-card,
  body.mf-dashboard-active #st-card,
  body.is-mobile .mod-help-banner,
  body.mf-dashboard-active .mod-help-banner {
    border-radius: 20px !important;
  }
}

@media (max-width: 420px) {
  body.is-mobile #hyd-suite-dashboard-strip > div,
  body.mf-dashboard-active #hyd-suite-dashboard-strip > div {
    grid-auto-columns: minmax(154px, calc((100vw - 32px) / 2)) !important;
  }

  body.is-mobile #hyd-suite-dashboard-strip button,
  body.mf-dashboard-active #hyd-suite-dashboard-strip button {
    min-height: 112px !important;
    padding: 13px 11px !important;
  }

  body.is-mobile #hyd-suite-dashboard-strip button b,
  body.mf-dashboard-active #hyd-suite-dashboard-strip button b {
    font-size: 14px !important;
  }

  body.is-mobile .mod-help-banner,
  body.mf-dashboard-active .mod-help-banner {
    grid-template-columns: 46px minmax(0, 1fr) 42px !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }

  body.is-mobile .mod-help-icon,
  body.mf-dashboard-active .mod-help-icon {
    width: 46px !important;
    height: 46px !important;
  }

  body.is-mobile #st-card,
  body.mf-dashboard-active #st-card {
    padding: 18px 12px 12px !important;
  }

  body.is-mobile #st-card .st-title-wrap,
  body.mf-dashboard-active #st-card .st-title-wrap {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  body.is-mobile #st-card .st-title__icon,
  body.mf-dashboard-active #st-card .st-title__icon {
    width: 52px !important;
    height: 52px !important;
  }

  body.is-mobile #st-card .st-title__main,
  body.mf-dashboard-active #st-card .st-title__main {
    font-size: 21px !important;
  }
}