/* Mobile responsive layer (v1) */

html.crm-nav-lock{overflow:hidden;}

.mobile-nav-toggle{display:none;}
.mobile-nav-overlay{display:none;}

@media (max-width: 1100px){
  html,body{max-width:100%;overflow-x:clip;}
  .content{padding:14px;}
  .card{padding:14px;}

  .content,
  .content > *,
  .dash-wrap,
  .op-details-page,
  .task-details-page{min-width:0;max-width:100%;}

  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important;}

  .mobile-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--panel);
    box-shadow:var(--shadow);
    cursor:pointer;
    user-select:none;
    font-size:18px;
    line-height:1;
  }

  .topbar-lite{align-items:flex-start;}
  .topbar-lite .hello h1{font-size:24px;}
  .topbar-lite .hello .desc{display:none;}
  .clock-ams .tz{display:none;}
  .fx-card{min-width:132px;padding:8px 10px;}
  .fx-card__rate{font-size:19px;}
  .fx-card__meta{font-size:10px;}
  .userbox summary .name{display:none;}

  .layout{grid-template-columns:1fr;}

  .sidebar{
    display:flex !important;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(320px, 86vw);
    max-width:320px;
    transform:translateX(-110%);
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:transform .18s ease,opacity .12s ease,visibility 0s linear .18s;
    z-index:120;
    box-shadow:0 22px 60px rgba(0,0,0,.18);
  }

  /* restore full sidebar labels/categories on mobile (app.css collapses at <=1100px) */
  .sidebar .label,
  .sidebar .group-title,
  .sidebar .sb-search{display:block !important;}

  .sidebar .nav-item{justify-content:flex-start;}
  .sidebar .group-toggle{justify-content:space-between;}

  body.is-nav-open .sidebar{
    transform:translateX(0);
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:transform .18s ease,opacity .12s ease,visibility 0s;
  }

  .mobile-nav-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    z-index:110;
  }

  body.is-nav-open .mobile-nav-overlay{opacity:1;pointer-events:auto;}

  .table-wrap{max-width:100%;}

  .content input,
  .content select,
  .content textarea{font-size:16px;}

  .filters,
  .filters-row,
  .filters__row,
  .filters__form .filters__row{grid-template-columns:1fr !important;}

  .filters{gap:10px;}

  .details-s1-64c33b{grid-template-columns:1fr !important;}
  .details-s19-620ee6{grid-template-columns:1fr !important;}
  .details-s21-846de6{grid-template-columns:1fr !important;}

  .details-log-diff-row{grid-template-columns:minmax(72px,.7fr) minmax(0,1fr) auto minmax(0,1fr) !important;}
  .details-log-diff-row--value{grid-template-columns:minmax(72px,.7fr) minmax(0,2fr) !important;}
  .details-log-old,.details-log-new{max-width:100% !important;}

  .details-menu-panel{position:static !important;width:100% !important;max-width:none !important;min-width:0 !important;box-shadow:none !important;}

  .create-s7-4dbcc8,
  .create-sx1-4dbcc8,
  .fees-box .fee-row{grid-template-columns:1fr !important;}

  .companies__layout,
  .company-view{grid-template-columns:minmax(0,1fr) !important;min-width:0;max-width:100%;}
  .companies__layout > *,
  .company-view > *{min-width:0;max-width:100%;}
  .companies__filters,
  .tabs-vert{position:static !important;}
  .companies__toolbar{align-items:stretch !important;flex-direction:column !important;}
  .companies__search-form,
  .companies__actions{flex-wrap:wrap !important;}
  .input--search{min-width:0 !important;}

  .dash-hero{flex-direction:column;min-width:0;}
  .dash-hero__left,
  .dash-hero__right,
  .dash-hero__title,
  .dash-hero__text{min-width:0;max-width:100%;overflow-wrap:anywhere;}

  .details-doc-3col,
  .op-body.details-s1-64c33b,
  .task-details-page .details-s1-64c33b{grid-template-columns:minmax(0,1fr) !important;min-width:0;max-width:100%;}
  .details-doc-3col > *,
  .op-body > *,
  .task-details-page .details-s1-64c33b > *{min-width:0;max-width:100%;}
}

@media (max-width: 420px){
  .clock-ams{display:none;}
  .fx-strip{width:100%;}
  .fx-card{flex:1 1 100%;min-width:0;}
}