/* ============================================
   CSS BLOCK 28: MOBILE RESPONSIVE
   ============================================ */
@media(max-width:768px){
  .hdr{display:none!important}
  .fbar{display:none!important}
  .mob-hdr{display:flex}
  .mob-frow{display:flex}
  .mob-stats{display:flex}
  .mob-fab{display:flex}
  .brd{padding:8px;gap:8px}
  .col{min-width:90vw;max-width:90vw}
  .cb{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .emdl{padding:20px 14px}
  .fr2{grid-template-columns:1fr}
  .vcard{width:100%;max-width:100%;border-radius:12px;padding-bottom:20px}
  .vc-body-wrap{flex-direction:column}
  .vc-left{border-right:none;max-height:none}
  .vc-right{width:100%;max-height:none;display:none}
  .vc-right.a{display:block!important}
  .vc-left.h{display:none!important}
  .vc-mob-tabs{display:block}
  .vc-grid{grid-template-columns:1fr}
  .pipeline{gap:4px;padding:8px 10px;flex-wrap:nowrap}
  .pip-step{padding:8px 0;font-size:11px;flex:0 0 auto;min-width:auto;text-align:center;padding:6px 10px}
  .vc-head{padding:12px 14px}
  .vc-info{padding:12px}
  .vc-history{padding:12px}
  .vc-actions{display:none}
  .vc-name{font-size:16px}
  .compl-modal{padding:20px}
  .act-modal{padding:18px}
  .note-modal{padding:18px}
  .qa-fab{display:flex}
}






/* === PHASE 1.1: Stats inline with burger — compact mobile === */
@media(max-width:768px){
  .mob-stats{
    display:flex!important;
    padding:0!important;
    gap:3px!important;
    background:none!important;
    border:none!important;
    flex:1!important;
    min-height:auto!important;
    overflow:visible!important;
    margin-left:2px!important;
  }
  .v10-top{
    flex-wrap:nowrap!important;
    gap:4px!important;
  }
  .mstat{
    padding:2px 1px!important;
    min-width:0!important;
    flex:1!important;
    border-radius:4px!important;
  }
  .mstat::before{opacity:.06!important;border-radius:4px!important}
  .mstat-n{font-size:12px!important;font-weight:800!important;line-height:1!important}
  .mstat-l{font-size:8px!important;margin-top:0!important;letter-spacing:.2px!important}
  /* v10 top bar (Phase 1.1): slightly taller tiles than ultra-compact — readable tap target */
  .v10-top .mob-stats .mstat{
    padding:6px 2px!important;
    min-height:36px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .v10-top .mob-stats .mstat-l{margin-top:2px!important}
  /* ——— Compact filter row + expandable secondary ——— */
  .mob-frow{
    padding:4px 8px!important;
    gap:4px!important;
    border-bottom:1px solid var(--bd)!important;
    flex-shrink:0!important;
  }
  .mob-sel{
    padding:5px 8px!important;
    border-radius:6px!important;
    font-size:11px!important;
    min-height:32px!important;
  }
  .mob-sel-inner{gap:0!important}
  .ms-label{font-size:8px!important}
  .ms-val{font-size:11px!important;font-weight:600!important}
  .mob-srch-btn{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    font-size:12px!important;
    border-radius:6px!important;
  }
  .mob-srch-row{
    padding:4px 8px!important;
    border-bottom:1px solid var(--bd)!important;
  }
  .mob-srch-row input{
    padding:6px 10px!important;
    font-size:12px!important;
    min-height:32px!important;
    border-radius:6px!important;
  }
  /* Expandable "more filters" block (mobile only) — full width below first row */
  .mob-frow{
    flex-wrap:wrap!important;
  }
  .mob-frow-extra{
    display:none;
    flex-basis:100%;
    width:100%;
    padding:6px 8px 8px;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    background:var(--cd2);
    border-radius:0 0 6px 6px;
    margin:2px -8px -4px -8px;
    padding-left:8px;
    padding-right:8px;
    order:10;
  }
  .mob-frow-extra.is-open{display:flex}
  .mob-frow-extra-hint{font-size:11px;color:var(--t2)}
  .mob-frow-toggle-inline{
    padding:4px 10px;
    font-size:11px;
    color:var(--ac);
    background:rgba(108,92,231,.1);
    border:1px solid rgba(108,92,231,.25);
    border-radius:6px;
    cursor:pointer;
  }
  .mob-frow-extra .finp,
  .mob-frow-extra select{
    min-height:30px!important;
    padding:4px 8px!important;
    font-size:11px!important;
    border-radius:6px!important;
  }
  .mob-frow-toggle{
    padding:4px 8px;
    min-height:32px;
    font-size:11px;
    color:var(--t2);
    background:var(--cd);
    border:1px solid var(--bd);
    border-radius:6px;
    cursor:pointer;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
  }
  .mob-frow-toggle:active{background:var(--bd)}
  .mob-frow-toggle[aria-expanded="true"]{color:var(--ac);border-color:var(--ac)}
  /* ——— Funnel tabs: horizontal scroll on mobile (when shown) ——— */
  .mob-ftabs-wrap{
    display:flex;
    flex-shrink:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 8px 4px;
    gap:4px;
    background:var(--sf);
    border-bottom:1px solid var(--bd);
  }
  .mob-ftabs-wrap::-webkit-scrollbar{display:none}
  .mob-ftabs-wrap .ft{
    flex:0 0 auto;
    padding:4px 10px!important;
    font-size:10px!important;
    border-radius:5px!important;
  }
  /* ——— Less vertical gap between header block and board ——— */
  .app .mob-frow{margin-top:0}
  .app .mob-srch-row{margin-top:0}
  /* ——— Compact archive tabs if shown ——— */
  .arch-tabs{padding:4px 8px!important;gap:4px!important;min-height:36px!important}
}
.m-date-sep {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.m-evt.m-evt-task {
  background: #fff475b2 !important;
}
.m-evt.m-evt-task .et {
  font-weight: 600;
}

/* ——— Bottom sheet: выбор стадии лида (mobile) — плоская полоса как до funnel-arrow strip ——— */
@media (max-width: 768px) {
  #bsSheet.bs-mode-leadStage.bs-sheet {
    background: #eef2f7 !important;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.07);
  }
  #bsSheet.bs-mode-leadStage .bs-list {
    padding: 6px 12px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
  }
  #bsSheet.bs-mode-leadStage .m-seg.bs-lead-stage-seg {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    margin: 0;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  [data-theme="dark"] #bsSheet.bs-mode-leadStage .m-seg.bs-lead-stage-seg {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
  }
  #bsSheet.bs-mode-leadStage .m-seg.bs-lead-stage-seg .m-segt {
    flex: 0 0 auto;
    min-width: 72px;
    max-width: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 7px;
    clip-path: none !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #bsSheet.bs-mode-leadStage .m-seg.bs-lead-stage-seg .m-segt:active {
    transform: scale(0.97) !important;
  }
  #bsSheet.bs-mode-leadStage .bs-stg-ix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
  }
  #bsSheet.bs-mode-leadStage .bs-stg-txt {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    color: #64748b;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    text-align: center;
  }
  #bsSheet.bs-mode-leadStage .m-segt.on .bs-stg-txt {
    color: #0f172a;
  }
  [data-theme="dark"] #bsSheet.bs-mode-leadStage .m-segt.on .bs-stg-txt {
    color: #f4f4f5;
  }
}