/* ==========================================================================
   VT CRM — telefonų ir planšečių sluoksnis
   Kraunamas po styles.css ir themes.css. Keičia tik išdėstymą, ne spalvas.

   Lūžio taškai:
     <= 720px  telefonas — šoninė juosta virsta išskleidžiamu skydeliu
     <= 980px  planšetė  — siauresnės paraštės, sulipdyti tinkleliai
   ========================================================================== */

/* Numatytai mobilieji valdikliai paslėpti — juos rodo tik telefono lūžis. */
.tb-menu, .tb-searchbtn, .tb-brand, .nav-scrim, .mobile-search { display: none; }

/* ============================================ SIAURAS DARBALAUKIS (<=1100px) */
/* Horizontalios eilutės su fiksuoto pločio elementais (rodiklių juostos,
   kortelių antraštės) siaurame ekrane laužiasi, o ne stumia puslapio. */
@media (max-width: 1100px) {
  .card .row,
  .card-body .row,
  .card-head,
  .page-actions,
  .toolbar { flex-wrap: wrap; }
  .card .row > .grow { min-width: 140px; }
  /* Fiksuoto pločio blokai eilutėje negali būti platesni už konteinerį. */
  .card .row > div { max-width: 100%; }

  /* Trys stulpeliai ties 1024px per siauri diagramoms su legendomis. */
  .grid.g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend.legend-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .meter-label { max-width: 150px; }
}

/* ====================================================== PLANŠETĖ (<=980px) */
@media (max-width: 980px) {
  .content { padding: 16px 16px 48px; }
  .record-head { gap: 14px; }
}


/* ================================ LIECIAMI TAIKINIAI (plansetes ir sensoriniai)
   Tie patys dydziai taikomi ir planseteje, ir bet kuriame irenginyje be peles.
   Telefono blokas juos jau nustato; cia apimtis prapleciama iki 980px. */
@media (max-width: 980px), (hover: none) {
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn.xs { width: 40px; height: 40px; }
  .btn { min-height: 40px; }
  .btn.sm { min-height: 40px; padding: 0 12px; }
  .seg button { min-height: 40px; padding: 0 12px; }
  .page-btn { min-width: 40px; height: 40px; }
  /* .global-search input yra grynas <input> be .input klases, todel i sia
     taisykle nepateko ir telefone likdavo 34 px auksčio - vienintelis
     per mazas liečiamas taikinys visoje programoje. */
  .input, .select, .field .input, .field .select,
  .global-search input { min-height: 40px; }
  .select.sm, .input.sm, .toolbar .select, .bulk-bar .select { height: 40px; }
  .tab { min-height: 44px; }
  .filter-tab { min-height: 44px; }
  .menu-item { min-height: 42px; }
  .nav-item { min-height: 42px; }
  .set-nav-item { min-height: 40px; }
  .folder-item { min-height: 42px; }
  .mini-cal button { height: 40px; }
  .chat-sec-btn { min-width: 40px; min-height: 40px; }
  .chip-filter { height: 40px; padding-right: 2px; }
  .chip-filter button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
  .checkbox { width: 22px; height: 22px; position: relative; }
  .checkbox::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 44px; height: 44px;
  }
  .row-actions { opacity: 1; gap: 4px; }
  .collapse-btn { min-height: 44px; }
  .brand { min-height: 44px; }
}

/* ====================================================== TELEFONAS (<=720px) */
@media (max-width: 720px) {

  /* ------------------------------------------------ šoninė juosta = skydelis */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 268px; max-width: 84vw;
    z-index: 210;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.32,.72,.35,1);
    box-shadow: none;
    height: calc(100dvh / var(--ui-scale, 1));
  }
  .app.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }

  /* Telefone visada rodome pavadinimus — piktogramos be teksto nesuprantamos.
     SVARBU: styles.css turi seną taisyklę @media (max-width:980px), kuri slepia
     .nav-label ir .nav-count VISIEMS siauriems ekranams — ji buvo teisinga, kol
     šoninė juosta ten virsdavo 68px piktogramų juostele. Telefone ji virsta
     268px stalčiumi, todėl tą taisyklę čia atšaukiame; kitaip stalčiuje matomos
     vien piktogramos be jokio teksto. */
  .sidebar .brand-text { display: block; }
  .nav-label { display: block; }
  .nav-count { display: inline; }
  .nav-item { justify-content: flex-start; padding: 10px 12px; }

  .app.collapsed .sidebar { width: 268px; }
  .app.collapsed .brand-text,
  .app.collapsed .nav-label,
  .app.collapsed .nav-count { display: block; }
  .app.collapsed .nav-item { justify-content: flex-start; padding: 10px 12px; }
  .app.collapsed .collapse-btn { justify-content: flex-start; }
  .app.collapsed .collapse-btn span:not(.ico) { display: inline; }
  .nav-item { padding: 10px 12px; min-height: 44px; }
  .nav-group-label { padding: 14px 12px 6px; }
  .collapse-btn { min-height: 44px; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 205;
    background: rgba(20, 18, 26, .42);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  .main { width: 100%; min-width: 0; }

  /* Puslapis niekada neslenka i sona. Vidiniai konteineriai (.table-wrap,
     .pipeline) turi savo overflow-x:auto, todel turinys lieka pasiekiamas. */
  html, body { overflow-x: hidden; max-width: 100%; }
  .app, .content { max-width: 100%; min-width: 0; }
  .content > * { min-width: 0; max-width: 100%; }
  .card, .card-body, .card-head { min-width: 0; }

  /* Filtro zymes salinimo mygtukas */
  .chip-filter { height: 40px; padding-right: 2px; }
  .chip-filter button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }

  /* --------------------------------------------------------- viršutinė juosta */
  .topbar { padding: 0 8px; gap: 4px; }
  .tb-menu { display: inline-flex; }
  .tb-searchbtn { display: inline-flex; }
  .tb-search { display: none; }              /* pakeičia .tb-searchbtn */
  .topbar .sep { display: none; }
  .tb-calendar, .tb-help { display: none; }  /* perkelta į vartotojo meniu */

  .tb-brand {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; flex: 1 1 auto; font-weight: 700; font-size: 14px;
  }
  .tb-brand .brand-mark { width: 28px; height: 28px; font-size: 13px; border-radius: 7px; }
  .tb-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .tb-create { padding: 0; width: 40px; flex: 0 0 40px; }
  .tb-create .btn-label { display: none; }
  .user-chip { padding: 3px; border: 0; background: none; }
  .user-chip-meta, .user-chip > .ico { display: none; }

  /* Paieška atsidaro atskira eilute po juosta. */
  .mobile-search {
    display: none; position: sticky; top: var(--topbar-h); z-index: 59;
    padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .app.search-open .mobile-search { display: block; }
  .mobile-search .global-search { display: block; max-width: none; }
  .mobile-search .kbd { display: none; }
  .mobile-search input { height: 40px; padding-right: 12px; }

  /* --------------------------------------------------------------- turinys */
  .content { padding: 14px 12px 80px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-actions { flex-wrap: wrap; }
  .page-actions .btn { flex: 1 1 auto; min-height: 40px; justify-content: center; }
  .page-title { font-size: 19px; }

  .grid, .grid.g-2, .grid.g-3, .grid.g-4, .grid.g-6,
  .grid.g-2-1, .grid.g-1-2, .grid.g-3-2 { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: span 1; }

  /* Bet koks dviejų stulpelių išdėstymas telefone sulipdomas. */
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .set-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .set-nav-item { min-height: 40px; }

  /* ------------------------------------------------------ liečiami taikiniai */
  .checkbox {
    width: 22px; height: 22px; border-radius: 6px;
    position: relative;
  }
  /* Nematoma 44px zona aplink mažą varnelę. */
  .checkbox::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }
  .checkbox svg { width: 14px; height: 14px; }
  .icon-btn { width: 40px; height: 40px; }
  .btn { min-height: 40px; }
  .btn.sm { min-height: 40px; }
  .seg button { min-height: 40px; padding: 0 12px; }
  .tab { padding: 11px 13px; min-height: 44px; }
  .filter-tab { padding: 10px 12px 12px; min-height: 44px; }
  .menu-item { min-height: 42px; }
  .list-item { padding: 12px 14px; min-height: 52px; }
  .folder-item { min-height: 42px; }

  /* Eilučių veiksmai sensoriniame ekrane visada matomi ir pakankamo dydžio. */
  .row-actions { opacity: 1; gap: 4px; }
  .icon-btn.xs { width: 40px; height: 40px; }
  .input, .select, .field .input, .field .select { min-height: 40px; }
  .page-btn { min-width: 40px; height: 40px; }
  .select.sm, .input.sm, .toolbar .select, .bulk-bar .select { height: 40px; }
  .btn.sm { min-height: 40px; padding: 0 12px; }
  .mini-cal button { height: 40px; }
  .chat-sec-btn { min-width: 40px; min-height: 40px; }

  /* ---------------------------------------------------------------- lentelės */
  /* Lentelė slenka SAVO konteineryje, o ne stumia puslapio. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card { max-width: 100%; }
  table.tbl { min-width: 640px; }
  table.tbl.dense td { padding: 10px 12px; }

  /* Įrankių juosta ir filtrai */
  .toolbar { gap: 6px; padding: 10px; }
  .toolbar .search-input { width: 100%; order: -1; }
  .toolbar .search-input input { height: 40px; }
  .toolbar .select { flex: 1 1 132px; min-width: 0; height: 40px; }
  .filter-tabs { padding: 6px 10px 0; }
  .active-filters { padding: 0 10px 10px; }
  .chip-filter { height: 40px; }

  /* Masinių veiksmų juosta prilimpa ekrano apačioje. */
  .bulk-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    border-top: 1px solid var(--violet-line); border-bottom: 0;
    padding: 10px 12px; gap: 8px; flex-wrap: wrap;
    box-shadow: 0 -6px 22px -12px rgba(20,18,26,.5);
  }
  .bulk-bar .sep, .bulk-bar .grow { display: none; }
  .bulk-bar .select { flex: 1 1 140px; }

  /* Puslapiavimas */
  .pager { gap: 8px; padding: 12px 10px; }
  .pager .pages { margin-left: 0; width: 100%; justify-content: center; }
  .page-btn { min-width: 40px; height: 40px; }

  /* ------------------------------------------------- skydeliai ir dialogai */
  .drawer, .drawer.wide {
    width: 100vw; max-width: 100vw;
    top: 0; bottom: 0; border-radius: 0;
  }
  .drawer-head { padding: 14px 14px 12px; }
  .drawer-body { padding: 14px; }
  .drawer-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .drawer-foot .btn { flex: 1 1 auto; justify-content: center; }

  .modal {
    width: 100vw; max-width: 100vw; max-height: 100dvh;
    top: auto; bottom: 0; left: 0; transform: translateY(100%);
    border-radius: 14px 14px 0 0;
  }
  .modal.on { transform: none; }
  .modal-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }

  .menu { max-width: calc(100vw - 20px); max-height: 70dvh; overflow-y: auto; }

  /* Formos: du stulpeliai virsta vienu */
  .drawer-body .grid.g-2, .modal-body .grid.g-2 { grid-template-columns: minmax(0, 1fr); }

  /* ------------------------------------------------------------ moduliai */
  .record-head { flex-direction: column; padding: 14px; }
  .record-cover { width: 100%; height: 180px; }
  .meta-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px 14px; }

  .obj-grid { grid-template-columns: minmax(0, 1fr); }
  /* Pipeline slenka savo konteineryje ir neišstumia puslapio. */
  .pipeline { gap: 8px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pipe-col { flex: 0 0 76vw; max-width: 300px; max-height: none; }
  .card > .card-body > .pipeline, .card-body > .pipeline { margin: 0; }

  .kpi-value { font-size: 22px; }
  .kpi { padding: 12px 13px; }

  .timeline { padding-left: 22px; }
  .def-list { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .def-list dd { text-align: left; margin-bottom: 8px; }

  .legend.legend-grid { grid-template-columns: minmax(0, 1fr); }
  .meter-label { min-width: 92px; max-width: 140px; }
  .funnel-name { width: 108px; }
  .funnel-meta { width: 84px; }

  /* Toast virš masinių veiksmų juostos */
  .toast-wrap { bottom: 74px; width: calc(100vw - 24px); }
  .toast { width: 100%; }
}

/* ============================================ LABAI SIAURAS (<=380px) */
@media (max-width: 380px) {
  .content { padding: 12px 10px 76px; }
  .tb-brand span { display: none; }
  .page-actions .btn { font-size: 12px; }
  .pipe-col { flex: 0 0 88vw; }
}

/* ================================================= HORIZONTALUS TELEFONAS */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  /* --topbar-h valdo ir realų topbar aukštį, ir viską, kas prie jo lipdosi
     (.mobile-search sticky top, .set-nav/.cal-side sticky top) - be šio
     pakeitimo .mobile-search likdavo prilipusi prie senojo 60px, ir turinys
     slinkdavo per 12px juostą po ja. */
  :root { --topbar-h: 48px; }
  .topbar { height: 48px; }
  .drawer-head { padding: 10px 14px; }
  .modal { max-height: 96dvh; }
}

/* ====================================================== SENSORINIS ĮVESTIS */
@media (hover: none) {
  /* Užvedimo efektai nenaudingi — veiksmai visada matomi. */
  .row-actions { opacity: 1; }
  table.tbl tbody tr:hover td { background: transparent; }
  .list-item:hover { background: transparent; }
  /* iOS neleidžia priartinti, kai laukas < 16px */
  .input, .select, textarea.input, .global-search input { font-size: 16px; }
}