/* Small desktops / large tablets */
@media (max-width: 1200px){
  .app-shell{grid-template-columns:220px 1fr}
  .app-header .header-actions .btn{padding:.3rem .55rem}
  .ffm-search-wrap-wide{max-width:420px}
}

/* Tablets */
@media (max-width: 992px){
  .app-shell{grid-template-columns:200px 1fr}
  .app-main{padding:1.1rem 1.1rem}
  .page-header{gap:.6rem}
  .page-header h1{font-size:1.2rem}
  .page-actions{width:100%;justify-content:flex-start}
  .page-actions .search-mini{flex:1}
  .page-actions .search-mini input{min-width:0;width:100%}
  .ffm-search-wrap-wide{display:none}
}

/* Mobile */
@media (max-width: 768px){
  .app-header{padding:0 .6rem;gap:.4rem}
  .app-header .ffm-brand-mark .ffm-brand-text strong{font-size:.85rem}
  .app-header .header-actions{gap:.25rem}
  .app-header .header-actions .btn{padding:.3rem .5rem;font-size:.78rem}
  .app-header .header-actions .btn i + *{display:none}
  .app-main{padding:.85rem .8rem}
  .page-header h1{font-size:1.1rem}
  .page-actions{flex-direction:column;align-items:stretch}
  .page-actions .search-mini input{min-width:0;width:100%}
  .create-wizard{margin:1rem;padding:1.2rem}
  .ffm-table-toolbar{flex-direction:column;align-items:stretch;gap:.4rem}
  .ffm-table-toolbar .left,.ffm-table-toolbar .right{flex-wrap:wrap;gap:.35rem}
  .ffm-table thead{display:none}
  .ffm-table,.ffm-table tbody,.ffm-table tr,.ffm-table td{display:block;width:100%}
  .ffm-table tbody tr{border:1px solid var(--ffm-border);border-radius:12px;margin-bottom:.6rem;padding:.4rem .6rem;background:#fff}
  .ffm-table tbody td{border:0;padding:.35rem 0;display:flex;justify-content:space-between;gap:.6rem;text-align:right}
  .ffm-table tbody td:before{content:attr(data-label);color:var(--ffm-muted);font-size:.78rem;font-weight:500;text-align:left}
  .ffm-table .row-actions{justify-content:flex-end;flex-wrap:wrap;gap:.25rem}
  .ffm-drawer.ffm-modal{width:100vw;max-height:100vh;height:100vh;border-radius:0;top:0;left:0;transform:none}
  .ffm-drawer.ffm-modal.open{transform:none}
  .ffm-drawer .drawer-body{padding:.9rem}
  .form-section{padding:.9rem}
  .ffm-emergency-bar{font-size:.72rem}
  .ffm-emergency-bar .emg-btn{padding:.2rem .5rem;font-size:.72rem}
  .app-footer{font-size:.7rem}
}

/* Very small phones */
@media (max-width: 420px){
  .app-header{padding:0 .4rem}
  .app-header .ffm-brand-mark img{height:24px;width:24px}
  .app-header .header-actions .btn{padding:.25rem .4rem}
  .page-header h1{font-size:1rem}
}