/* ========================================================================
   GS ERP V19 - RESPONSIVE UI LAYER
   Scop: optimizare exclusiv vizuala pentru desktop full-screen si telefon.
   Nu modifica logica, fluxuri, formulare, endpoint-uri sau date.
   ======================================================================== */

html{
  width:100%;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box}
img,picture,video,canvas,svg{max-width:100%}
img,picture,video{height:auto}
iframe{max-width:100%}
fieldset{min-width:0;max-width:100%}
input,select,textarea,button{max-width:100%;font-family:inherit}
pre,code{max-width:100%}
pre{overflow:auto;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------------------------
   DESKTOP / LAPTOP - foloseste latimea reala a ecranului
   ------------------------------------------------------------------------ */
@media (min-width:981px){
  /* PC: meniul principal ramane permanent vizibil in stanga. */
  .gs-app{
    display:flex!important;
    align-items:flex-start!important;
    min-height:100vh!important;
    width:100%!important;
  }
  .gs-sidebar{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:sticky!important;
    top:0!important;
    left:0!important;
    width:236px!important;
    min-width:236px!important;
    max-width:236px!important;
    height:100vh!important;
    flex:0 0 236px!important;
    transform:none!important;
    margin-left:0!important;
    pointer-events:auto!important;
  }
  .gs-mobile-toggle,.gs-sidebar-backdrop{
    display:none!important;
  }
  .gs-content{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding-left:clamp(20px,2vw,38px)!important;
    padding-right:clamp(20px,2vw,38px)!important;
  }
  /* Portal client: sidebar-ul ramane fix si vizibil pe desktop. */
  .gsc-sidebar{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  .gsc-mobile-toggle,.gsc-sidebar-backdrop{display:none!important}

  .field-app{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:clamp(20px,2vw,38px)!important;
    padding-right:clamp(20px,2vw,38px)!important;
  }
  .gsc-page,.portal-wrap,.cp,.cp-page,.ro-map-shell,.revplan-page{
    width:100%!important;
    max-width:none!important;
  }

  /* Outer containers vechi: extindere fluida, fara a forta componentele interne. */
  body > .wrap,
  body > .app,
  body > .shell,
  body > main.wrap,
  body > main.app,
  body > main.shell,
  body > [class$="-wrap"]{
    width:calc(100% - 40px)!important;
    max-width:none!important;
  }

  /* Griduri si panouri nu au voie sa depaseasca containerul. */
  .gs-grid,.field-layout,.field-grid-controls,.field-summary,
  .ploc-grid,.ro-layout,.cp-grid,.tour-grid{
    min-width:0;
  }
  .gs-grid > *, .field-layout > *, .field-grid-controls > *,
  .field-summary > *, .ploc-grid > *, .ro-layout > *, .cp-grid > *, .tour-grid > *{
    min-width:0;
  }
}

/* ------------------------------------------------------------------------
   TABLET / TELEFON - baza comuna
   ------------------------------------------------------------------------ */
@media (max-width:980px){
  body{overflow-x:hidden!important}

  .gs-content{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .gs-topbar{
    width:100%;
    min-width:0;
    gap:10px;
    padding-right:14px;
  }
  .gs-topbar-left,.gs-topbar-right{min-width:0}
  .gs-topbar-right{flex-wrap:wrap;justify-content:flex-end}
  .gs-user{min-width:0}
  .gs-user > div{min-width:0}
  .gs-user b,.gs-user span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .gs-card,.field-panel,.field-control-card{
    max-width:100%;
    min-width:0;
  }
  .gs-card-pad{padding:16px}
  .gs-card-head{align-items:flex-start;flex-wrap:wrap}
  .gs-card-head > *{min-width:0}

  .gs-flex{min-width:0}
  .gs-flex.gs-justify-between{flex-wrap:wrap}

  /* Orice tabel ramane lizibil si se deruleaza in interiorul lui, nu pagina. */
  table{
    max-width:100%!important;
  }
  table.gs-table,
  .gs-card table,
  .field-panel table,
  .gsc-content table,
  body > .wrap table,
  body > .app table,
  body > .shell table{
    display:block;
    width:100%!important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  th,td{overflow-wrap:normal;word-break:normal}

  .gs-modal,.field-modal{padding:12px}
  .gs-modal-box,.field-modal-box{
    max-width:100%!important;
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .gs-toast,.field-toast{
    max-width:calc(100vw - 24px)!important;
  }

  /* Harti / grafice: nu ies lateral din viewport. */
  #map,.map,.field-map,.ro-map,.leaflet-container,
  [class*="map-shell"],[class*="map-wrap"]{
    max-width:100%!important;
  }
}

/* ------------------------------------------------------------------------
   TELEFON - lizibilitate, touch targets si aranjare verticala
   ------------------------------------------------------------------------ */
@media (max-width:640px){
  :root{
    --gs-s4:14px;
    --gs-s5:16px;
    --gs-s6:18px;
  }

  body{font-size:14px}

  .gs-content{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .gs-h1{font-size:26px;line-height:1.12}
  .gs-h2{font-size:18px}
  .gs-h3{font-size:14px}

  .gs-card{border-radius:15px}
  .gs-card-pad{padding:14px}
  .gs-card-head{padding:12px 14px}

  .gs-btn,.field-btn,.field-mini,
  button:not(.gs-mobile-toggle):not(.gsc-mobile-toggle),
  input[type="button"],input[type="submit"],input[type="reset"]{
    min-height:42px;
  }
  .gs-btn{padding:10px 14px;font-size:13px}

  /* 16px pe campuri evita zoom-ul automat pe iOS si imbunatateste citirea. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,
  .gs-input,.gs-select,.gs-textarea{
    font-size:16px!important;
  }

  .gs-modal-actions,.field-modal-actions{
    flex-wrap:wrap;
  }
  .gs-modal-actions > *,.field-modal-actions > *{
    flex:1 1 150px;
  }

  .gs-toast{
    left:10px!important;
    right:10px!important;
    top:10px!important;
    width:auto!important;
    transform:translateY(-150%);
  }
  .gs-toast.show{transform:translateY(0)}

  .gs-user span{display:none}
  .gs-user{padding:6px 8px}
  .gs-avatar{width:30px;height:30px}

  /* Field Operations / NOVA */
  .field-app{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px 10px 64px!important;
  }
  .field-top{gap:12px;margin-bottom:14px}
  .field-top h1{font-size:24px;line-height:1.15}
  .field-top-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .field-top-actions > *{width:100%;min-width:0;text-align:center}
  .nova-status{grid-column:1/-1;white-space:normal;text-align:center}
  .field-grid-controls{grid-template-columns:1fr!important}
  .field-summary{grid-template-columns:1fr 1fr!important;gap:8px}
  .field-summary > div{padding:11px 12px}
  .field-summary b{font-size:18px}
  .field-layout{grid-template-columns:1fr!important}
  .field-panel-head{align-items:flex-start;flex-wrap:wrap}
  .field-stop{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:9px;
    padding:11px;
  }
  .field-stop-actions{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .field-stop-actions > *{width:100%;min-width:0;text-align:center}
  .field-stop-title{font-size:13px}
  .field-stop-times{gap:5px}
  .field-stop-times span{white-space:normal}
  .field-main-actions{display:grid!important;grid-template-columns:1fr;width:100%}
  .field-main-actions > *{width:100%!important;min-width:0!important}
  .field-expense-form{grid-template-columns:1fr!important}
  .field-expense-row{align-items:flex-start;flex-wrap:wrap}
  .field-expense-row div{flex:1 1 100%;min-width:0}
  .field-hotel{flex-direction:column}
  .field-map{height:min(54vh,300px)}
  .field-toast{
    left:10px!important;right:10px!important;bottom:12px!important;
    width:auto!important;transform:translateY(20px)!important;
  }
  .field-toast.show{transform:translateY(0)!important}

  /* Client portal */
  .gsc-content{
    width:100%!important;
    max-width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .gsc-page-head{align-items:flex-start!important;flex-direction:column!important;gap:10px!important}
  .gsc-page-head h1{font-size:24px!important}
  .gsc-page-head > *{min-width:0;max-width:100%}
  .gsc-content .portal-top{gap:10px!important}
  .gsc-content .portal-brand{min-width:0}
  .gsc-content .portal-brand b{font-size:15px!important}
  .gsc-content .ploc-card,.gsc-content .ticket-row{min-width:0!important}
  .gsc-content .ticket-title,.gsc-content .ploc-name{overflow-wrap:anywhere}

  /* Containere legacy */
  body > .wrap,
  body > .app,
  body > .shell,
  body > main.wrap,
  body > main.app,
  body > main.shell,
  body > [class$="-wrap"]{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

@media (max-width:480px){
  .gs-sidebar{width:min(88vw,300px)}
  .gs-mobile-toggle{left:10px;top:10px}

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

  .field-top-actions{grid-template-columns:1fr!important}
  .nova-status{grid-column:auto}
  .field-summary{grid-template-columns:1fr!important}
  .field-stop-actions{grid-template-columns:1fr!important}
  .field-modal-actions,.gs-modal-actions{display:grid!important;grid-template-columns:1fr!important}
  .field-modal-actions > *,.gs-modal-actions > *{width:100%!important}

  .gsc-content .gs-grid-4{grid-template-columns:1fr!important}
  .gsc-content .gs-kpi{min-height:auto!important;padding:14px!important}
  .gsc-content .gs-kpi-label{font-size:11px!important}
  .gsc-content .gs-kpi-value{font-size:24px!important}
  .gsc-content .ploc-actions{grid-template-columns:1fr!important}
}

/* Telefoane in landscape: utilizam latimea fara a face controalele uriase. */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .gs-content{padding-top:62px!important}
  .field-app{padding-top:10px!important}
  .field-map{height:58vh}
  .gs-modal-box,.field-modal-box{max-height:calc(100dvh - 16px)}
}

/* Safe-area pentru telefoane cu notch / home indicator. */
@supports (padding:max(0px)){
  @media (max-width:980px){
    .gs-mobile-toggle,.gsc-mobile-toggle{left:max(10px,env(safe-area-inset-left))}
    .gs-content,.gsc-content,.field-app{
      padding-left:max(10px,env(safe-area-inset-left))!important;
      padding-right:max(10px,env(safe-area-inset-right))!important;
    }
  }
}