/*
 * AdEditors Unified Design System — Stage DS-4 Mobile / Responsive Web
 * Mobile-first adaptation for embedded commerce dashboards (Shopify today;
 * intended as the reference behavior for Salla and future provider shells).
 */

:root{
  --adeds-mobile-nav-h:52px;
  --adeds-mobile-safe-bottom:max(12px,env(safe-area-inset-bottom));
  --adeds-mobile-safe-top:max(0px,env(safe-area-inset-top));
}

html,body{max-width:100%;overflow-x:hidden}
.adpai-shopify-app{min-width:0;max-width:100%;overflow-x:clip}
.adpai-app-main,.adpai-panel,.adpai-card,.adpai-history-card,.adpai-table-toolbar,.adeds-ds3-surface,.adeds-page-command{min-width:0;max-width:100%;box-sizing:border-box}
img,svg,canvas{max-width:100%}

/* Touch targets */
@media (pointer:coarse){
  .adpai-shopify-app :where(button,.adpai-button,a[role="button"],select,input[type="date"],input[type="search"]){min-height:44px}
  .adpai-app-nav button,.adpai-level-tabs button{min-height:44px}
}

@media(max-width:900px){
  body.adpai-shopify-shell{background:#f6f8fa}
  .adpai-shopify-app{padding-bottom:calc(10px + var(--adeds-mobile-safe-bottom))}

  /* Header becomes compact but keeps primary actions visible. */
  .adpai-app-header{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;padding:12px 14px!important;padding-top:calc(12px + var(--adeds-mobile-safe-top))!important;border-radius:0 0 18px 18px!important}
  .adpai-brand-lockup{min-width:0;gap:10px!important}.adpai-brand-lockup>div:last-child{min-width:0}.adpai-brand-lockup h1{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adpai-brand-lockup small{font-size:10px!important}
  .adpai-brand-mark,.adpai-brand-mark img{width:38px!important;height:38px!important;min-width:38px!important}
  .adpai-header-meta{grid-column:1/-1;display:flex!important;align-items:center!important;gap:6px!important;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:0 0 2px!important}.adpai-header-meta::-webkit-scrollbar{display:none}.adpai-header-meta>*{flex:0 0 auto}.adpai-store-name{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .adpai-header-actions{grid-column:2;grid-row:1;display:flex!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:nowrap!important}.adpai-header-actions .adpai-button{padding-inline:11px!important;font-size:11px!important;white-space:nowrap}.adpai-header-actions #adpai-sync-now{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;min-width:44px!important;padding:0!important}.adpai-header-actions #adpai-sync-now .adpai-button-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}.adpai-header-actions #adpai-sync-now .adeds-icon{width:19px!important;height:19px!important;margin:0!important}

  /* Main app navigation works inside Shopify/Salla mobile containers. */
  .adpai-app-nav{position:sticky!important;top:0;z-index:40;display:flex!important;gap:6px!important;width:100%;padding:7px 10px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-width:none;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(14px);box-shadow:0 4px 14px rgba(16,24,40,.05)!important}
  .adpai-app-nav::-webkit-scrollbar{display:none}.adpai-app-nav button{flex:0 0 auto!important;scroll-snap-align:center;white-space:nowrap!important;padding:8px 12px!important;border-radius:10px!important;font-size:12px!important}

  .adpai-app-main{padding:10px!important}

  /* Collapsible mobile filters: JS adds .adpai-mobile-filter-toggle and .is-mobile-collapsed. */
  .adpai-mobile-filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 0 8px;padding:10px 12px;border:1px solid var(--adeds-gray-200);border-radius:13px;background:#fff;color:var(--adeds-gray-800);font-family:var(--adeds-font);font-size:12px;font-weight:800;box-shadow:var(--adeds-shadow-xs)}
  .adpai-mobile-filter-toggle span:last-child{font-size:16px;line-height:1;transition:transform .18s var(--adeds-ease)}.adpai-mobile-filter-toggle[aria-expanded="true"] span:last-child{transform:rotate(180deg)}
  .adpai-filter-bar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;padding:11px!important;margin-bottom:10px!important;max-height:800px;opacity:1;overflow:hidden;transition:max-height .22s var(--adeds-ease),opacity .18s var(--adeds-ease),padding .18s var(--adeds-ease),margin .18s var(--adeds-ease)}
  .adpai-filter-bar.is-mobile-collapsed{max-height:0!important;opacity:0;padding-top:0!important;padding-bottom:0!important;margin-bottom:0!important;border-width:0!important;box-shadow:none!important;pointer-events:none}
  .adpai-filter-bar label{min-width:0!important}.adpai-filter-bar :where(input,select){width:100%!important;min-width:0!important}.adpai-filter-bar>.adpai-button{width:100%!important}

  /* DS-3 composition */
  .adeds-ds3-hero{padding:16px!important;border-radius:16px!important}.adeds-ds3-hero h2{font-size:21px!important}.adeds-ds3-hero p{font-size:12px!important;line-height:1.7!important}.adeds-ds3-hero__meta{width:100%;justify-content:flex-start!important}
  .adeds-ds3-metrics,.adeds-ds3-metrics.compact,.adpai-kpi-grid,.adpai-product-kpis,.adpai-engine-kpis,.adpai-entity-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .adeds-ds3-metric,.adpai-kpi,.adpai-product-kpis article,.adpai-engine-kpis article,.adpai-entity-kpis article{min-height:96px!important;padding:12px 10px!important}.adeds-ds3-metric>strong,.adpai-kpi strong{font-size:20px!important}
  .adeds-ds3-grid,.adeds-ds3-grid.main,.adpai-work-grid,.adpai-products-layout,.adpai-engine-grid{grid-template-columns:1fr!important;gap:10px!important}.adeds-ds3-surface,.adpai-card,.adpai-history-card{padding:13px!important;border-radius:15px!important}
  .adeds-ds3-chart,.adpai-history-chart{min-height:180px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}.adeds-ds3-chart svg,.adpai-history-chart svg{min-width:560px}

  /* Toolbars and local tab strips */
  .adpai-table-toolbar{position:relative!important;top:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:10px!important;border-radius:13px!important}.adpai-table-toolbar :where(input,select,.adpai-button,.adpai-menu){width:100%!important;max-width:none!important}.adpai-table-toolbar .adpai-menu>.adpai-button{width:100%!important}
  .adpai-level-tabs{display:flex!important;gap:5px!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch}.adpai-level-tabs::-webkit-scrollbar{display:none}.adpai-level-tabs button{flex:0 0 auto!important;white-space:nowrap!important}

  /* Tables remain full fidelity via deliberate horizontal scrolling. */
  .adpai-table-wrap{position:relative;width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;border-radius:14px;border:1px solid var(--adeds-gray-200);background:#fff;box-shadow:var(--adeds-shadow-xs)}
  .adpai-table-wrap:after{content:"";position:sticky;inset-inline-end:0;display:block;float:inline-end;width:16px;height:1px;pointer-events:none;box-shadow:-8px 0 14px rgba(16,24,40,.08)}
  .adpai-data-table{width:max-content!important;min-width:760px!important;margin:0!important;border:0!important}.adpai-data-table th,.adpai-data-table td{white-space:nowrap!important;padding:11px 10px!important;font-size:11px!important}.adpai-data-table th:first-child,.adpai-data-table td:first-child{position:sticky;inset-inline-start:0;z-index:3;background:#fff}.adpai-data-table thead th:first-child{z-index:6;background:#f8fafb}

  /* Task cards */
  .adpai-task-grid,.adeds-task-grid{grid-template-columns:1fr!important;gap:10px!important}.adpai-task{padding:13px!important}.adpai-task-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}.adpai-task-actions .adpai-button{width:100%!important;min-width:0!important}

  /* Commerce/Product/Intelligence inner tabs and cards */
  [data-panel="commerce"]>.adpai-level-tabs,[data-panel="intelligence"]>.adpai-level-tabs{width:100%!important;margin-bottom:10px!important}
  .adpai-product-insights{grid-template-columns:1fr!important}.adpai-product-kpis.detail{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Drawers become native-feeling full-screen sheets inside mobile app webviews. */
  .adpai-detail-drawer,.adpai-entity-detail,.adpai-product-detail{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:16px!important;padding-top:calc(16px + var(--adeds-mobile-safe-top))!important;padding-bottom:calc(18px + var(--adeds-mobile-safe-bottom))!important;border:0!important;border-radius:0!important;overflow-y:auto!important;overscroll-behavior:contain;background:#fff!important;z-index:9996!important}.adpai-detail-title{position:sticky!important;top:calc(-16px - var(--adeds-mobile-safe-top))!important;z-index:8;margin:calc(-16px - var(--adeds-mobile-safe-top)) -16px 14px!important;padding:calc(13px + var(--adeds-mobile-safe-top)) 16px 12px!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(12px);border-bottom:1px solid var(--adeds-gray-200)}

  /* Modal / wizard mobile shell */
  .adpai-modal{align-items:stretch!important;padding:0!important}.adpai-modal-card{width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;border-radius:0!important;padding:14px!important;padding-top:calc(14px + var(--adeds-mobile-safe-top))!important;padding-bottom:calc(14px + var(--adeds-mobile-safe-bottom))!important;overflow-y:auto!important}.adpai-wizard-section .fields,.adpai-choice-grid,.adpai-product-picker-grid,.adpai-review-hierarchy,.adpai-review-metrics{grid-template-columns:1fr!important}.stepper{display:flex!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none!important}.stepper::-webkit-scrollbar{display:none}.stepper>*{flex:0 0 auto!important;min-width:110px}

  /* Prevent long technical strings from blowing layout. */
  :where(.adpai-card,.adpai-task,.adpai-analysis-list,.adpai-detail-drawer,.adpai-entity-detail) :where(p,small,span,strong,dd,dt){overflow-wrap:anywhere}
}

@media(max-width:560px){
  .adpai-app-header{grid-template-columns:minmax(0,1fr) auto!important;padding-inline:10px!important}.adpai-header-actions #adpai-add-result-top{font-size:11px!important;padding-inline:12px!important}.adpai-header-actions #adpai-add-result-top .adpai-button-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}.adpai-header-actions #adpai-add-result-top:before{content:none!important;display:none!important}.adpai-header-actions #adpai-add-result-top .adeds-icon{width:19px!important;height:19px!important;margin:0!important}.adpai-header-actions .adpai-menu-popover{inset-inline:auto 0!important;min-width:180px!important}
  .adpai-app-main{padding:8px!important}.adpai-app-nav{padding-inline:8px!important}.adpai-app-nav button{padding-inline:10px!important;font-size:11px!important}
  .adpai-filter-bar{grid-template-columns:1fr!important}.adeds-ds3-metrics,.adeds-ds3-metrics.compact,.adpai-kpi-grid,.adpai-product-kpis,.adpai-engine-kpis,.adpai-entity-kpis,.adpai-product-kpis.detail{grid-template-columns:1fr 1fr!important}.adeds-ds3-metric,.adpai-kpi{min-height:90px!important}.adpai-kpi strong,.adeds-ds3-metric>strong{font-size:18px!important}
  .adpai-task-actions{grid-template-columns:1fr!important}.adpai-data-table{min-width:700px!important}.adeds-section-head{gap:8px!important}.adeds-section-head h2,.adeds-section-head h3{font-size:18px!important}
}

@media(max-width:390px){
  .adeds-ds3-metrics,.adeds-ds3-metrics.compact,.adpai-kpi-grid,.adpai-product-kpis,.adpai-engine-kpis,.adpai-entity-kpis,.adpai-product-kpis.detail{grid-template-columns:1fr!important}.adpai-store-name{max-width:32vw}.adpai-badge{font-size:9px!important}
}

@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .adpai-app-header{padding-top:8px!important;padding-bottom:8px!important}.adpai-header-meta{display:none!important}.adpai-app-nav{top:0}.adpai-detail-drawer,.adpai-entity-detail,.adpai-product-detail,.adpai-modal-card{height:100dvh!important}
}