:root{
  --ecco-text:#0f172a;
  --ecco-muted:#64748b;
  --ecco-soft:#f8fafc;
  --ecco-green:#22c55e;
  --ecco-blue:#0ea5e9;
  --ecco-danger:#ef4444;
  --ecco-warning:#f59e0b;
  --ecco-glass:rgba(255,255,255,.46);
  --ecco-glass-strong:rgba(255,255,255,.72);
  --ecco-border:rgba(255,255,255,.58);
  --ecco-shadow:0 20px 52px rgba(15,23,42,.12);
  --ecco-radius-page:24px;
  --ecco-radius-card:18px;
  --ecco-radius-input:14px;
  --ecco-speed:.22s;
}

html{scroll-behavior:smooth}
body{color:var(--ecco-text);text-rendering:optimizeLegibility}

button,
.btn,
.tab,
.premium-link,
a.btn{
  transition:transform var(--ecco-speed) ease,box-shadow var(--ecco-speed) ease,background var(--ecco-speed) ease,border-color var(--ecco-speed) ease;
}

button:hover,
.btn:hover,
.tab:hover,
.premium-link:hover,
a.btn:hover{
  transform:translateY(-1px);
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(14,165,233,.34)!important;
  outline-offset:3px;
}

input,
select,
textarea{
  border-radius:var(--ecco-radius-input)!important;
  transition:border-color var(--ecco-speed) ease,box-shadow var(--ecco-speed) ease,background var(--ecco-speed) ease;
}

textarea{min-height:96px;resize:vertical}

.receipt,
.card,
.admin-card,
.donut-card,
.operator-summary-card,
.ecco-finance-card,
.agenda-top-today,
.coletas-toolbar,
.operator-profile-menu,
.box,
.app-card,
.sidebar,
.content{
  border-radius:var(--ecco-radius-page)!important;
  border-color:var(--ecco-border)!important;
  box-shadow:var(--ecco-shadow);
}

.receipt,
.card,
.admin-card,
.operator-summary-card,
.ecco-finance-card{
  animation:eccoFadeUp .32s ease both;
}

.btn,
button.btn,
a.btn{
  position:relative;
  overflow:hidden;
}

.btn::after,
button.btn::after,
a.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-120%) skewX(-22deg);
  opacity:0;
}

.btn:hover::after,
button.btn:hover::after,
a.btn:hover::after{
  animation:eccoButtonSweep .8s ease;
  opacity:1;
}

.danger-btn,
.btn.danger-btn{
  background:linear-gradient(135deg,#fb7185,#ef4444)!important;
  color:#fff!important;
}

.btn-dark{
  background:linear-gradient(135deg,#0f172a,#334155)!important;
  color:#fff!important;
}

.ecco-toast-stack{
  position:fixed;
  right:20px;
  bottom:22px;
  z-index:2147483647;
  display:grid;
  gap:10px;
  width:min(380px,calc(100vw - 32px));
}

.ecco-toast{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 20px 55px rgba(15,23,42,.18);
  color:var(--ecco-text);
  font-weight:850;
  line-height:1.45;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  animation:eccoToastIn .22s ease both;
}

.ecco-toast.success{border-color:rgba(34,197,94,.30)}
.ecco-toast.error{border-color:rgba(239,68,68,.32)}
.ecco-toast.warn{border-color:rgba(245,158,11,.34)}

.ecco-alert-backdrop{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:eccoBackdropIn .18s ease both;
}

.ecco-alert-modal{
  width:min(440px,100%);
  border-radius:24px;
  padding:22px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 28px 80px rgba(15,23,42,.24);
  color:var(--ecco-text);
  animation:eccoModalIn .22s ease both;
}

.ecco-alert-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  margin-bottom:12px;
  background:linear-gradient(135deg,#86efac,#7dd3fc);
  box-shadow:0 14px 34px rgba(14,165,233,.20);
  position:relative;
}

.ecco-alert-icon::after{
  content:"";
  position:absolute;
  left:15px;
  top:11px;
  width:12px;
  height:20px;
  border:solid #052e16;
  border-width:0 4px 4px 0;
  transform:rotate(42deg);
}

.ecco-alert-modal.error .ecco-alert-icon{
  background:linear-gradient(135deg,#fb7185,#ef4444);
}

.ecco-alert-modal.error .ecco-alert-icon::after{
  content:"!";
  inset:auto;
  width:auto;
  height:auto;
  border:0;
  color:#fff;
  font-size:28px;
  font-weight:950;
  left:18px;
  top:7px;
  transform:none;
}

.ecco-alert-modal.warn .ecco-alert-icon{
  background:linear-gradient(135deg,#fde68a,#f59e0b);
}

.ecco-alert-modal.warn .ecco-alert-icon::after{
  border-color:#78350f;
}

.ecco-alert-modal h3{
  font-size:22px;
  margin-bottom:8px;
}

.ecco-alert-modal p{
  color:#475569;
  line-height:1.6;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.ecco-alert-input{
  width:100%;
  height:52px;
  margin-top:14px;
  padding:0 14px;
  border-radius:16px!important;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(248,250,252,.82);
  color:#0f172a;
  font-size:15px;
  font-weight:800;
}

.ecco-alert-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.ecco-alert-actions button{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  cursor:pointer;
  font-weight:900;
  background:linear-gradient(135deg,#86efac,#7dd3fc);
  color:#052e16;
}

.ecco-alert-actions .ecco-alert-cancel{
  background:rgba(15,23,42,.08);
  color:#334155;
}

.ecco-smart-field{
  position:relative;
}

.ecco-smart-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:80;
  display:none;
  max-height:156px;
  overflow-y:auto;
  padding:6px;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(148,163,184,.26);
  box-shadow:0 22px 58px rgba(15,23,42,.18);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.ecco-smart-results.open{
  display:grid;
  gap:6px;
}

.ecco-smart-option{
  width:100%;
  min-height:44px;
  display:block;
  text-align:left;
  border:0;
  border-radius:12px;
  padding:8px 10px;
  background:rgba(248,250,252,.86);
  color:#0f172a;
  cursor:pointer;
  font-weight:850;
}

.ecco-smart-option:hover{
  background:linear-gradient(135deg,rgba(134,239,172,.32),rgba(125,211,252,.30));
}

.ecco-smart-option strong,
.ecco-smart-option span{
  display:block;
}

.ecco-smart-option span{
  margin-top:3px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}

.ecco-smart-option.muted{
  color:#64748b;
  cursor:default;
}

.ecco-empty-state{
  padding:20px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.32))!important;
  border:1px dashed rgba(14,165,233,.28)!important;
  color:#475569!important;
}

.ecco-loading{
  pointer-events:none;
  opacity:.78;
}

.ecco-loading::before{
  content:"";
  display:inline-block;
  width:13px;
  height:13px;
  margin-right:8px;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  vertical-align:-2px;
  animation:eccoSpin .75s linear infinite;
}

.ecco-view-animate{
  animation:eccoFadeUp .28s ease both;
}

.delete-modal-backdrop,
.admin-edit-modal-backdrop{
  animation:eccoBackdropIn .18s ease both;
}

.delete-modal,
.admin-edit-modal{
  animation:eccoModalIn .22s ease both;
}

@keyframes eccoFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes eccoToastIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes eccoButtonSweep{
  from{transform:translateX(-120%) skewX(-22deg)}
  to{transform:translateX(120%) skewX(-22deg)}
}

@keyframes eccoSpin{to{transform:rotate(360deg)}}

@keyframes eccoBackdropIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes eccoModalIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}

@media(max-width:700px){
  .ecco-toast-stack{right:16px;bottom:16px}
  .receipt,.card,.admin-card,.operator-summary-card{border-radius:18px!important}
}

/* Premium polish */
.rank-premium-chip,
.operator-active-chip,
.premium-status,
.rank-badge,
.operator-tag{
  box-shadow:0 10px 26px rgba(15,23,42,.10);
}

.agenda-top-today{
  position:relative;
  overflow:hidden;
}

.agenda-top-today::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.36) 50%,transparent 56%);
  animation:eccoSlowSweep 5.5s infinite;
  pointer-events:none;
}

.agenda-top-today>*{position:relative;z-index:1}

.agenda-today-item,
.coleta-card-item,
.item-comprovante{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.agenda-today-item:hover,
.coleta-card-item:hover,
.item-comprovante:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 46px rgba(15,23,42,.14)!important;
}

.agenda-status-atrasada,
.agenda-status-cancelada{
  box-shadow:0 0 0 3px rgba(239,68,68,.10);
}

.agenda-status-hoje,
.agenda-status-concluida{
  box-shadow:0 0 0 3px rgba(34,197,94,.10);
}

.scroll-table,
.coletas-scroll,
.agenda-board-scroll{
  scrollbar-width:thin;
  scrollbar-color:rgba(14,165,233,.45) rgba(255,255,255,.28);
}

.scroll-table::-webkit-scrollbar,
.coletas-scroll::-webkit-scrollbar,
.agenda-board-scroll::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.scroll-table::-webkit-scrollbar-thumb,
.coletas-scroll::-webkit-scrollbar-thumb,
.agenda-board-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg,#86efac,#7dd3fc);
  border-radius:999px;
}

.operator-summary-card{
  background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.34))!important;
}

.operator-summary-card:hover{
  transform:translateY(-2px);
  border-color:rgba(14,165,233,.30)!important;
}

.advance-helper-box,
.agenda-route-box{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 34px rgba(15,23,42,.08);
}

.table tr{
  transition:background .18s ease;
}

.table tbody tr:hover{
  background:rgba(14,165,233,.08);
}

@keyframes eccoSlowSweep{
  0%{transform:translateX(-34%)}
  55%{transform:translateX(34%)}
  100%{transform:translateX(34%)}
}

/* Mobile experience: only affects tablets and phones */
@media(max-width:850px){
  body{
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 18% 8%,rgba(187,247,208,.72),transparent 28%),
      radial-gradient(circle at 82% 4%,rgba(186,230,253,.70),transparent 30%),
      linear-gradient(135deg,#f8fafc,#eefdf5,#eef7ff)!important;
  }

  body::before,
  .section::before,
  .agenda-top-today::before,
  .ecco-fixed-card::before,
  .ranking-card::after,
  .btn::before,
  .btn::after,
  button.btn::after,
  a.btn::after{
    animation:none!important;
  }

  .page{
    padding:14px!important;
    align-items:flex-start!important;
  }

  .app-card{
    min-height:auto!important;
    border-radius:20px!important;
  }

  .brand-side,
  .form-side{
    padding:22px!important;
  }

  .brand-text h1,
  .hero h1{
    font-size:clamp(30px,9vw,40px)!important;
    letter-spacing:0!important;
    line-height:1.12!important;
  }

  .hero{
    padding:24px 16px 42px!important;
  }

  header,
  .header,
  .panel-header{
    padding:10px 14px!important;
    gap:10px!important;
    align-items:center!important;
  }

  .panel-header{
    flex-direction:column!important;
    text-align:center!important;
  }

  .logo img,
  .panel-header img{
    height:78px!important;
    max-width:210px!important;
    object-fit:contain!important;
  }

  .dashboard{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
  }

  .sidebar{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    padding:12px!important;
    margin:0!important;
    border-radius:18px!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }

  .sidebar h3{
    margin-bottom:8px!important;
    font-size:15px!important;
  }

  .menu{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding-bottom:4px!important;
    scrollbar-width:none!important;
  }

  .menu::-webkit-scrollbar{display:none!important}

  .menu button,
  .premium-link{
    width:auto!important;
    min-width:max-content!important;
    margin:0!important;
    padding:10px 13px!important;
    border-radius:999px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }

  .content,
  .receipt,
  .card,
  .admin-card,
  .donut-card,
  .ecco-finance-card,
  .agenda-top-today,
  .coletas-toolbar{
    padding:16px!important;
    border-radius:18px!important;
    box-shadow:0 12px 34px rgba(15,23,42,.09)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  .content h2{
    font-size:24px!important;
    line-height:1.18!important;
  }

  .grid,
  .form-grid,
  .ecco-finance-grid,
  .admin-insights,
  .admin-users-wrap,
  .operator-summary-grid,
  .agenda-section-grid,
  .agenda-meta,
  .agenda-toolbar,
  .coletas-toolbar{
    grid-template-columns:1fr!important;
  }

  .ranking-card{
    grid-template-columns:56px 1fr!important;
    gap:12px!important;
    padding:16px!important;
    border-radius:18px!important;
  }

  .rank-icon{
    width:54px!important;
    height:54px!important;
    border-radius:16px!important;
  }

  .rank-symbol{font-size:30px!important}
  .ranking-card strong{font-size:26px!important}

  input,
  select,
  textarea,
  button,
  .btn{
    min-height:44px;
    font-size:16px!important;
  }

  .btn,
  button.btn,
  a.btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .premium-actions,
  .modal-actions,
  .agenda-route-actions,
  .advance-quick-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .scroll-table,
  .ecco-table-wrap,
  .coletas-scroll,
  .agenda-board-scroll,
  .admin-scroll-list{
    max-height:62vh!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-right:4px!important;
  }

  .table{
    min-width:720px!important;
    font-size:13px!important;
  }

  .donut-wrap,
  .admin-future-panel{
    grid-template-columns:1fr!important;
  }

  .delete-modal,
  .admin-edit-modal{
    width:calc(100vw - 28px)!important;
    max-width:none!important;
    max-height:82vh!important;
    overflow:auto!important;
    border-radius:20px!important;
    padding:18px!important;
  }

  .delete-modal-backdrop,
  .admin-edit-modal-backdrop{
    padding:14px!important;
    align-items:flex-start!important;
    padding-top:8vh!important;
  }

  .operator-profile-wrap{
    top:auto!important;
    right:auto!important;
    left:14px!important;
    bottom:74px!important;
    z-index:999998!important;
  }

  .operator-profile-btn{
    width:58px!important;
    height:58px!important;
  }

  .operator-profile-menu{
    left:0!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(100% + 10px)!important;
    width:min(340px,calc(100vw - 28px))!important;
    max-height:68vh!important;
    overflow:auto!important;
  }

  .eccosync-support-float{
    right:14px!important;
    left:auto!important;
    bottom:14px!important;
    padding:12px!important;
    border-radius:50%!important;
  }

  .eccosync-support-float span{
    display:none!important;
  }

  .ecco-toast-stack{
    left:12px!important;
    right:12px!important;
    bottom:84px!important;
    width:auto!important;
  }
}

@media(max-width:600px){
  .hero-buttons{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .cards{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .card{
    width:100%!important;
    min-height:auto!important;
  }

  .section{
    padding:42px 16px!important;
  }

  .agenda-today-item,
  .admin-list-row,
  .ecco-cost-head,
  .admin-metric-head{
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .operator-status-line,
  .operator-status-mini{
    white-space:normal!important;
  }
}

@media(hover:none) and (pointer:coarse){
  button:hover,
  .btn:hover,
  .tab:hover,
  .premium-link:hover,
  a.btn:hover,
  .agenda-today-item:hover,
  .coleta-card-item:hover,
  .item-comprovante:hover,
  .operator-summary-card:hover,
  .card:hover{
    transform:none!important;
  }
}

/* Phone-first cleanup: prevents desktop-width surfaces from leaking into mobile */
@media(max-width:850px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  *,
  *::before,
  *::after{
    max-width:100%;
    box-sizing:border-box;
  }

  body{
    font-size:15px!important;
    line-height:1.45!important;
  }

  .page,
  main.page,
  .dashboard,
  .content,
  #contentArea,
  #conteudoPremium{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  main.page{
    padding:10px!important;
  }

  .header,
  .panel-header{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 10px!important;
  }

  .header .logo img,
  .panel-header img{
    height:58px!important;
  }

  .header-actions{
    width:auto!important;
    gap:8px!important;
  }

  .back-btn,
  .logout{
    min-height:40px!important;
    padding:10px 13px!important;
    font-size:13px!important;
    width:auto!important;
  }

  .hero{
    margin:0 0 10px!important;
    padding:16px!important;
    border-radius:18px!important;
  }

  .hero h1{
    font-size:28px!important;
    line-height:1.12!important;
    margin-bottom:10px!important;
  }

  .hero p{
    font-size:14px!important;
    line-height:1.5!important;
    margin-bottom:10px!important;
  }

  .badge,
  .rank-premium-chip,
  .operator-active-chip,
  .premium-status,
  .rank-badge,
  .operator-tag{
    font-size:11px!important;
    padding:7px 10px!important;
    white-space:normal!important;
  }

  .sidebar{
    top:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .menu{
    margin:0 -2px!important;
    padding:0 2px 6px!important;
  }

  .content{
    padding:12px!important;
  }

  .content h2{
    font-size:22px!important;
    margin-bottom:6px!important;
  }

  .content > p,
  .receipt p,
  .card span,
  .admin-card p{
    font-size:13px!important;
  }

  .receipt,
  .card,
  .admin-card,
  .donut-card,
  .ecco-finance-card,
  .agenda-top-today,
  .coletas-toolbar,
  .operator-summary-card{
    margin-top:10px!important;
    padding:14px!important;
    overflow-x:hidden!important;
  }

  .receipt h3,
  .card h3,
  .admin-card h3{
    font-size:17px!important;
    line-height:1.25!important;
  }

  .card strong,
  .ecco-finance-card strong,
  .stat strong{
    font-size:22px!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
  }

  .form-grid,
  .grid{
    gap:10px!important;
    margin-top:10px!important;
  }

  .input-group{
    margin-bottom:10px!important;
  }

  .input-group label{
    font-size:12px!important;
    margin-bottom:5px!important;
  }

  input,
  select,
  textarea{
    width:100%!important;
    max-width:100%!important;
    padding:12px 13px!important;
    font-size:16px!important;
  }

  .btn,
  button.btn,
  a.btn,
  button{
    max-width:100%!important;
    min-height:42px!important;
    padding:11px 14px!important;
    font-size:14px!important;
    white-space:normal!important;
  }

  .small-btn{
    min-height:40px!important;
    padding:10px 12px!important;
  }

  .receipt:has(.table),
  .receipt:has(table),
  .scroll-table,
  .ecco-table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .table,
  table{
    width:max-content!important;
    min-width:620px!important;
    max-width:none!important;
  }

  .table th,
  .table td{
    padding:9px 10px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  .coletas-scroll,
  .agenda-board-scroll,
  .scroll-box,
  .admin-scroll-list{
    max-height:none!important;
    overflow:visible!important;
    padding-right:0!important;
  }

  .agenda-section-grid{
    gap:10px!important;
  }

  .agenda-route-box,
  .advance-helper-box{
    padding:10px!important;
    border-radius:14px!important;
  }

  .agenda-today-item{
    padding:12px!important;
    gap:8px!important;
  }

  .coleta-card-item{
    padding:14px!important;
  }

  .operator-profile-wrap{
    left:12px!important;
    bottom:68px!important;
  }

  .operator-profile-btn{
    width:52px!important;
    height:52px!important;
    padding:5px!important;
  }

  .operator-avatar-circle{
    width:42px!important;
    height:42px!important;
  }

  .operator-profile-menu{
    width:calc(100vw - 24px)!important;
    max-height:62vh!important;
  }

  .eccosync-support-float{
    width:52px!important;
    height:52px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:18px!important;
  }

  .admin-holo-core,
  .admin-donut{
    min-height:220px!important;
    transform:scale(.86);
    transform-origin:center;
  }

  .admin-metric-board,
  .ecco-custos-bars{
    gap:10px!important;
  }

  .donut-card [style*="grid-template-columns"],
  .receipt [style*="grid-template-columns"]{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .receipt [style*="width:260px"],
  .receipt [style*="height:260px"]{
    width:210px!important;
    height:210px!important;
  }
}

@media(max-width:420px){
  main.page,
  .page{
    padding:8px!important;
  }

  .content,
  .receipt,
  .card,
  .admin-card,
  .ecco-finance-card{
    padding:12px!important;
  }

  .hero h1{
    font-size:25px!important;
  }

  .logo img,
  .header .logo img,
  .panel-header img{
    height:52px!important;
  }

  .menu button,
  .premium-link{
    padding:9px 11px!important;
    font-size:12px!important;
  }

  .table,
  table{
    min-width:560px!important;
  }
}

/* Strict phone width: no horizontal dragging on mobile */
@media(max-width:850px){
  body,
  main,
  section,
  header,
  .header,
  .panel-header,
  .page,
  .dashboard,
  .sidebar,
  .content,
  .receipt,
  .card,
  .admin-card,
  .box,
  .app-card,
  #contentArea,
  #conteudoPremium{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  img,
  canvas,
  svg,
  video{
    max-width:100%!important;
    height:auto;
  }

  .menu{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
    gap:8px!important;
    width:100%!important;
  }

  .menu button,
  .premium-link{
    min-width:0!important;
    width:100%!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.2!important;
  }

  .scroll-table,
  .ecco-table-wrap,
  .coletas-scroll,
  .agenda-board-scroll,
  .scroll-box,
  .admin-scroll-list{
    overflow-x:hidden!important;
    width:100%!important;
    max-width:100%!important;
  }

  .table,
  table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .table thead,
  table thead{
    display:none!important;
  }

  .table tbody,
  table tbody{
    display:grid!important;
    gap:10px!important;
    width:100%!important;
  }

  .table tr,
  table tr{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:10px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.58)!important;
    border:1px solid rgba(255,255,255,.60)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.07)!important;
  }

  .table th,
  table th{
    display:none!important;
  }

  .table td,
  table td{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:7px 0!important;
    border:none!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  .table td + td,
  table td + td{
    border-top:1px solid rgba(148,163,184,.18)!important;
  }

  .admin-holo-core,
  .admin-donut,
  .donut-card,
  .admin-future-panel,
  .ranking-modal-grid,
  .operator-summary-grid,
  .agenda-section-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .admin-holo-chip,
  .admin-holo-center,
  .admin-metric-line,
  .ecco-bar-row,
  .agenda-today-item,
  .coleta-card-item,
  .operator-summary-card,
  .filter-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }

  [style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
  }

  [style*="width:260px"],
  [style*="width:280px"],
  [style*="width:300px"],
  [style*="min-width"]{
    width:100%!important;
    min-width:0!important;
  }
}

@media(max-width:460px){
  .menu{
    grid-template-columns:1fr!important;
  }
}

/* Mobile hard lock: fit everything to the phone viewport */
@media(max-width:850px){
  html{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }

  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
  }

  *,
  *::before,
  *::after{
    min-width:0!important;
  }

  .page,
  main.page,
  .dashboard,
  .content,
  .sidebar,
  .header,
  .panel-header,
  .hero,
  .receipt,
  .card,
  .admin-card,
  .app-card,
  .box,
  #contentArea,
  #conteudoPremium{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .page,
  main.page{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .dashboard{
    padding:0!important;
  }

  .content,
  .sidebar{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .hero,
  .receipt,
  .card,
  .admin-card,
  .ecco-finance-card,
  .agenda-top-today,
  .coletas-toolbar{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .header{
    justify-content:center!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }

  .header-actions{
    position:static!important;
  }

  .header .logo,
  .panel-header .logo{
    max-width:100%!important;
  }

  .brand-side,
  .form-side{
    width:100%!important;
    max-width:100%!important;
  }

  .menu{
    grid-template-columns:1fr!important;
  }

  .menu button,
  .premium-link,
  .btn,
  button,
  a.btn{
    width:100%!important;
    max-width:100%!important;
  }

  .form-grid,
  .grid,
  .cards,
  .operator-summary-grid,
  .agenda-section-grid,
  .ecco-finance-grid,
  .admin-insights,
  .admin-users-wrap,
  .admin-future-panel,
  .donut-wrap,
  .ranking-modal-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
  }

  .table,
  table,
  tbody,
  tr,
  td{
    width:100%!important;
    max-width:100%!important;
  }

  [style*="width:"],
  [style*="max-width:"],
  [style*="min-width:"],
  [style*="grid-template-columns"]{
    max-width:100%!important;
    min-width:0!important;
  }

  .operator-profile-wrap{
    top:12px!important;
    left:12px!important;
    right:auto!important;
    bottom:auto!important;
    z-index:999998!important;
  }

  .operator-profile-menu{
    top:calc(100% + 10px)!important;
    bottom:auto!important;
    left:0!important;
    right:auto!important;
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
  }

  .eccosync-support-float{
    right:12px!important;
    bottom:12px!important;
  }
}