/* FL Trades responsive interaction contract.
   Mobile-first touch safety + compact anchored navigation. */

/* The tab rail is the primary route label. Never render a second workspace
   title above it; that duplicate label shifts Overview but no other route. */
html body.operator-shell.operator-authenticated[data-crm-route] .operator-title-row{
  display:none!important;
}
html body.operator-shell.operator-authenticated[data-crm-route] .operator-tabs{
  margin-top:0!important;
}

/* Human-facing directional state uses the same FL orange as the selected
   Overview rail accent. Do not introduce a second bearish red/orange. */
html body.operator-shell #trop-summary-bias.is-bearish{
  color:#ff421a!important;
}

/* Desktop: compact pointer-driven popover. */
@media(min-width:1024px){
  html body.operator-shell.operator-authenticated .operator-menu{
    width:300px!important;
    min-width:300px!important;
    max-width:300px!important;
    left:auto!important;
    right:16px!important;
    padding:6px!important;
    border-radius:14px!important;
    max-height:calc(100dvh - 84px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  html body.operator-shell.operator-authenticated .fl-profile-card{
    grid-template-columns:34px minmax(0,1fr) 20px!important;
    min-height:50px!important;
    gap:8px!important;
    padding:7px 8px!important;
  }
  html body.operator-shell.operator-authenticated .fl-profile-icon{
    width:34px!important;
    height:34px!important;
    border-radius:9px!important;
  }
  html body.operator-shell.operator-authenticated .fl-menu-item{
    min-height:38px!important;
    padding:0 9px!important;
    font-size:11px!important;
  }
  html body.operator-shell.operator-authenticated .fl-nav-group>summary{
    min-height:36px!important;
    padding:0 9px!important;
    font-size:9px!important;
  }
}

/* Tablet: touch-capable but still a popover, never a side sheet. */
@media(min-width:701px) and (max-width:1023px){
  html body.operator-shell.operator-authenticated .operator-menu{
    width:276px!important;
    min-width:276px!important;
    max-width:276px!important;
    left:auto!important;
    right:14px!important;
    padding:6px!important;
    border-radius:14px!important;
    max-height:calc(100dvh - 84px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  html body.operator-shell.operator-authenticated .fl-profile-card{
    grid-template-columns:34px minmax(0,1fr) 20px!important;
    min-height:50px!important;
    gap:8px!important;
    padding:7px 8px!important;
  }
  html body.operator-shell.operator-authenticated .fl-menu-item,
  html body.operator-shell.operator-authenticated .fl-nav-group>summary{
    min-height:44px!important;
  }
  html body.operator-shell.operator-authenticated .operator-input,
  html body.operator-shell.operator-authenticated .operator-select,
  html body.operator-shell.operator-authenticated .form-field input,
  html body.operator-shell.operator-authenticated .form-field select,
  html body.operator-shell.operator-authenticated .search-box input{
    min-height:44px!important;
    height:44px!important;
  }
}

@media(max-width:700px){
  .record-dialog{
    width:100vw;
    max-width:none;
    height:var(--operator-vvh,100dvh);
    max-height:var(--operator-vvh,100dvh);
    margin:0;
    inset:0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    overflow:hidden;
  }
  .record-dialog .dialog-shell{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    padding:max(18px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));
    overflow:hidden;
  }
  .record-dialog .dialog-head{
    position:relative;
    z-index:2;
    background:#050506;
    padding-bottom:18px;
  }
  .record-dialog .dialog-fields{
    min-width:0;
    min-height:0;
    max-height:none;
    margin:0;
    padding:20px 1px 22px 0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .record-dialog .form-field,
  .record-dialog .form-field input,
  .record-dialog .form-field select,
  .record-dialog .form-field textarea{
    min-width:0;
    max-width:100%;
  }
  .record-dialog .operator-status{
    margin:0;
    padding:8px 0;
    background:#050506;
  }
  .record-dialog .dialog-actions{
    position:relative;
    z-index:2;
    flex-wrap:nowrap;
    background:#050506;
    padding-top:14px;
    padding-bottom:max(2px,env(safe-area-inset-bottom));
  }
  .record-dialog .dialog-actions .button,
  .record-dialog .dialog-actions .danger-button{
    flex:1 1 0;
    min-width:0;
  }

  /* iOS Safari: 16px focused inputs prevent automatic page zoom. Controls
     remain 44px high for touch safety instead of shrinking the hit target. */
  html body.operator-shell.operator-authenticated #resource-search,
  html body.operator-shell.operator-authenticated .search-box input,
  html body.operator-shell.operator-authenticated .operator-input,
  html body.operator-shell.operator-authenticated .operator-select,
  html body.operator-shell.operator-authenticated .form-field input,
  html body.operator-shell.operator-authenticated .form-field select,
  html body.operator-shell.operator-authenticated .form-field textarea{
    font-size:16px!important;
  }
  html body.operator-shell.operator-authenticated .search-box{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  html body.operator-shell.operator-authenticated .search-box input{
    min-height:44px!important;
    height:44px!important;
    padding-left:38px!important;
    padding-right:12px!important;
  }
  html body.operator-shell.operator-authenticated .search-box>span{
    left:12px!important;
  }
  html body.operator-shell.operator-authenticated .resource-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    width:100%!important;
  }
  html body.operator-shell.operator-authenticated .resource-actions .search-box{
    grid-column:1 / -1!important;
  }
  html body.operator-shell.operator-authenticated #resource-filter{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
  }
  html body.operator-shell.operator-authenticated #resource-new{
    min-width:82px!important;
    height:44px!important;
    min-height:44px!important;
  }
}

@media(max-width:430px){
  .record-dialog .dialog-head h2{font-size:34px}
  .record-dialog .dialog-shell{padding-left:14px;padding-right:14px}
}