/* Parking JP v136 — acabamento mobile/tablet */
:root{
  --pc-mobile-gap:14px;
  --pc-mobile-radius:18px;
  --pc-mobile-tap:48px;
}

html,body{max-width:100%;overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}

/* Tablet */
@media (max-width: 1180px){
  .wrap,.app-main{max-width:100%!important;width:100%!important;padding-left:20px!important;padding-right:20px!important;box-sizing:border-box}
  .option1-grid,.grid.option1-grid{grid-template-columns:minmax(300px,380px) minmax(0,1fr)!important;gap:18px!important}
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .equipment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .card{border-radius:18px!important}
  table{min-width:760px}
  .scroll{overflow:auto;-webkit-overflow-scrolling:touch}
}

/* Mobile grande / tablet retrato */
@media (max-width: 860px){
  body{font-size:16px!important;background:#f4f7fb}

  .app-header{
    min-height:64px!important;
    height:auto!important;
    padding:8px 12px!important;
    gap:10px!important;
    position:sticky!important;
    top:0!important;
    z-index:80!important;
  }
  .app-header .brand{min-width:0!important;flex:1 1 auto!important;display:flex!important;align-items:center!important}
  .app-header .brand img{max-width:170px!important;max-height:42px!important;width:auto!important;height:auto!important}
  .app-header .account{font-size:12px!important;max-width:42vw!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .app-header .account small,.app-header .owner-account small{display:none!important}
  .menu-toggle{min-height:44px!important;padding:10px 12px!important;border-radius:12px!important}

  .app-layout{display:block!important;min-width:0!important}
  .wrap,.app-main{padding:14px!important;margin:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}

  /* menu vira gaveta lateral */
  .side-menu{
    position:fixed!important;
    top:64px!important;
    left:0!important;
    bottom:0!important;
    width:min(84vw,320px)!important;
    max-width:320px!important;
    z-index:70!important;
    overflow:auto!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    box-shadow:0 18px 45px rgba(7,32,66,.22)!important;
  }
  body.menu-expanded .side-menu,.side-menu.is-open{transform:translateX(0)!important}
  body.menu-expanded:after{
    content:"";
    position:fixed;
    inset:64px 0 0 0;
    background:rgba(8,27,50,.38);
    z-index:60;
    pointer-events:none;
  }
  .side-menu nav{padding:12px!important}
  .side-menu nav button{min-height:48px!important;border-radius:12px!important;margin:3px 0!important}

  .option1-grid,.grid.option1-grid,.equipment-grid,.form-grid{grid-template-columns:1fr!important;gap:14px!important}
  .register-panel,.yard-main{min-width:0!important;width:100%!important}

  h1{font-size:1.65rem!important;line-height:1.15!important}
  h2{font-size:1.3rem!important;line-height:1.2!important}
  h3{font-size:1.08rem!important}
  .section-title{gap:10px!important;align-items:flex-start!important;flex-wrap:wrap!important}
  .section-title>button,.section-title .row-actions{max-width:100%!important}

  .card{padding:18px!important;margin-bottom:14px!important;border-radius:var(--pc-mobile-radius)!important;box-shadow:0 6px 22px rgba(27,61,95,.07)!important}
  fieldset{padding:14px!important;border-radius:14px!important}
  label{gap:7px!important}
  input,select,textarea{
    width:100%!important;
    min-height:var(--pc-mobile-tap)!important;
    font-size:16px!important; /* evita zoom no iPhone */
    border-radius:12px!important;
    box-sizing:border-box!important;
  }
  textarea{min-height:110px!important}
  button,a.button{
    min-height:var(--pc-mobile-tap)!important;
    border-radius:12px!important;
  }
  .register-primary{width:100%!important;font-size:1.05rem!important;font-weight:800!important;margin-top:8px!important}

  .metrics,.yard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .metrics article,.yard-metrics article{padding:14px!important;min-width:0!important}
  .metrics article strong,.yard-metrics article strong{font-size:1.45rem!important}

  .row-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .row-actions>button{flex:1 1 160px!important;min-width:0!important}

  /* tabelas viram cartões usando data-label existente */
  .scroll{overflow:visible!important}
  .scroll table{min-width:0!important;width:100%!important;display:block!important}
  .scroll thead{display:none!important}
  .scroll tbody{display:grid!important;gap:12px!important}
  .scroll tr{
    display:block!important;
    background:#fff!important;
    border:1px solid #e3eaf3!important;
    border-radius:16px!important;
    padding:10px 12px!important;
    box-shadow:0 3px 12px rgba(24,55,88,.05)!important;
  }
  .scroll td{
    display:grid!important;
    grid-template-columns:minmax(105px,36%) minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
    width:100%!important;
    padding:9px 2px!important;
    border:0!important;
    border-bottom:1px solid #edf1f6!important;
    text-align:left!important;
    white-space:normal!important;
    box-sizing:border-box!important;
  }
  .scroll td:last-child{border-bottom:0!important}
  .scroll td:before{
    content:attr(data-label);
    font-size:.78rem;
    line-height:1.2;
    font-weight:800;
    color:#5e6f85;
    overflow:hidden;
  }
  .scroll td[data-label=""],.scroll td:not([data-label]){grid-template-columns:1fr!important}
  .scroll td[data-label=""]:before,.scroll td:not([data-label]):before{display:none!important}
  .scroll td .row-actions{grid-column:1/-1!important}
  .plate-ticket-cell{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
  .vehicle-thumb{width:64px!important;height:64px!important;object-fit:cover!important;border-radius:12px!important;flex:0 0 64px!important}
  .plate-ticket-info{min-width:0!important}
  .vehicle-plate{font-size:1.05rem!important}

  dialog.card,.edit-vehicle-dialog{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 20px)!important;
    margin:10px!important;
    border-radius:20px!important;
    padding:18px!important;
  }
  dialog::backdrop{background:rgba(5,22,42,.56)!important}

  #photo-preview{max-height:260px!important;border-radius:14px!important;object-fit:cover!important}
  [data-pc-photo-grid],.pc-photo-grid,.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}

  .owner-main,.operator-main{padding-top:14px!important}
  .owner-header .owner-account,.operator-shell-account{max-width:48vw!important}
  .operator-top-nav{overflow-x:auto!important;white-space:nowrap!important;max-width:58vw!important;scrollbar-width:none!important}
  .operator-top-nav::-webkit-scrollbar{display:none!important}
  .operator-top-nav button{min-width:max-content!important}

  .feedback,.pc-offline-cache-note{border-radius:14px!important;padding:12px 14px!important}
  #pc-offline-status{left:10px!important;right:10px!important;bottom:10px!important;width:auto!important;max-width:none!important;border-radius:14px!important;z-index:120!important}
}

/* Celular */
@media (max-width: 560px){
  .wrap,.app-main{padding:10px!important}
  .card{padding:15px!important;border-radius:16px!important}
  .app-header{padding:7px 9px!important}
  .app-header .brand img{max-width:132px!important}
  .app-header .account{max-width:38vw!important}
  .account>span,.operator-shell-user{display:none!important}

  .metrics,.yard-metrics{grid-template-columns:1fr 1fr!important}
  .metrics article:first-child:nth-last-child(3){grid-column:1/-1!important}

  .row-actions{display:grid!important;grid-template-columns:1fr!important}
  .row-actions>button{width:100%!important;min-width:0!important}

  .section-title>button{width:100%!important}
  .equipment-grid article button{width:100%!important}

  .scroll td{grid-template-columns:96px minmax(0,1fr)!important;font-size:.94rem!important}
  .vehicle-thumb{width:58px!important;height:58px!important;flex-basis:58px!important}

  [data-pc-photo-grid],.pc-photo-grid,.photo-grid{grid-template-columns:1fr 1fr!important}

  input[type="checkbox"],input[type="radio"]{width:22px!important;height:22px!important;min-height:22px!important}

  .login{padding:14px!important;min-height:calc(100dvh - 20px)!important}
  .login .card{width:100%!important;max-width:100%!important}
}

@media (max-width: 390px){
  .app-header .brand img{max-width:112px!important}
  .metrics,.yard-metrics{grid-template-columns:1fr!important}
  .scroll td{grid-template-columns:1fr!important;gap:4px!important}
  .scroll td:before{margin-bottom:2px!important}
  [data-pc-photo-grid],.pc-photo-grid,.photo-grid{grid-template-columns:1fr!important}
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px){
  .app-header{position:relative!important}
  .side-menu{top:0!important}
  body.menu-expanded:after{inset:0!important}
  dialog.card,.edit-vehicle-dialog{max-height:calc(100dvh - 8px)!important;margin:4px!important}
}