/* AI Agent Portfolio mobile adaptation layer.
   Desktop styles remain untouched; all overrides are scoped to <= 900px. */
.mobile-nav-toggle,
.mobile-nav-backdrop { display: none; }
.mobile-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mobile-table-scroll > table { margin: 0; }

@media (max-width: 900px) {
  :root { --mobile-gutter: 14px; }
  html { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { width: 100%; max-width: 100%; overflow-x: hidden !important; -webkit-text-size-adjust: 100%; }
  img, svg, canvas { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; }

  /* Shared mobile navigation */
  .mobile-nav-toggle {
    display: inline-grid;
    place-items: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1002;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    color: #1e293b;
    box-shadow: 0 7px 24px rgba(15,23,42,.14);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
  }
  .mobile-nav-toggle:focus-visible { outline: 3px solid rgba(37,99,235,.25); outline-offset: 2px; }
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(15,23,42,.48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }
  body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  body.mobile-nav-open { overflow: hidden !important; }

  body.project-batteryguard #app-sidebar,
  body.project-solarops > aside,
  body.project-callpilot > aside {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1001 !important;
    width: min(82vw, 286px) !important;
    max-width: 286px !important;
    height: 100dvh !important;
    transform: translateX(-105%);
    transition: transform .22s ease !important;
    overflow-y: auto !important;
    box-shadow: 14px 0 36px rgba(15,23,42,.24);
  }
  body.mobile-nav-open.project-batteryguard #app-sidebar,
  body.mobile-nav-open.project-solarops > aside,
  body.mobile-nav-open.project-callpilot > aside { transform: translateX(0); }

  body.project-batteryguard .workspace,
  body.project-solarops > main,
  body.project-callpilot > main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
  }
  body.project-solarops,
  body.project-callpilot { display: block !important; height: 100dvh !important; overflow: hidden !important; }

  /* Headers: preserve key actions while preventing clipping */
  body.project-batteryguard .topbar,
  body.project-solarops header,
  body.project-callpilot header {
    min-height: 60px !important;
    height: auto !important;
    padding: 9px 10px 9px 58px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  body.project-solarops header > div,
  body.project-callpilot header > div { min-width: 0; }
  body.project-solarops header > div:first-child > iconify-icon,
  body.project-callpilot header > div:first-child > iconify-icon { display: none !important; }
  body.project-solarops header > div:last-child > *:not(a[href="/"]),
  body.project-callpilot header > div:last-child > *:not(a[href="/"]) { display: none !important; }
  body.project-solarops header > div:first-child,
  body.project-callpilot header > div:first-child { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body.project-solarops header > div:last-child,
  body.project-callpilot header > div:last-child,
  body.project-batteryguard .top-actions {
    min-width: 0;
    gap: 8px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  body.project-solarops header > div:last-child::-webkit-scrollbar,
  body.project-callpilot header > div:last-child::-webkit-scrollbar,
  body.project-batteryguard .top-actions::-webkit-scrollbar { display: none; }
  body.project-batteryguard .breadcrumb { max-width: 42vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body.project-batteryguard .viewer,
  body.project-batteryguard .demo-clock { display: none !important; }
  body.project-solarops header img,
  body.project-callpilot header img { width: 28px !important; height: 28px !important; }
  body.project-solarops header input,
  body.project-callpilot header input { width: 150px !important; }
  body.project-solarops header a[href="/"],
  body.project-callpilot header a[href="/"],
  body.project-batteryguard #portfolioHomeLink {
    flex: 0 0 auto;
    min-height: 34px;
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  /* Main scrolling/content */
  body.project-batteryguard .page-content { padding: 14px 12px 32px !important; }
  body.project-solarops main > div[class*="overflow-y-auto"],
  body.project-callpilot main > div[class*="overflow-y-auto"] {
    padding: 14px !important;
    gap: 14px !important;
    overflow-x: hidden !important;
  }
  body.project-batteryguard .page-heading { flex-direction: column; align-items: stretch; gap: 10px; }
  body.project-batteryguard .role-meta { justify-content: flex-start; }

  /* Grids and multi-column layouts become readable single-column flows */
  body.project-batteryguard .grid,
  body.project-batteryguard .split,
  body.project-batteryguard .split-36,
  body.project-batteryguard .split-40,
  body.project-batteryguard .form-grid,
  body.project-batteryguard .kv-grid,
  body.project-batteryguard .summary-strip,
  body.project-batteryguard .evaluation-meta-strip,
  body.project-batteryguard .evaluation-party-grid,
  body.project-batteryguard .trace-summary-grid,
  body.project-batteryguard .trace-summary-grid-8,
  body.project-batteryguard .badcase-audit-grid,
  body.project-batteryguard .badcase-form-grid,
  body.project-batteryguard .regression-summary,
  body.project-batteryguard .badcase-evaluation-results,
  body.project-solarops main .grid,
  body.project-callpilot main .grid,
  body.project-solarops main [style*="grid-template-columns"],
  body.project-callpilot main [style*="grid-template-columns"],
  body.project-batteryguard main [style*="grid-template-columns"] {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
  }
  body.project-batteryguard .bar-row { grid-template-columns: 74px minmax(0,1fr) 34px !important; gap: 7px !important; }
  body.project-batteryguard .summary-item { border-right: 0; border-bottom: 1px solid var(--border); }
  body.project-batteryguard .summary-item:last-child { border-bottom: 0; }
  body.project-batteryguard .sticky-panel { position: static !important; max-height: none !important; }
  body.project-batteryguard .full { grid-column: auto !important; }

  body.project-solarops main [class*="grid-cols-"],
  body.project-callpilot main [class*="grid-cols-"],
  body.project-solarops main .metric-grid { grid-template-columns: minmax(0,1fr) !important; }
  body.project-solarops main [class*="gap-"],
  body.project-callpilot main [class*="gap-"] { row-gap: 12px; }
  body.project-solarops main [class*="p-8"],
  body.project-callpilot main [class*="p-8"] { padding: 16px !important; }
  body.project-solarops main [class*="p-6"],
  body.project-callpilot main [class*="p-6"] { padding: 14px !important; }

  /* Toolbars/forms */
  body.project-batteryguard .toolbar,
  body.project-batteryguard .filters,
  body.project-batteryguard .toolbar-group,
  body.project-batteryguard .page-actions { align-items: stretch; width: 100%; }
  body.project-batteryguard .filters > *,
  body.project-batteryguard .toolbar-group > *,
  body.project-batteryguard .field,
  body.project-batteryguard .select { flex: 1 1 150px; min-width: 0; }
  body.project-batteryguard .toolbar > .btn { width: 100%; }
  body.project-solarops main input,
  body.project-solarops main select,
  body.project-solarops main textarea,
  body.project-callpilot main input,
  body.project-callpilot main select,
  body.project-callpilot main textarea { max-width: 100% !important; }

  /* Cards, typography and fixed minimum widths */
  body.project-batteryguard .card { padding: 14px; }
  body.project-batteryguard .card-header { align-items: flex-start; flex-wrap: wrap; }
  body.project-batteryguard .metric-card { min-height: 102px; }
  body.project-batteryguard .metric-value { font-size: 24px; }
  body.project-solarops main [class*="min-w-["],
  body.project-callpilot main [class*="min-w-["] { min-width: 0 !important; }
  body.project-solarops main [class*="w-["],
  body.project-callpilot main [class*="w-["] { max-width: 100% !important; }
  body.project-solarops main h1,
  body.project-callpilot main h1 { font-size: 24px !important; line-height: 1.3 !important; }
  body.project-solarops main h2,
  body.project-callpilot main h2 { line-height: 1.35; }

  /* Complex diagrams/rows: stack instead of compressing */
  body.project-callpilot[data-page="architecture"] main .flex.items-center.justify-center.w-full,
  body.project-callpilot[data-page="architecture"] main .flex.items-center.justify-between.w-full {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  body.project-callpilot[data-page="architecture"] main .flex.items-center.justify-center.w-full > *,
  body.project-callpilot[data-page="architecture"] main .flex.items-center.justify-between.w-full > * { width: 100% !important; max-width: 100% !important; }
  body.project-callpilot[data-page="architecture"] main iconify-icon[icon*="arrow-down"],
  body.project-callpilot[data-page="architecture"] main iconify-icon[icon*="chevron-down"] { align-self: center; }

  /* CallPilot dynamic two-column panels and demo chain */
  body.project-callpilot main .flex:has(> section[class*="w-["]) {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  body.project-callpilot main section[class*="w-["] {
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0 !important;
  }
  body.project-callpilot #cp-dashboard-state {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  body.project-callpilot #cp-dashboard-state > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }
  body.project-callpilot #cp-dashboard-state > div:last-child > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
  }
  body.project-callpilot #cp-dashboard-state > div:last-child > a {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* SolarOps compact process rows */
  body.project-solarops main .flex:has(> .review-flow-step) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.project-solarops main .review-flow-step {
    width: 100%;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
  }
  body.project-solarops main .review-flow-step:not(:last-child):after {
    content: "↓" !important;
    right: 50% !important;
    bottom: -17px;
    top: auto;
  }
  body.project-solarops main .flex.items-start.justify-between,
  body.project-callpilot main .flex.items-start.justify-between {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Tables: only the table region scrolls horizontally */
  .mobile-table-scroll,
  body.project-batteryguard .table-wrap,
  body.project-solarops main .overflow-x-auto,
  body.project-callpilot main .overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.project-batteryguard .data-table,
  body.project-solarops main table,
  body.project-callpilot main table { min-width: 720px !important; }
  .mobile-table-scroll { border-radius: 8px; }
  .mobile-table-scroll:focus-visible { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }

  /* Modals/drawers */
  body.project-batteryguard .modal-card,
  body.project-batteryguard .drawer,
  body.project-batteryguard [class*="drawer-"],
  body.project-solarops .demo-modal > div,
  body.project-solarops .readonly-drawer,
  body.project-callpilot [class*="modal"] > div,
  body.project-callpilot [class*="drawer"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
  }
  body.project-solarops .readonly-drawer { right: calc(-100vw - 24px); }
  body.project-solarops .readonly-drawer.active { right: 12px; top: 12px; height: calc(100dvh - 24px); }
  body.project-batteryguard .drawer-sticky-actions { margin-inline: -14px; padding-inline: 14px; flex-wrap: wrap; }
  body.project-batteryguard .drawer-sticky-actions .btn { flex: 1 1 120px; }
  body.project-solarops .demo-toast { left: 12px; right: 12px; top: 68px; min-width: 0; max-width: none; }

  /* Root portfolio home */
  body.project-portfolio .page { width: min(100% - 24px, 620px); padding: 34px 0 30px; }
  body.project-portfolio .hero { margin-bottom: 24px; }
  body.project-portfolio h1 { font-size: clamp(30px, 10vw, 42px); }
  body.project-portfolio .hero p { font-size: 14px; line-height: 1.7; }
  body.project-portfolio .grid { grid-template-columns: 1fr !important; gap: 14px; }
  body.project-portfolio .card { min-height: 0; padding: 22px; border-radius: 18px; }
  body.project-portfolio .card:hover { transform: none; }
}

@media (max-width: 480px) {
  .mobile-nav-toggle { top: 10px; left: 10px; width: 36px; height: 36px; }
  body.project-batteryguard .topbar,
  body.project-solarops header,
  body.project-callpilot header { padding-left: 54px !important; }
  body.project-solarops header input,
  body.project-callpilot header input { display: none !important; }
  body.project-solarops header > div:last-child > span,
  body.project-callpilot header > div:last-child > span { display: none; }
  body.project-solarops main > div[class*="overflow-y-auto"],
  body.project-callpilot main > div[class*="overflow-y-auto"],
  body.project-batteryguard .page-content { padding-left: 10px !important; padding-right: 10px !important; }
  body.project-batteryguard .btn { padding-inline: 10px; }
  body.project-batteryguard .filters > * { flex-basis: 100%; width: 100%; }
  body.project-batteryguard .bar-row { grid-template-columns: 64px minmax(0,1fr) 30px !important; }
  body.project-portfolio .page { width: calc(100% - 20px); }
}