/* ============================================================================
   Lumisfera OFFICE · МОБИЛЬНЫЙ СЛОЙ (office-mob.css)
   Инжект nginx sub_filter в location / (страницы access/shell/catalog/refs/vpn/login).
   ⚠️ /vpn/onboard/* и /atlas — ОТДЕЛЬНЫЕ nginx-локации БЕЗ инжекта (onboard уже
   идеально мобилен, atlas автономен). Весь код в @media — десктоп не тронут.
   Поведение — office-mob.js (lumi-mob-core + офисный аддон: drill-in, лента VPN).
   ============================================================================ */

/* ─────────────────────────── ТЕЛЕФОН (≤700px) ─────────────────────────── */
@media (max-width: 700px){
  :root{ --tap:44px; }
  html{ -webkit-text-size-adjust:100%; }
  body{ overflow-x:hidden; }
  input, select, textarea{ font-size:16px !important; }

  .app, .app.norail{ display:block !important; grid-template-columns:none !important; height:auto !important; }
  .main{ padding:14px 14px 60px !important; min-width:0; height:auto !important; overflow:visible !important; }
  .sidebar{
    position:fixed !important; top:0; left:0; bottom:0; height:100dvh !important;
    width:min(84vw,300px) !important; z-index:61; transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    background:var(--s-card); border-right:1px solid var(--line);
    box-shadow:0 0 60px rgba(0,0,0,.5); overflow-y:auto !important; padding:18px 14px !important; display:flex !important;
  }
  .sidebar.lmb-open{ transform:translateX(0); }
  /* ⚠️ rail.js в рантайме ставит #lumiRail{overflow:hidden!important} (ID, позже слоя) —
     без этого правила длинный рельс суперадмина в drawer не доскроллится */
  aside#lumiRail.sidebar, #lumiRail.sidebar{ overflow-y:auto !important; }

  .lmb-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:60; opacity:0; pointer-events:none; transition:opacity .24s; }
  .lmb-scrim.lmb-open{ opacity:1; pointer-events:auto; }
  .lmb-burger{ width:var(--tap); height:var(--tap); border-radius:11px; border:1px solid var(--line-soft);
    background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer; flex:0 0 auto; margin-right:12px; padding:0; }
  .lmb-burger svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .lmb-build{ padding:12px 10px 2px; font-size:10px; color:var(--muted2); font-variant-numeric:tabular-nums; }
  .lmb-back{ display:inline-grid; place-items:center; width:34px; height:34px; margin-right:8px;
    border:1px solid var(--line-soft); border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; flex:0 0 auto; padding:0; }
  .lmb-back svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; }

  .topbar{ flex-wrap:wrap; gap:10px; margin-bottom:14px !important; align-items:center !important; }
  .topbar > div:first-child{ display:flex; align-items:center; min-width:0; }
  .h1{ font-size:19px !important; letter-spacing:0 !important; }

  /* generic-ядро */
  .main [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .main .grid > *, .cols > *{ min-width:0; }
  .card{ min-width:0; max-width:100%; }
  .card-h, .row, .filterbar, .kv, .minirow{ flex-wrap:wrap; }
  .kk, .ti, code, .fd{ overflow-wrap:anywhere; }
  img, svg, video{ max-width:100%; }
  .search input{ font-size:16px !important; }
  .filterbar .search{ flex:1 1 100%; }

  /* попапы → шторки */
  .popov{ padding:0 !important; place-items:end center !important; }
  .popwin{ width:100vw !important; max-width:100vw !important; max-height:92dvh !important;
    border-radius:18px 18px 0 0 !important; position:relative; }
  .popwin::before{ content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:3px; background:var(--line2); z-index:5; }
  .pop-body, .pop-b{ overflow:auto; -webkit-overflow-scrolling:touch; max-height:calc(92dvh - 60px); }
  .popwin [style*="max-height:52vh"], .popwin [style*="max-height:50vh"]{ max-height:58dvh !important; }
  .g2, .field-2{ grid-template-columns:1fr !important; }

  /* gmenu «Выдать доступ» (fixed-координаты из JS) → шторка: гасим left/top !important */
  .gmenu{ left:0 !important; right:0 !important; top:auto !important; bottom:0 !important;
    width:100vw !important; max-width:100vw !important; border-radius:18px 18px 0 0 !important;
    max-height:70dvh; overflow:auto; }

  /* тосты во всю ширину (у refs своя .toasts-вариация — глушим шире) */
  .toasts{ left:12px !important; right:12px !important; max-width:none !important; width:auto !important; }
  /* крупные кнопки карточки-360 и инлайн-флекс ряды */
  .btnx{ max-width:100%; white-space:normal; }
  .main [style*="display:flex"] > *{ min-width:0; }

  /* ── ACCESS: drill-in консоли доступов (список → редактор+рельс роли) ──
     office-mob.js ставит .lmb-s1/.lmb-s2 на #cols; «назад» инжектится в шапки. */
  .cols{ display:block !important; height:auto !important; }
  .cols > .card{ display:none; margin-bottom:13px; }
  .cols.lmb-s1 > .card:nth-child(1){ display:flex; }
  .cols.lmb-s2 > .card:nth-child(2), .cols.lmb-s2 > .card:nth-child(3){ display:flex; }
  .cols > .card{ max-height:76dvh; }
  .cols .sbody{ -webkit-overflow-scrolling:touch; }
  .lrow{ min-height:var(--tap); }
  .fnrow{ flex-wrap:wrap; }
  .fnrow .lvl{ flex:1 1 100%; justify-content:flex-start; }

  /* ── REFS: drill-in Finder (Города → Площадки → Карточка 360) ── */
  .statbar{ flex-wrap:wrap; gap:8px; }
  .finder{ display:block !important; border:1px solid var(--line-soft); }
  .fcol{ display:none !important; width:auto !important; border-right:0 !important; }
  .finder.lmb-s1 .c1, .finder.lmb-s2 .c2, .finder.lmb-s3 .c3{ display:flex !important; }
  .fcol-b{ max-height:64dvh; -webkit-overflow-scrolling:touch; }
  .frow{ min-height:var(--tap); }
  .det{ grid-template-columns:1fr !important; }
  .card3{ max-width:none !important; }
  .main[style*="height"]{ height:auto !important; overflow:visible !important; }
  #mapwrap, .mapwrap{ height:min(58dvh, 420px) !important; }

  /* ── VPN: лента событий → шторка по кнопке (office-mob.js) ── */
  .rail#feedRail{
    position:fixed !important; left:0; right:0; bottom:0; top:auto !important; z-index:62;
    max-height:76dvh; overflow:auto; -webkit-overflow-scrolling:touch;
    background:var(--s-card); border-top:1px solid var(--line); border-left:0 !important;
    border-radius:18px 18px 0 0; box-shadow:0 -18px 60px rgba(0,0,0,.5);
    transform:translateY(102%); transition:transform .26s cubic-bezier(.32,.72,0,1);
    padding:16px 16px 20px !important; width:auto !important; display:block !important;
  }
  .rail#feedRail.lmb-open{ transform:translateY(0); }
  .lmb-feedbtn{ display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 13px;
    border:1px solid var(--line-soft); border-radius:10px; background:transparent; color:var(--muted);
    font:500 13px var(--font-body); cursor:pointer; }
  .lmb-feedbtn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .cfg{ flex-wrap:wrap; }
  .cfg .ca{ flex:1 1 100%; }
  .cfg .cmt{ overflow-wrap:anywhere; }

  /* ── CATALOG ── */
  details .modsum, .fn{ flex-wrap:wrap; }
  .fn .sp{ flex:0 0 auto; }

  /* ── LOGIN ── */
  .login, .loginbox{ max-width:100% !important; width:auto !important; }
}

/* ─────────────────────────── ПЛАНШЕТ (701–1100px) ─────────────────────── */
@media (min-width: 701px) and (max-width: 1100px){
  .app, .app.norail{ display:block !important; grid-template-columns:none !important; height:auto !important; }
  .main{ padding:20px 22px 60px !important; min-width:0; height:auto !important; overflow:visible !important; }
  .sidebar{
    position:fixed !important; top:0; left:0; bottom:0; height:100dvh !important;
    width:300px !important; z-index:61; transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    background:var(--s-card); border-right:1px solid var(--line);
    box-shadow:0 0 60px rgba(0,0,0,.5); overflow-y:auto !important; padding:18px 14px !important; display:flex !important;
  }
  .sidebar.lmb-open{ transform:translateX(0); }
  /* ⚠️ rail.js в рантайме ставит #lumiRail{overflow:hidden!important} (ID, позже слоя) —
     без этого правила длинный рельс суперадмина в drawer не доскроллится */
  aside#lumiRail.sidebar, #lumiRail.sidebar{ overflow-y:auto !important; }

  .lmb-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:60; opacity:0; pointer-events:none; transition:opacity .24s; }
  .lmb-scrim.lmb-open{ opacity:1; pointer-events:auto; }
  .lmb-burger{ width:44px; height:44px; border-radius:11px; border:1px solid var(--line-soft);
    background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer; flex:0 0 auto; margin-right:12px; padding:0; }
  .lmb-burger svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .lmb-build{ padding:12px 10px 2px; font-size:10px; color:var(--muted2); }
  .topbar > div:first-child{ display:flex; align-items:center; }
  input, select, textarea{ font-size:16px !important; }

  /* access: список | редактор в 2 колонки, рельс роли — вниз на всю ширину */
  .cols{ grid-template-columns:minmax(260px,320px) 1fr !important; height:auto !important; }
  .cols > .card{ min-width:0; max-height:78dvh; }
  .cols > .card:nth-child(3){ grid-column:1 / -1; }
  /* refs: города+площадки рядом, карточка вниз */
  .finder{ flex-wrap:wrap; }
  .fcol.c1{ width:40% !important; }
  .fcol.c2{ width:60% !important; border-right:0 !important; }
  .fcol.c3{ flex:1 1 100% !important; border-top:1px solid var(--line-soft); }
  /* vpn: лента вниз под список */
  .rail#feedRail{ border-left:0 !important; border-top:1px solid var(--line-soft); width:auto !important; }
  .popwin{ max-height:88dvh !important; }
  .toasts{ max-width:420px !important; }
  .card{ min-width:0; }
}