/* Fișa Service v1.11 – telefon și ecrane înguste (≤ 860 px) */
#mbar,#msheet,#tbMenu{display:none}

@media (max-width:860px){
  html{-webkit-text-size-adjust:100%}
  body{overscroll-behavior-y:none}
  /* fără coloana din stânga: navigarea trece în bara de jos */
  .side,.desk .side{display:none}
  .app,.desk .app{grid-template-columns:1fr;min-height:0}
  .main{padding:14px 14px calc(92px + env(safe-area-inset-bottom,0px))}

  /* bara de sus: doar logo, ceas, limbă și meniu */
  .titlebar{height:52px;padding:0 10px 0 14px;gap:8px;-webkit-app-region:no-drag;padding-top:env(safe-area-inset-top,0px);box-sizing:content-box}
  .titlebar .btn{display:none!important}
  .tb-clock{margin-right:0}.tb-clock .tbc-d{display:none}
  #tbMenu{display:grid;width:40px;height:40px;border-radius:12px;flex:none}
  #tbMenu svg{width:20px;height:20px}
  .lang-btn{padding:8px}

  /* bara de navigare de jos */
  #mbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--panel) 92%,transparent);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(0,0,0,.6)}
  #mbar button{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 2px;border-radius:14px;
    color:var(--mute);font:600 10.5px/1.1 var(--f-body);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s}
  #mbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #mbar svg{width:23px;height:23px;transition:transform .25s}
  #mbar button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
  #mbar button.on svg{transform:translateY(-1px) scale(1.06)}
  #mbar button:active{transform:scale(.94)}
  #mbar i,#msheet .ms-grid i{position:absolute;top:3px;left:calc(50% + 6px);font:700 9.5px/1 var(--f-mono);font-style:normal;color:#fff;background:var(--bad);border-radius:10px;padding:3px 5px;white-space:nowrap}
  #mbar i.dot{width:8px;height:8px;padding:0;top:7px;left:calc(50% + 9px)}

  /* meniul „Mai mult” */
  #msheet{display:block;position:fixed;inset:0;z-index:90}
  #msheet[hidden]{display:none}
  #msheet .ms-back{position:absolute;inset:0;background:rgba(5,8,12,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .22s}
  #msheet .ms-panel{position:absolute;left:0;right:0;bottom:0;max-height:86dvh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;
    padding:8px 14px calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 50px -20px rgba(0,0,0,.7)}
  #msheet.open .ms-back{opacity:1}
  #msheet.open .ms-panel{transform:none}
  #msheet .ms-grip{width:44px;height:5px;border-radius:5px;background:var(--line);margin:4px auto 14px}
  #msheet .ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  #msheet .ms-grid button{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:84px;padding:10px 6px;border-radius:16px;
    background:var(--panel2);border:1px solid var(--line);color:var(--fg);font:600 12.5px/1.2 var(--f-body);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #msheet .ms-grid button svg{width:24px;height:24px;color:var(--accent)}
  #msheet .ms-grid button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
  #msheet .ms-grid button:active{transform:scale(.96)}
  #msheet .ms-acts{display:flex;flex-direction:column;gap:2px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
  #msheet .ms-act{all:unset;box-sizing:border-box;min-height:48px;display:flex;align-items:center;padding:0 12px;border-radius:12px;font:500 15px var(--f-body);color:var(--fg);cursor:pointer}
  #msheet .ms-act:active{background:var(--panel2)}
  #msheet .ms-act.danger{color:var(--bad)}
  html.ms-lock,html.ms-lock body{overflow:hidden}

  /* antetul paginilor */
  .topbar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px;margin-bottom:16px}
  .topbar h2{font-size:25px}
  .topbar .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));grid-auto-rows:auto;align-content:start;align-items:stretch;gap:8px}
  .topbar .actions>*{min-width:0}
  .topbar .actions .btn{justify-content:center;min-height:44px}
  .search,.search input,.search input:focus{width:100%}
  .search input{min-height:44px}

  /* carduri și grile */
  .grid{gap:12px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:14px;border-radius:14px}
  .kpi .val{font-size:21px}.kpi .lbl{font-size:10px}
  .kpi .gauge{display:none}
  .two,.grid.two{grid-template-columns:1fr}
  .panel{padding:14px;border-radius:14px}
  .panel-h{flex-wrap:wrap}
  .cars{grid-template-columns:1fr}
  .hero-car{padding:16px;gap:14px}
  .specs{grid-template-columns:1fr 1fr;gap:8px}
  .fields{grid-template-columns:1fr}
  .btn{min-height:42px}
  .btn.sm{min-height:36px}
  .icon-btn{width:40px;height:40px}

  /* câmpurile la 16px: telefonul nu mai face zoom când scrii */
  input,select,textarea{font-size:16px!important}

  /* tabele → fișe */
  .main table thead,.modal table thead{display:none}
  .main table,.main tbody,.main tr,.main td,.modal table,.modal tbody,.modal tr,.modal td{display:block;width:100%}
  .tbl-wrap{overflow:visible}
  .main tbody tr,.modal tbody tr{position:relative;border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:10px;background:var(--panel2)}
  .main tbody tr:hover td,.modal tbody tr:hover td{background:transparent}
  .main td,.modal td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0!important;border:0!important;text-align:right;white-space:normal!important;min-height:30px}
  .main td::before,.modal td::before{content:attr(data-l);flex:none;max-width:45%;text-align:left;color:var(--mute);font:600 10.5px var(--f-body);text-transform:uppercase;letter-spacing:.08em}
  .main td[data-l=""]::before,.modal td[data-l=""]::before{content:none}
  .main td[data-l=""],.modal td[data-l=""]{justify-content:flex-end}
  .main td .row-actions,.main td>div{justify-content:flex-end}
  .main td{flex-wrap:wrap}
  .main td .adv-mini{flex-basis:100%;text-align:right;white-space:normal}

  /* ferestrele (modale) pe tot ecranul */
  .overlay{padding:0;place-items:end stretch;z-index:85}
  .modal{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;display:flex;flex-direction:column;animation:mobIn .28s cubic-bezier(.2,.8,.2,1)}
  @keyframes mobIn{from{transform:translateY(40px);opacity:0}}
  .modal>form{display:flex;flex-direction:column;flex:1;min-height:0}
  .modal-h{padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px}
  .modal-h h3{font-size:17px}
  .modal-b{padding:14px;flex:1;overflow:auto}
  .modal-f{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));gap:8px}
  .modal-f .btn{flex:1 1 auto;justify-content:center;min-height:46px}
  .modal-f>span[style*="flex:1"]{display:none}
  .modal-f .btn.primary{order:-2;flex:1 1 100%}
  .modal-f [data-fs="deviz"]{order:-1}
  #delZone{order:9;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px}#delZone .btn{flex:1}
  #delZone .confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}

  /* filtrele de sus se derulează pe orizontală */
  .seg{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none;padding:8px 14px;min-height:36px;display:flex;align-items:center}
  .modal input,.modal select,.modal textarea{min-width:0;max-width:100%}
  .modal{overflow-x:hidden}
  @media (hover:none){#tbMenu:hover{background:var(--panel2);color:inherit;border-color:var(--line);transform:none}}

  /* rândurile de piese și manoperă */
  .li{grid-template-columns:1fr 1fr 1fr 44px;grid-template-areas:"t t t x" "d d d d" "q c p p";gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
  .li>select{grid-area:t}.li>.d{grid-area:d}
  .li>input:nth-of-type(2){grid-area:q}.li>input:nth-of-type(3){grid-area:c}.li>input:nth-of-type(4){grid-area:p}
  .li>button{grid-area:x;width:44px;height:44px}
  .li>input,.li>select{min-width:0;width:100%}
  .li.is-labor{grid-template-areas:"t t t x" "d d d d" "q p p p"}
  .li.is-labor>input:nth-of-type(3){display:none}
  .total-box{justify-content:space-between;gap:10px 18px}
  .total-box span{flex:1 1 40%}
  .adv-f{grid-template-columns:1fr 1fr}
  .adv-rest{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:baseline}

  /* setări */
  .skins{grid-template-columns:repeat(2,1fr);gap:10px}
  .dz-tpls{grid-template-columns:repeat(2,1fr);gap:10px}
  .country-row{grid-template-columns:1fr}
  .lab-add input[type=number]{flex:1 1 120px}

  /* notificări deasupra barei de jos */
  .toast{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  /* ecranul de autentificare */
  #login .lg-right{padding:20px 14px 40px}
  #login .lg-card{padding:18px}
  .lg-lang{top:calc(10px + env(safe-area-inset-top,0px))}
}
@media (max-width:380px){
  .kpis{grid-template-columns:1fr}
  #mbar button span{font-size:9.5px}
  .skins,.dz-tpls{grid-template-columns:1fr 1fr}
}