/* ML UREL — V6 HTML FIDELE + TOPNAV
   Objectif : reprendre fidelement le langage visuel de ML_UREL_Design_2026.html
   sans ajouter de sidebar et SANS modifier la navigation horizontale existante.
   Le menu principal/sous-menu reste celui de topNavigation.css. */

:root{
  --ml-bg:#f3f6fb;
  --ml-paper:#fff;
  --ml-soft:#f7f9fd;
  --ml-ink:#192e50;
  --ml-muted:#63738b;
  --ml-border:#e0e7f1;
  --ml-primary:#265ccd;
  --ml-primary-soft:#ecf2ff;
  --ml-primary-text:#fff;
  --ml-lait:#2875db;
  --ml-viande:#dd862d;
  --ml-green:#248b69;
  --ml-purple:#8062b9;
  --ml-shadow:0 4px 18px rgba(23,44,74,.024);
  --ml-radius:13px;
}

html,body,#root{min-height:100%;background:var(--ml-bg)!important}
body{margin:0;color:var(--ml-ink);font-family:Inter,"Segoe UI",Arial,sans-serif!important}
#app.topnav-layout{min-height:100vh;background:var(--ml-bg)!important;color:var(--ml-ink)!important;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:13px!important;line-height:1.5!important}
#app.topnav-layout *{box-sizing:border-box}
#app.topnav-layout button,#app.topnav-layout input,#app.topnav-layout select,#app.topnav-layout textarea{font-family:inherit}
#app.topnav-layout button:focus-visible,#app.topnav-layout select:focus-visible,#app.topnav-layout input:focus-visible,#app.topnav-layout a:focus-visible{outline:3px solid rgba(38,92,205,.22)!important;outline-offset:2px!important}

/* ============================================================
   EN-TETE : meme sobriete que le prototype HTML.
   IMPORTANT : on ne touche PAS a .top-main-nav / .top-sub-nav.
   ============================================================ */
#app.topnav-layout .top-app-header{
  min-height:64px!important;padding:10px 20px!important;gap:14px!important;
  background:var(--ml-paper)!important;border-bottom:1px solid var(--ml-border)!important;
  box-shadow:none!important
}
#app.topnav-layout .top-brand{gap:10px!important}
#app.topnav-layout .top-brand img{width:46px!important;height:46px!important;object-fit:contain!important}
#app.topnav-layout .top-brand strong{font-size:15px!important;font-weight:650!important;color:var(--ml-ink)!important;letter-spacing:-.2px!important}
#app.topnav-layout .top-brand span{font-size:9px!important;color:var(--ml-muted)!important;margin-top:3px!important}
#app.topnav-layout .top-title-block strong{font-size:16px!important;font-weight:650!important;color:var(--ml-ink)!important;letter-spacing:-.35px!important}
#app.topnav-layout .top-title-block span{font-size:10px!important;color:var(--ml-muted)!important;margin-top:2px!important}
/* Les filtres sont deja centralises dans la barre globale : pas de doublon dans le header. */
#app.topnav-layout .top-context-filters{display:none!important}
#app.topnav-layout .top-actions{gap:7px!important}
#app.topnav-layout .top-action-btn,#app.topnav-layout .top-logout-btn{
  width:34px!important;height:34px!important;border:1px solid var(--ml-border)!important;border-radius:8px!important;
  background:var(--ml-paper)!important;color:var(--ml-ink)!important;box-shadow:none!important
}
#app.topnav-layout .top-action-btn:hover,#app.topnav-layout .top-logout-btn:hover{background:var(--ml-soft)!important}
#app.topnav-layout .top-user-box{gap:8px!important}
#app.topnav-layout .top-user-box .ubadge{width:32px!important;height:32px!important;border-radius:9px!important;background:var(--ml-primary-soft)!important;color:var(--ml-primary)!important;font-size:11px!important;font-weight:650!important}
#app.topnav-layout .top-user-box strong{font-size:10px!important;font-weight:600!important;color:var(--ml-ink)!important}
#app.topnav-layout .top-user-box span{font-size:9px!important;color:var(--ml-muted)!important}

/* ============================================================
   BARRE DE FILTRES GLOBAUX : traduite du panneau de filtres HTML
   ============================================================ */
#app.topnav-layout .top-context-strip{
  position:relative!important;z-index:3!important;
  width:calc(100% - 32px)!important;max-width:1600px!important;
  margin:12px auto 0!important;padding:11px 13px!important;
  display:grid!important;grid-template-columns:auto auto minmax(560px,1fr) auto!important;
  align-items:center!important;gap:14px!important;min-height:56px!important;
  background:var(--ml-paper)!important;border:1px solid var(--ml-border)!important;
  border-radius:var(--ml-radius)!important;box-shadow:var(--ml-shadow)!important;
  color:var(--ml-muted)!important;font-size:10px!important;white-space:normal!important;overflow:visible!important
}
#app.topnav-layout .top-context-strip>span:not(.top-sync-state){white-space:nowrap!important}
#app.topnav-layout .top-context-strip b{color:var(--ml-muted)!important;font-weight:550!important}
#app.topnav-layout .top-dashboard-period-slot{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important}
#app.topnav-layout .ml-global-context-controls{display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:10px!important;flex-wrap:nowrap!important;width:100%!important;max-width:900px!important;margin:auto!important}
#app.topnav-layout .ml-global-context-controls label,#app.topnav-layout .ml-global-context-urel{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:5px!important;margin:0!important;min-width:0!important}
#app.topnav-layout .ml-global-context-controls label>span,#app.topnav-layout .ml-global-context-urel>span{font-size:10px!important;font-weight:550!important;color:var(--ml-muted)!important;text-transform:none!important;letter-spacing:0!important}
#app.topnav-layout .ml-global-context-controls select,#app.topnav-layout .ml-global-context-urel select{
  height:34px!important;min-width:96px!important;max-width:180px!important;padding:0 30px 0 10px!important;
  background:var(--ml-paper)!important;border:1px solid var(--ml-border)!important;border-radius:8px!important;
  color:var(--ml-ink)!important;font-size:11px!important;font-weight:500!important;box-shadow:none!important
}
#app.topnav-layout .ml-global-context-controls .ml-global-period{min-width:145px!important}
#app.topnav-layout .ml-global-context-urel{min-width:160px!important}
#app.topnav-layout .ml-global-context-urel select{min-width:160px!important;max-width:210px!important}
#app.topnav-layout .ml-global-context-refresh{width:34px!important;height:34px!important;align-self:flex-end!important;border:1px solid var(--ml-border)!important;border-radius:8px!important;background:var(--ml-paper)!important;color:var(--ml-primary)!important;font-size:16px!important;box-shadow:none!important}
#app.topnav-layout .ml-global-context-refresh:hover{background:var(--ml-primary-soft)!important}
#app.topnav-layout .top-sync-state{justify-self:end!important;margin-left:0!important;white-space:nowrap!important;color:var(--ml-green)!important;font-size:10px!important}
#app.topnav-layout .top-sync-state i{width:6px!important;height:6px!important;background:var(--ml-green)!important}

/* ============================================================
   ZONE DE CONTENU : largeur et respiration du prototype
   ============================================================ */
#app.topnav-layout .top-content{
  width:calc(100% - 32px)!important;max-width:1600px!important;
  margin:0 auto!important;padding:18px 0 30px!important;min-height:calc(100vh - 190px)!important
}
#app.topnav-layout main.content h1,#app.topnav-layout .dg-v5-heading h1{font-size:23px!important;font-weight:650!important;letter-spacing:-.7px!important;line-height:1.3!important;color:var(--ml-ink)!important}
#app.topnav-layout .dg-v5-heading{margin:0 0 18px!important;padding:0!important;align-items:center!important}
#app.topnav-layout .dg-v5-heading p,#app.topnav-layout .subtitle{font-size:11px!important;color:var(--ml-muted)!important;margin-top:5px!important}
#app.topnav-layout .dg-v5-heading-actions{gap:8px!important}
#app.topnav-layout .dg-v5-heading-actions button,#app.topnav-layout .btn-primary,#app.topnav-layout button.primary{
  min-height:35px!important;padding:7px 10px!important;border-radius:8px!important;border:1px solid var(--ml-border)!important;
  font-size:11px!important;font-weight:550!important;box-shadow:none!important
}
#app.topnav-layout .dg-v5-heading-actions button:first-child{background:var(--ml-green)!important;border-color:var(--ml-green)!important;color:#fff!important}
#app.topnav-layout .dg-v5-heading-actions button:last-child{background:var(--ml-primary)!important;border-color:var(--ml-primary)!important;color:#fff!important}

/* ============================================================
   INTRO / PANNEAUX : copie des proportions .ru-panel du prototype
   ============================================================ */
#app.topnav-layout .dg-synth-intro,#app.topnav-layout .dg-global-panel,#app.topnav-layout .dg-synthesis-urel-panel,
#app.topnav-layout .ru-panel,#app.topnav-layout .panel,#app.topnav-layout .kcard{
  background:var(--ml-paper)!important;border:1px solid var(--ml-border)!important;border-radius:var(--ml-radius)!important;
  box-shadow:var(--ml-shadow)!important
}
#app.topnav-layout .dg-synth-intro{padding:13px 14px!important;margin:0 0 16px!important;gap:14px!important}
#app.topnav-layout .dg-synth-intro>div:first-child strong{font-size:12px!important;font-weight:600!important;color:var(--ml-ink)!important}
#app.topnav-layout .dg-synth-intro>div:first-child span{font-size:10px!important;color:var(--ml-muted)!important}
#app.topnav-layout .dg-synth-diagnostic-tip{max-width:620px!important;padding:8px 10px!important;border-radius:8px!important;background:var(--ml-primary-soft)!important;border:1px solid #dbe5f8!important;color:var(--ml-muted)!important;font-size:10px!important;line-height:1.4!important}
#app.topnav-layout .dg-synth-diagnostic-tip b{color:var(--ml-ink)!important;font-weight:600!important}

/* ============================================================
   KPI DG : la partie la plus importante.
   On neutralise les anciennes cartes rouges/vertes et on reprend
   la carte blanche + pied compact du prototype HTML.
   ============================================================ */
#app.topnav-layout .dg-synth-kpi-grid,#app.topnav-layout .dg-exec-card-grid{gap:9px!important;margin-bottom:12px!important}
#app.topnav-layout .dg-executive-v5 .dg-exec-card.dg-kpi-modern,
#app.topnav-layout .dg-executive-v5 .dg-exec-card.dg-kpi-modern.bad,
#app.topnav-layout .dg-executive-v5 .dg-exec-card.dg-kpi-modern.ok,
#app.topnav-layout .dg-executive-v5 .dg-exec-card.dg-kpi-modern.partial,
#app.topnav-layout .dg-executive-v5 .dg-exec-card.dg-kpi-modern.neutral{
  position:relative!important;min-width:0!important;min-height:178px!important;
  padding:14px 12px!important;border:1px solid var(--ml-border)!important;border-left:1px solid var(--ml-border)!important;
  border-radius:var(--ml-radius)!important;background:var(--ml-paper)!important;
  box-shadow:var(--ml-shadow)!important;transform:none!important;overflow:hidden!important
}
#app.topnav-layout .dg-executive-v5 .dg-exec-card.dg-kpi-modern:hover{transform:none!important;border-color:#d7e0eb!important;box-shadow:0 6px 20px rgba(23,44,74,.045)!important}
#app.topnav-layout .dg-kpi-modern:before,#app.topnav-layout .dg-exec-card.diagnostic-action.dg-kpi-modern:after{display:none!important;content:none!important}
#app.topnav-layout .dg-kpi-modern-top{display:block!important}
#app.topnav-layout .dg-kpi-modern .dg-card-head{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;margin:0 0 9px!important;min-height:28px!important}
#app.topnav-layout .dg-kpi-modern .dg-card-icon{width:28px!important;height:28px!important;flex:0 0 28px!important;border-radius:8px!important;background:var(--ml-primary-soft)!important;color:var(--ml-primary)!important;box-shadow:none!important;font-size:16px!important}
#app.topnav-layout .dg-kpi-modern.bad .dg-card-icon{background:rgba(221,134,45,.10)!important;color:var(--ml-viande)!important}
#app.topnav-layout .dg-kpi-modern.ok .dg-card-icon{background:rgba(36,139,105,.10)!important;color:var(--ml-green)!important}
#app.topnav-layout .dg-kpi-modern.partial .dg-card-icon{background:rgba(128,98,185,.10)!important;color:var(--ml-purple)!important}
#app.topnav-layout .dg-kpi-modern .dg-card-title{font-size:11px!important;font-weight:550!important;line-height:1.3!important;color:var(--ml-ink)!important;white-space:normal!important;overflow:visible!important}
#app.topnav-layout .dg-kpi-trend{display:none!important}
#app.topnav-layout .dg-kpi-modern-value{display:block!important;margin:0!important;font-size:25px!important;letter-spacing:-.7px!important;font-weight:650!important;line-height:1.25!important;color:var(--ml-ink)!important;font-variant-numeric:tabular-nums!important}
#app.topnav-layout .dg-kpi-modern-period{display:flex!important;align-items:center!important;gap:5px!important;margin:5px 0 0!important;font-size:10px!important;color:var(--ml-muted)!important}
#app.topnav-layout .dg-kpi-modern-period>span{font-size:10px!important;color:var(--ml-primary)!important}
#app.topnav-layout .dg-kpi-modern-separator{height:0!important;margin:0!important;background:transparent!important}

/* comparaison : transforme les 2 grosses boites en pied compact, comme .ru-kpi-foot */
#app.topnav-layout .dg-kpi-compare-row{display:flex!important;align-items:center!important;gap:6px 12px!important;flex-wrap:wrap!important;margin:6px 0 0!important;padding:0!important}
#app.topnav-layout .dg-kpi-compare-box,#app.topnav-layout .dg-kpi-evolution-box,
#app.topnav-layout .dg-kpi-evolution-box.up,#app.topnav-layout .dg-kpi-evolution-box.down,#app.topnav-layout .dg-kpi-evolution-box.flat{
  min-width:0!important;width:auto!important;display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:4px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
}
#app.topnav-layout .dg-kpi-compare-box>span,#app.topnav-layout .dg-kpi-evolution-box>span{font-size:10px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;color:var(--ml-muted)!important;overflow:visible!important}
#app.topnav-layout .dg-kpi-compare-box>b,#app.topnav-layout .dg-kpi-evolution-box>b{font-size:10px!important;font-weight:550!important;line-height:1.3!important;color:var(--ml-ink)!important;overflow:visible!important}
#app.topnav-layout .dg-kpi-evolution-box>b{display:inline-flex!important;align-items:center!important;gap:3px!important}
#app.topnav-layout .dg-kpi-evolution-box i{display:none!important}
#app.topnav-layout .dg-kpi-evolution-box.up>b{color:var(--ml-green)!important}
#app.topnav-layout .dg-kpi-evolution-box.down>b{color:#c84a47!important}
#app.topnav-layout .dg-kpi-evolution-box.flat>b{color:var(--ml-muted)!important}

/* objectif : meme structure visuelle que .target dans le prototype */
#app.topnav-layout .dg-kpi-objective-row{margin-top:9px!important;padding-top:8px!important;border-top:1px solid var(--ml-border)!important;display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:6px!important;color:var(--ml-muted)!important;font-size:10px!important}
#app.topnav-layout .dg-kpi-objective-row .dg-kpi-target-icon{display:none!important}
#app.topnav-layout .dg-kpi-objective-row>span:nth-child(2){font-size:10px!important;font-weight:400!important;color:var(--ml-muted)!important}
#app.topnav-layout .dg-kpi-objective-row>b{font-size:10px!important;font-weight:550!important;color:var(--ml-ink)!important;text-align:right!important}
#app.topnav-layout .dg-executive-v5 .dg-kpi-modern-progress{height:5px!important;margin-top:6px!important;background:var(--ml-soft)!important;border-radius:8px!important;box-shadow:none!important}
#app.topnav-layout .dg-executive-v5 .dg-kpi-modern-progress>span{height:100%!important;border-radius:8px!important;background:var(--ml-primary)!important;box-shadow:none!important}
#app.topnav-layout .dg-executive-v5 .dg-kpi-modern-progress.bad>span{background:var(--ml-viande)!important}
#app.topnav-layout .dg-executive-v5 .dg-kpi-modern-progress.ok>span{background:var(--ml-green)!important}
#app.topnav-layout .dg-executive-v5 .dg-kpi-modern-progress.partial>span{background:var(--ml-purple)!important}
#app.topnav-layout .dg-executive-v5 .dg-kpi-modern-scale{margin-top:4px!important;font-size:9px!important;color:var(--ml-muted)!important}
#app.topnav-layout .dg-executive-v5 .dg-kpi-modern-scale b{font-size:9px!important;font-weight:550!important;color:var(--ml-ink)!important}

/* Statut : conserve l'information mais supprime les grands bandeaux colores */
#app.topnav-layout .dg-kpi-status-banner,#app.topnav-layout .dg-kpi-status-banner.bad,#app.topnav-layout .dg-kpi-status-banner.ok,#app.topnav-layout .dg-kpi-status-banner.partial,#app.topnav-layout .dg-kpi-status-banner.neutral{
  display:flex!important;align-items:center!important;gap:5px!important;margin-top:6px!important;padding:2px 0!important;
  border:0!important;border-radius:0!important;background:transparent!important;font-size:9px!important;box-shadow:none!important
}
#app.topnav-layout .dg-kpi-status-banner>span{width:14px!important;height:14px!important;font-size:8px!important;background:transparent!important}
#app.topnav-layout .dg-kpi-status-banner>b{font-size:9px!important;font-weight:550!important}
#app.topnav-layout .dg-kpi-status-banner>small{margin-left:auto!important;font-size:8px!important;color:var(--ml-muted)!important}
#app.topnav-layout .dg-kpi-status-banner.bad{color:#c84a47!important}
#app.topnav-layout .dg-kpi-status-banner.ok{color:var(--ml-green)!important}
#app.topnav-layout .dg-kpi-status-banner.partial{color:#b57925!important}
#app.topnav-layout .dg-kpi-status-banner.neutral{color:var(--ml-muted)!important}

/* Carte production / cartes annexes */
#app.topnav-layout .dg-synth-production-card,#app.topnav-layout .dg-production-card,#app.topnav-layout .dg-exec-production,
#app.topnav-layout .dg-synth-kpi-grid>article:not(.dg-kpi-modern){
  background:var(--ml-paper)!important;border:1px solid var(--ml-border)!important;border-radius:var(--ml-radius)!important;box-shadow:var(--ml-shadow)!important
}

/* ============================================================
   AUTRES KPI DE L'APPLICATION : reprise directe du prototype
   ============================================================ */
#app.topnav-layout .ru-kpi,#app.topnav-layout .ru-mini,#app.topnav-layout .pilotage-kpi,#app.topnav-layout .kcard{
  min-width:0!important;background:var(--ml-paper)!important;border:1px solid var(--ml-border)!important;border-radius:var(--ml-radius)!important;
  box-shadow:var(--ml-shadow)!important;transform:none!important
}
#app.topnav-layout .ru-kpi,#app.topnav-layout .ru-mini{padding:14px 12px!important}
#app.topnav-layout .ru-kpi-head{display:flex!important;align-items:flex-start!important;gap:8px!important;margin-bottom:9px!important}
#app.topnav-layout .ru-kpi-icon{width:28px!important;height:28px!important;border-radius:8px!important;box-shadow:none!important}
#app.topnav-layout .ru-kpi-title{font-size:11px!important;font-weight:550!important;color:var(--ml-ink)!important}
#app.topnav-layout .ru-kpi-value{font-size:25px!important;letter-spacing:-.7px!important;font-weight:650!important;line-height:1.25!important;color:var(--ml-ink)!important}
#app.topnav-layout .ru-mini .ru-kpi-value{font-size:20px!important}
#app.topnav-layout .ru-kpi-foot{font-size:10px!important;color:var(--ml-muted)!important;margin-top:5px!important}
#app.topnav-layout .ru-kpi:hover,#app.topnav-layout .ru-mini:hover,#app.topnav-layout .pilotage-kpi:hover,#app.topnav-layout .kcard:hover{transform:none!important;box-shadow:0 6px 20px rgba(23,44,74,.045)!important}
#app.topnav-layout .ml-global-objective{margin-top:9px!important;padding-top:8px!important;border-top:1px solid var(--ml-border)!important;gap:6px!important}
#app.topnav-layout .ml-global-objective-head span,#app.topnav-layout .ml-global-objective-head b{font-size:10px!important;font-weight:550!important}
#app.topnav-layout .ml-global-objective-bar{height:5px!important;background:var(--ml-soft)!important;border-radius:8px!important}
#app.topnav-layout .ml-global-objective-scale span,#app.topnav-layout .ml-global-objective-scale strong{font-size:9px!important}
#app.topnav-layout .ml-global-objective-status{font-size:9px!important;font-weight:550!important}

/* ============================================================
   GRAPHIQUES / PANNEAUX / TABLEAUX
   ============================================================ */
#app.topnav-layout .dg-synth-charts,#app.topnav-layout .dg-v5-chart-grid,#app.topnav-layout .ru-chart-grid{gap:12px!important;margin:14px 0!important}
#app.topnav-layout .dg-global-panel,#app.topnav-layout .dg-v5-panel,#app.topnav-layout .dg-synthesis-urel-panel{overflow:hidden!important}
#app.topnav-layout .dg-global-panel-head,#app.topnav-layout .dg-synthesis-urel-head,#app.topnav-layout .ru-panel-head{
  padding:14px!important;min-height:auto!important;background:var(--ml-paper)!important;border-bottom:1px solid var(--ml-border)!important
}
#app.topnav-layout .dg-global-panel-head strong,#app.topnav-layout .dg-synthesis-urel-head strong,#app.topnav-layout .ru-panel-head h3{font-size:12px!important;font-weight:600!important;line-height:1.5!important;color:var(--ml-ink)!important}
#app.topnav-layout .dg-global-panel-head span,#app.topnav-layout .dg-synthesis-urel-head span{font-size:10px!important;color:var(--ml-muted)!important}
#app.topnav-layout .dg-v5-chart,#app.topnav-layout .dg-global-chart,#app.topnav-layout .chart-box{background:var(--ml-paper)!important}
#app.topnav-layout .chart-legend{font-size:10px!important;color:var(--ml-muted)!important}

#app.topnav-layout table{width:100%;border-collapse:collapse;font-size:11px!important;font-variant-numeric:tabular-nums}
#app.topnav-layout table th{background:var(--ml-soft)!important;padding:11px 12px!important;font-weight:550!important;color:var(--ml-muted)!important;font-size:10px!important;text-align:left!important;white-space:nowrap!important;border-bottom:1px solid var(--ml-border)!important}
#app.topnav-layout table td{padding:12px!important;background:var(--ml-paper)!important;color:var(--ml-ink)!important;border-bottom:1px solid var(--ml-border)!important;white-space:nowrap!important}
#app.topnav-layout table tbody tr:nth-child(even) td{background:var(--ml-paper)!important}
#app.topnav-layout table tbody tr:hover td{background:var(--ml-soft)!important}
#app.topnav-layout .table-wrap,#app.topnav-layout .dg-global-table-wrap,#app.topnav-layout .dg-synthesis-urel-table-wrap{max-width:100%!important;overflow:auto!important}

/* ============================================================
   FORMULAIRES / BOUTONS GENERIQUES
   ============================================================ */
#app.topnav-layout select,#app.topnav-layout input,#app.topnav-layout textarea{
  background:var(--ml-paper);border:1px solid var(--ml-border);border-radius:8px;color:var(--ml-ink);box-shadow:none
}
#app.topnav-layout .action{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:35px!important;border:1px solid var(--ml-border)!important;background:var(--ml-paper)!important;border-radius:8px!important;padding:7px 10px!important;font-size:11px!important;font-weight:550!important}
#app.topnav-layout .action.primary{background:var(--ml-primary)!important;border-color:var(--ml-primary)!important;color:#fff!important}
#app.topnav-layout .link{color:var(--ml-primary)!important;font-size:11px!important}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1450px){
  #app.topnav-layout .top-context-strip{grid-template-columns:auto auto minmax(430px,1fr) auto!important;gap:10px!important}
  #app.topnav-layout .ml-global-context-controls{gap:7px!important}
  #app.topnav-layout .ml-global-context-controls select{min-width:88px!important;max-width:145px!important}
  #app.topnav-layout .ml-global-context-controls .ml-global-period{min-width:130px!important}
  #app.topnav-layout .ml-global-context-urel,#app.topnav-layout .ml-global-context-urel select{min-width:145px!important;max-width:180px!important}
}
@media(max-width:1180px){
  #app.topnav-layout .top-app-header{grid-template-columns:auto 1fr auto!important;padding:9px 14px!important}
  #app.topnav-layout .top-user-box>div:last-child{display:none!important}
  #app.topnav-layout .top-context-strip{grid-template-columns:auto auto!important;width:calc(100% - 20px)!important;padding:10px!important}
  #app.topnav-layout .top-dashboard-period-slot{grid-column:1/-1!important;justify-content:flex-start!important;overflow:hidden!important}
  #app.topnav-layout .ml-global-context-controls{justify-content:flex-start!important;max-width:none!important;overflow-x:auto!important;padding-bottom:2px!important}
  #app.topnav-layout .top-sync-state{justify-self:start!important}
  #app.topnav-layout .top-content{width:calc(100% - 20px)!important}
}
@media(max-width:900px){
  #app.topnav-layout .dg-synth-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #app.topnav-layout .dg-executive-v5 .dg-exec-card.dg-kpi-modern{min-height:auto!important}
}
@media(max-width:720px){
  #app.topnav-layout .top-app-header{min-height:56px!important;padding:8px 10px!important;gap:8px!important}
  #app.topnav-layout .top-brand img{width:40px!important;height:40px!important}
  #app.topnav-layout .top-brand>div{display:none!important}
  #app.topnav-layout .top-title-block strong{font-size:13px!important}
  #app.topnav-layout .top-user-box{display:none!important}
  #app.topnav-layout .top-context-strip{width:calc(100% - 12px)!important;margin-top:7px!important;padding:9px!important;border-radius:10px!important}
  #app.topnav-layout .top-context-strip>span:not(.top-sync-state){font-size:9px!important}
  #app.topnav-layout .ml-global-context-controls{overflow-x:auto!important}
  #app.topnav-layout .top-content{width:calc(100% - 12px)!important;padding-top:12px!important}
  #app.topnav-layout main.content h1,#app.topnav-layout .dg-v5-heading h1{font-size:21px!important}
  #app.topnav-layout .dg-synth-kpi-grid{grid-template-columns:1fr!important}
  #app.topnav-layout .dg-kpi-compare-row{gap:4px 9px!important}
}
@media(pointer:coarse){
  #app.topnav-layout .top-action-btn,#app.topnav-layout .top-logout-btn,#app.topnav-layout .ml-global-context-refresh,#app.topnav-layout .action{min-height:44px!important}
  #app.topnav-layout select,#app.topnav-layout input{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){#app.topnav-layout *{transition:none!important;scroll-behavior:auto!important}}