/* ============================================================
   wm-mobile.css — mobile refinement layer for the
   Wm.Products / Wm.Models / Wm.Dossier Blazor components.
   Global sheet: load AFTER <App>.styles.css so it wins ties.
   Class names are doubled (.x.x) so it overrides the
   components' scoped CSS without touching those files.
   Desktop (>900px) is left exactly as it is.
   ============================================================ */

/* ---------------- 1. Grid <-> card switch, unified at 900px ---------------- */
@media (max-width:900px){
.wmp-grid-shell.wmp-grid-shell{display:none!important}
.wmp-card-list.wmp-card-list{display:flex!important;flex-direction:column;gap:10px;padding:10px}
.wmp-mcard.wmp-mcard+.wmp-mcard.wmp-mcard{margin-top:0}
.wmp-mpager.wmp-mpager{display:flex!important}
}
@media (min-width:901px){
.wmp-card-list.wmp-card-list{display:none!important}
.wmp-mpager.wmp-mpager{display:none!important}
}

/* ---------------- 2. Page shell ---------------- */
@media (max-width:900px){
.wm-products.wm-products,.wm-models.wm-models,.wm-model-detail.wm-model-detail,.wm-dossier.wm-dossier,.wm-dossiers.wm-dossiers,.wm-dossier-detail.wm-dossier-detail{max-width:100%;overflow-x:clip}
.mud-main-content.mud-main-content{padding-bottom:env(safe-area-inset-bottom)}
.wmp-head.wmp-head{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:16px}
.wmp-head.wmp-head>button{order:-1;align-self:flex-start;min-height:44px}
.wmp-eyebrow.wmp-eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:2px}
.wmp-title.wmp-title{font-size:1.5rem!important;line-height:1.15}
.wmp-subtitle.wmp-subtitle{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---------------- 3. Stat cards -> swipeable rail ---------------- */
@media (max-width:900px){
.wmp-stats.wmp-stats{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 4px}
.wmp-stats.wmp-stats::-webkit-scrollbar{display:none}
.wmp-stat.wmp-stat{flex:0 0 clamp(148px,46%,220px);scroll-snap-align:start;padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic label" "ic value" "sub sub";column-gap:10px;align-items:center;transition:none}
.wmp-stat.wmp-stat:hover{transform:none;box-shadow:var(--wmp-shadow-sm)}
.wmp-stat.wmp-stat .wmp-ic.wmp-ic{grid-area:ic;width:30px;height:30px;border-radius:9px;margin-bottom:0}
.wmp-stat.wmp-stat .wmp-stat-label.wmp-stat-label{grid-area:label;font-size:11px;line-height:1.2;align-self:end}
.wmp-stat.wmp-stat .wmp-stat-value.wmp-stat-value{grid-area:value;font-size:20px!important;margin-top:0;align-self:start;overflow-wrap:anywhere}
.wmp-stat.wmp-stat .wmp-stat-sub.wmp-stat-sub{grid-area:sub;font-size:10.5px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------------- 4. Card header / toolbar ---------------- */
@media (max-width:900px){
.wmp-card.wmp-card{border-radius:12px}
.wmp-toolbar.wmp-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
.wmp-toolbar-left.wmp-toolbar-left{justify-content:space-between;gap:8px}
.wmp-toolbar-title.wmp-toolbar-title{font-size:14px}
.wmp-pill.wmp-pill{font-size:11px;padding:2px 8px}
.wmp-toolbar-right.wmp-toolbar-right{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.wmp-toolbar-right.wmp-toolbar-right>*{min-width:0}
.wmp-search.wmp-search{grid-column:1/-1;min-width:0!important;flex:none!important}
.wmp-search.wmp-search .mud-input-slot.mud-input-slot,.wmp-search.wmp-search input{font-size:16px!important}
.wmp-toolbar-right.wmp-toolbar-right .mud-tooltip-root.mud-tooltip-root{width:100%}
.wmp-toolbar-right.wmp-toolbar-right .mud-button-root.mud-button-root{width:100%;min-height:44px;justify-content:center}
.wmp-toolbar-right.wmp-toolbar-right .mud-icon-button.mud-icon-button{width:100%;min-height:44px;border-radius:10px}
.wmp-toolbar-right.wmp-toolbar-right .mud-button-filled.mud-button-filled{grid-column:1/-1}
}

/* ---------------- 5. Record cards ---------------- */
@media (max-width:900px){
.wmp-mcard.wmp-mcard{padding:12px 14px;border-radius:12px;-webkit-tap-highlight-color:transparent}
.wmp-mcard.wmp-mcard:active{background:var(--mud-palette-action-default-hover)}
.wmp-mcard.wmp-mcard.selected.selected{box-shadow:inset 0 0 0 1.5px var(--mud-palette-secondary)}
.wmp-mcard-top.wmp-mcard-top{flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin-bottom:6px}
.wmp-mcard-lead.wmp-mcard-lead{flex:1 1 auto;gap:6px}
.wmp-mcard.wmp-mcard .mud-checkbox.mud-checkbox{min-width:44px;min-height:44px;margin:-10px -8px -10px -12px}
.wmp-mcard-metric.wmp-mcard-metric .v.v{font-size:15px;white-space:nowrap}
.wmp-mcard-metric.wmp-mcard-metric .l.l{font-size:10px}
.wmp-mcard-desc.wmp-mcard-desc{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.35;margin-bottom:10px;max-width:100%}
.wmp-mcard-rows.wmp-mcard-rows{gap:10px 14px}
.wmp-mcard-rows.wmp-mcard-rows .kv.kv .k.k{font-size:10px}
.wmp-mcard-rows.wmp-mcard-rows .kv.kv .v.v{white-space:normal!important;overflow-wrap:anywhere;line-height:1.3}
.wmp-mcard-actions.wmp-mcard-actions{gap:8px;margin-top:10px;padding-top:6px}
.wmp-mcard-actions.wmp-mcard-actions .mud-icon-button.mud-icon-button{min-width:44px;min-height:44px}
.wmp-mcard-edit.wmp-mcard-edit{flex:1 1 100%;width:100%!important}
.wmp-mcard-edit.wmp-mcard-edit .mud-input-slot.mud-input-slot,.wmp-mcard-edit.wmp-mcard-edit input{font-size:16px!important}
.wmp-mcard-qty.wmp-mcard-qty .mud-input-slot.mud-input-slot,.wmp-mcard-qty.wmp-mcard-qty input{font-size:16px!important}
.wmp-card-empty.wmp-card-empty{padding:28px 14px}
.wmp-desc.wmp-desc{max-width:100%}
}

/* ---------------- 6. Pager + footer ---------------- */
@media (max-width:900px){
.wmp-mpager.wmp-mpager{align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;border-top:1px solid var(--mud-palette-divider)}
.wmp-mpager.wmp-mpager .mud-icon-button.mud-icon-button{min-width:44px;min-height:44px;border-radius:10px}
.wmp-mpager-info.wmp-mpager-info{flex:1;text-align:center;font-size:12px;line-height:1.25}
.wmp-foot.wmp-foot{padding:12px;font-size:12.5px}
}

/* ---------------- 7. Dossier setup + save ---------------- */
@media (max-width:900px){
.wmp-setup-card.wmp-setup-card{padding:14px}
.wmp-setup-row.wmp-setup-row{flex-direction:column;gap:12px}
.wmp-setup-row.wmp-setup-row .mud-input-slot.mud-input-slot,.wmp-setup-row.wmp-setup-row input{font-size:16px!important}
.wmp-save-bar.wmp-save-bar{gap:10px;padding-bottom:env(safe-area-inset-bottom)}
.wmp-save-alert.wmp-save-alert{flex:1 1 100%}
.wmp-save-btn.wmp-save-btn{width:100%;min-height:48px}
}

/* ---------------- 8. Composition charts ---------------- */
@media (max-width:900px){
.wmp-chart-section.wmp-chart-section{grid-template-columns:minmax(0,1fr)!important;gap:12px;margin-bottom:16px}
.wmp-chart-card.wmp-chart-card{padding:12px 14px}
.wmp-chart-card.wmp-chart-card svg{max-width:100%;height:auto}
.wmp-chart-empty.wmp-chart-empty{min-height:150px}
}

/* ---------------- 9. Dialogs on phones ---------------- */
@media (max-width:600px){
.mud-dialog-width-md.mud-dialog-width-md,.mud-dialog-width-lg.mud-dialog-width-lg,.mud-dialog-width-xl.mud-dialog-width-xl,.mud-dialog-width-xxl.mud-dialog-width-xxl{margin:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;display:flex;flex-direction:column}
.mud-dialog-width-sm.mud-dialog-width-sm{margin:12px!important;width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important}
.mud-dialog-title.mud-dialog-title{padding:14px 16px!important}
.mud-dialog-content.mud-dialog-content{padding:12px 14px!important;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mud-dialog-actions.mud-dialog-actions{padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;gap:8px;flex-wrap:wrap;border-top:1px solid var(--mud-palette-divider)}
.mud-dialog-actions.mud-dialog-actions .mud-button-root.mud-button-root{flex:1 1 auto;min-height:48px}
.mud-dialog.mud-dialog .mud-input-slot.mud-input-slot,.mud-dialog.mud-dialog input{font-size:16px!important}
}