/* AURA ERP INTELLIGENCE OS v0.9.19 — Responsive Hardening Runtime
   Mobile browser + tablet/iPad + compact laptop safety layer.
   Loaded last so every module inherits the same viewport behavior without
   changing the validated desktop Sandstone layout.
*/

/* ---------- Universal viewport safety ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  max-width:100%;
}
body{
  max-width:100%;
  min-width:0;
}
body, .app-shell, .workspace, .content, .module-page, .project-page, .crm-page,
.design-page, .admin-page, .admin-main, .panel, .modal-card{
  min-width:0;
}
img, video, canvas, svg{max-width:100%}
img, video{height:auto}
input, textarea, button, select{max-width:100%}
textarea{resize:vertical}
pre, code{overflow-wrap:anywhere}

/* Long business content may scroll inside its own surface, never widen the app. */
.data-table-wrap,
.admin-inline-table,
.permission-matrix,
.project-tabs,
.admin-shortcuts,
.workflow-phase-flow,
.connected-flow,
.aura-chain-mini{
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.data-table-wrap,
.admin-inline-table,
.permission-matrix{
  overflow-x:auto!important;
}

/* Stable touch scrolling and tap behavior. */
.sidebar .nav-stack,
.content,
.modal-card,
.palette-results,
.aura-select-menu{
  -webkit-overflow-scrolling:touch;
}
button, a, .nav-item, .admin-control-link, .admin-group-title,
.aura-select-trigger, .aura-select-option{
  touch-action:manipulation;
}

/* Prevent iOS Safari from zooming form controls. */
@supports (-webkit-touch-callout:none){
  input, textarea, select,
  .aura-select-trigger,
  .aura-select-option{
    font-size:16px!important;
  }
}

/* Safe-area aware shells for notch/home-indicator devices. */
@media (max-width:860px){
  body.aura-authenticated .topbar{
    padding-top:env(safe-area-inset-top);
    min-height:calc(60px + env(safe-area-inset-top));
  }
  body.aura-authenticated .sidebar{
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    height:var(--aura-visual-height,100dvh)!important;
    max-height:var(--aura-visual-height,100dvh)!important;
  }
  body.aura-authenticated .content{
    padding-bottom:calc(40px + env(safe-area-inset-bottom))!important;
  }
  .modal-shell{
    padding:
      max(10px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(10px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }
}

/* ---------- Compact laptop / large tablet landscape ---------- */
@media (min-width:861px) and (max-width:1180px){
  .app-shell{
    grid-template-columns:218px minmax(0,1fr)!important;
  }
  .sidebar{
    width:auto!important;
  }
  .brand-row{padding-inline:14px!important}
  .tenant-switcher{margin-inline:10px!important}
  .nav-stack{padding-inline:8px!important}
  .sidebar-footer{padding-inline:10px!important}
  .content{padding:20px 16px 40px!important}
  .topbar{padding-inline:14px!important}
  .search-trigger{min-width:0!important;width:min(280px,34vw)!important}

  /* A second vertical navigator inside Admin is too narrow on iPad landscape.
     Stack it above the form but keep its categories compact. */
  .admin-shell{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .admin-explorer{
    width:100%!important;
  }
  .admin-group-controls{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }
  .admin-control-link{padding-left:12px!important}
  .admin-explorer-head input{max-width:none}

  .admin-overview-grid,
  .project-command-grid,
  .connected-overview-grid,
  .connected-dashboard-grid,
  .control-health-layout{
    grid-template-columns:1fr!important;
  }
}

/* ---------- Tablet / iPad portrait and mobile browser shell ---------- */
@media (max-width:860px){
  html, body{width:100%;max-width:100%;overflow-x:hidden}
  body.aura-modal-open{overflow:hidden!important}

  .app-shell{display:block!important;width:100%;min-height:100dvh}
  .workspace{width:100%;min-height:100dvh}

  .sidebar{
    z-index:60!important;
    width:min(320px,88vw)!important;
    max-width:88vw!important;
    border-right:1px solid var(--border)!important;
  }
  .sidebar-backdrop.show{z-index:55!important}
  .brand-row{min-height:56px;padding-inline:14px!important}
  .tenant-switcher{margin-inline:10px!important}
  .nav-stack{padding-inline:8px!important}
  .sidebar-footer{padding-inline:10px!important}

  .topbar{
    z-index:45!important;
    width:100%;
    gap:8px;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
  .topbar-left{min-width:0;flex:1 1 auto}
  .topbar-actions{flex:0 0 auto;min-width:0}
  .breadcrumb{min-width:0;max-width:100%}
  .breadcrumb strong{
    display:block;
    max-width:min(44vw,260px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .search-trigger{width:42px!important;min-width:42px!important;height:42px!important}
  .icon-btn{min-width:42px;min-height:42px}
  .profile-chip{min-height:42px}
  .profile-menu{
    position:fixed!important;
    top:calc(58px + env(safe-area-inset-top))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    left:auto!important;
    width:min(300px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
  }

  .content{
    width:100%!important;
    max-width:100%!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
  }
  .page-head,
  .module-hero,
  .project-command-hero,
  .admin-control-head{
    gap:12px!important;
  }
  .page-head h1,
  .module-hero h1,
  .project-title-line h1,
  .admin-control-head h1{
    font-size:clamp(26px,6vw,34px)!important;
    overflow-wrap:anywhere;
  }
  .page-subtitle,
  .module-hero p,
  .project-command-hero p,
  .admin-control-head p{
    max-width:100%!important;
  }
  .page-actions,
  .admin-head-actions,
  .project-actions{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .page-actions .btn,
  .admin-head-actions .btn{
    flex:1 1 150px;
  }

  /* Common responsive business grids. */
  .dashboard-grid,
  .access-grid,
  .project-command-grid,
  .project-master-grid,
  .project-facts,
  .finance-pairs,
  .connected-overview-grid,
  .connected-dashboard-grid,
  .design-section-grid,
  .control-health-layout,
  .setup-flow,
  .identity-profile-grid,
  .identity-brand-grid,
  .identity-detail-grid,
  .admin-overview-grid,
  .admin-flow-foot,
  .admin-advanced-grid,
  .admin-agent-form,
  .design-request-route,
  .snapshot-notes,
  .workflow-guide-head,
  .workflow-step-grid,
  .workflow-connected-copy,
  .wbs-entry-guide{
    grid-template-columns:1fr!important;
  }

  .kpi-grid,
  .mini-kpi-grid,
  .mini-kpi-grid.six,
  .crm-kpis,
  .connected-kpis,
  .project-module-grid,
  .intelligence-signal-grid,
  .evm-kpi-grid,
  .project-setup-kpis,
  .aura-visual-grid.four,
  .mis-report-grid,
  .source-link-grid,
  .admin-record-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .project-context-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .project-context-strip>div{
    border-bottom:1px solid var(--border);
  }
  .project-context-strip>div:nth-child(2n){border-right:0!important}
  .project-context-strip>div:nth-last-child(-n+2){border-bottom:0}

  .admin-shell{grid-template-columns:1fr!important}
  .admin-group-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .admin-control-link{padding-left:12px!important}
  .admin-shortcuts{padding-bottom:8px!important}

  /* Panels/forms should never exceed viewport. */
  .panel,
  .admin-editor,
  .admin-record-card,
  .aura-chart-card,
  .project-overview-card,
  .project-finance-card{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .form-grid,
  .admin-form-grid{
    grid-template-columns:1fr!important;
  }
  .form-grid .full,
  .admin-field.wide,
  .admin-form-section.wide,
  .admin-table-field.wide{
    grid-column:auto!important;
  }

  /* Modal / command palette fit the visual viewport, including iOS keyboard. */
  .modal-shell{
    width:100vw;
    min-height:100svh;
    height:var(--aura-visual-height,100dvh);
    align-items:end!important;
    overflow:hidden;
  }
  .modal-card,
  .modal-card.modal-wide,
  #designControlModal .modal-card.modal-wide{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(var(--aura-visual-height,100dvh) - max(20px,env(safe-area-inset-top)))!important;
    border-radius:18px 18px 0 0!important;
    padding:18px!important;
    overflow:auto!important;
  }
  .modal-head{gap:10px;margin-bottom:14px;padding-bottom:13px}
  .modal-head h2{font-size:21px!important;overflow-wrap:anywhere}
  .modal-actions{
    position:sticky;
    bottom:calc(-18px - env(safe-area-inset-bottom));
    z-index:5;
    margin:10px -18px -18px!important;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom))!important;
    background:color-mix(in srgb,var(--surface-solid) 96%,transparent);
    border-top:1px solid var(--border);
    backdrop-filter:blur(10px);
    display:grid!important;
    grid-template-columns:1fr 1fr;
  }
  .modal-actions .btn{width:100%;justify-content:center}

  .command-palette{height:var(--aura-visual-height,100dvh)}
  .palette-card{
    width:calc(100vw - 20px)!important;
    max-height:calc(var(--aura-visual-height,100dvh) - 24px);
    margin:max(10px,env(safe-area-inset-top)) auto 0!important;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .palette-results{max-height:none!important;min-height:0}

  /* Custom select menu remains readable and finger-friendly. */
  .aura-select-trigger{min-height:46px!important}
  .aura-select-menu{
    max-width:calc(100vw - 16px)!important;
    max-height:min(360px,52dvh)!important;
  }
  .aura-select-option{min-height:44px;padding:11px 12px!important}

  /* Admin edit actions remain in normal flow on phones; add safe-area spacing only. */
  .admin-editor-actions{
    padding-bottom:calc(4px + env(safe-area-inset-bottom))!important;
  }
}

/* ---------- Phone ---------- */
@media (max-width:600px){
  .content{
    padding-top:16px!important;
    padding-left:max(11px,env(safe-area-inset-left))!important;
    padding-right:max(11px,env(safe-area-inset-right))!important;
  }
  .panel{padding:13px!important;border-radius:12px!important}
  .page-head h1,
  .module-hero h1,
  .project-title-line h1,
  .admin-control-head h1{font-size:27px!important}

  .kpi-grid,
  .mini-kpi-grid,
  .mini-kpi-grid.six,
  .crm-kpis,
  .connected-kpis,
  .project-module-grid,
  .intelligence-signal-grid,
  .evm-kpi-grid,
  .project-setup-kpis,
  .aura-visual-grid,
  .aura-visual-grid.four,
  .aura-resource-mix,
  .mis-report-grid,
  .source-link-grid,
  .admin-record-cards,
  .admin-advanced-grid,
  .admin-group-controls{
    grid-template-columns:1fr!important;
  }

  .project-context-strip{grid-template-columns:1fr!important}
  .project-context-strip>div{
    border-right:0!important;
    border-bottom:1px solid var(--border)!important;
  }
  .project-context-strip>div:last-child{border-bottom:0!important}

  .seat-banner{grid-template-columns:1fr!important;gap:12px!important}
  .project-row,
  .project-team-row,
  .member-row,
  .setup-card-list article,
  .connected-record-list article{
    min-width:0;
  }
  .project-row{grid-template-columns:1fr!important}
  .project-health{justify-self:start!important}
  .project-actions{justify-content:flex-start!important}

  .admin-record-summary{grid-template-columns:1fr 1fr!important}
  .admin-list-toolbar{grid-template-columns:1fr!important}
  .admin-control-insight{align-items:flex-start!important}

  .topbar-actions{gap:4px!important}
  .notification-btn{display:none!important}
  .profile-chip{padding-inline:5px!important}
  .profile-chevron{display:none!important}
  .breadcrumb strong{max-width:38vw}

  .modal-actions{grid-template-columns:1fr!important}
  .auth-inline{flex-wrap:wrap;align-items:flex-start}
  .auth-inline .text-btn{white-space:normal!important;text-align:left}

  .data-table{min-width:680px}
  .admin-inline-table table{min-width:640px}

  .route-empty{min-height:220px!important;padding:22px 16px!important}
}

/* ---------- Small phone / iPhone narrow ---------- */
@media (max-width:430px){
  .topbar{gap:5px!important}
  .breadcrumb strong{max-width:31vw}
  .search-trigger{width:40px!important;min-width:40px!important}
  .icon-btn{min-width:40px;min-height:40px}
  .profile-chip{min-height:40px}

  .page-actions .btn,
  .admin-head-actions .btn{
    flex:1 1 100%;
  }
  .admin-record-summary{grid-template-columns:1fr!important}
  .admin-shortcuts{margin-inline:-2px!important}

  .auth-panel{
    align-items:flex-start!important;
    padding:
      calc(72px + env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      calc(20px + env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left))!important;
    overflow-y:auto;
    min-height:100%;
  }
  .auth-card{
    width:100%!important;
    padding:22px 18px!important;
    border-radius:18px!important;
  }
  .auth-step h2{font-size:25px!important;line-height:1.08}
  .auth-theme-control{
    top:calc(12px + env(safe-area-inset-top))!important;
    right:max(12px,env(safe-area-inset-right))!important;
  }
  .auth-theme-toggle{min-height:42px}
}

/* ---------- Short landscape phones / mobile browser chrome ---------- */
@media (max-height:520px) and (max-width:900px) and (orientation:landscape){
  .topbar{position:relative!important;padding-top:0!important;min-height:54px!important}
  .sidebar{padding-top:0!important}
  .content{padding-top:12px!important}
  .modal-shell{align-items:stretch!important;padding:6px!important}
  .modal-card,
  .modal-card.modal-wide,
  #designControlModal .modal-card.modal-wide{
    max-height:calc(var(--aura-visual-height,100dvh) - 12px)!important;
    border-radius:14px!important;
  }
  .auth-panel{padding:58px 14px 14px!important;align-items:flex-start!important;overflow:auto}
  .auth-card{padding:20px!important}
}

/* ---------- Coarse pointer usability without inflating desktop ---------- */
@media (pointer:coarse){
  .nav-item{min-height:42px}
  .btn:not(.compact){min-height:42px}
  .text-btn{min-height:36px}
  .admin-control-link{min-height:40px}
  .admin-group-title{min-height:44px}
  .project-tabs button{min-height:40px}
}

/* Prefer stable content sizing when browser UI appears/disappears. */
@supports (height:100dvh){
  .auth-gate{height:var(--aura-visual-height,100dvh)}
}