/* Auto Detail Control — camada responsiva mobile-first */
:root{
  --sidebar-compact:78px;
  --touch:48px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

html{font-size:clamp(14px,.22vw + 13px,16px);overflow-x:hidden}
body{overflow-x:hidden}
body.modal-open,body.menu-open{overflow:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.content{width:100%;padding:clamp(18px,2.2vw,34px);max-width:1600px}
.page-head h1{font-size:clamp(1.45rem,1.1rem + 1vw,2rem)}
.page-head p{font-size:clamp(.78rem,.72rem + .18vw,.9rem);line-height:1.55}
.card,.stat-card{min-width:0}
.grid-2{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats{grid-template-columns:repeat(6,minmax(130px,1fr))}
.table-wrap{max-width:100%}
.data-table td,.data-table th{white-space:normal}
.actions{flex-wrap:wrap}
.actions button{min-width:38px;min-height:38px}
.form-grid>*{min-width:0}
.form-grid input,.form-grid select,.form-grid textarea{max-width:100%}
.modal-card{width:min(760px,calc(100vw - 32px))}
.sidebar-backdrop{display:none;position:fixed;inset:0;border:0;background:#0009;z-index:35}
.calendar-integration{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.calendar-integration h2{width:100%;margin-bottom:4px}.integration-status{display:flex;align-items:center;gap:12px}.integration-status>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#20c97822;color:var(--green);font-weight:900}.integration-status strong,.integration-status small{display:block}.integration-status small{color:var(--muted);margin-top:4px}.sync-ok{color:var(--green)}.sync-error{color:var(--danger)}

@media (max-width:1180px) and (min-width:761px){
  .sidebar{width:var(--sidebar-compact);padding-inline:10px;transition:width .22s ease}
  .sidebar .brand{justify-content:center;padding-inline:0}
  .sidebar .brand>div,.sidebar-user>div:nth-child(2),.sidebar-user .avatar{display:none}
  #nav button{width:58px;min-height:48px;padding:10px;justify-content:center;font-size:0}
  #nav button span{width:auto;font-size:20px}
  .sidebar-user{justify-content:center;padding-inline:0}
  .sidebar-user button{width:48px;height:48px}
  .main-shell{margin-left:var(--sidebar-compact);width:calc(100% - var(--sidebar-compact))}
  .icon-btn{display:grid;place-items:center;width:48px;height:48px;cursor:pointer}
  .sidebar.open{width:260px;box-shadow:20px 0 60px #000b}
  .sidebar.open .brand{justify-content:flex-start;padding-inline:8px}
  .sidebar.open .brand>div,.sidebar.open .sidebar-user>div:nth-child(2),.sidebar.open .sidebar-user .avatar{display:block}
  .sidebar.open #nav button{width:100%;justify-content:flex-start;font-size:13px}
  .sidebar.open #nav button span{width:24px;font-size:17px}
  .sidebar.open .sidebar-user{justify-content:flex-start;padding-inline:7px}
  .sidebar.open~.sidebar-backdrop{display:block}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-layout,.dilution-layout{grid-template-columns:1fr}
}

@media (max-width:900px){
  .grid-2,.pricing-layout,.dilution-layout{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-top{flex-wrap:wrap}
  .topbar{padding-inline:18px}
}

@media (max-width:760px){
  body{padding-top:var(--safe-top)}
  button,.btn,a.cta,input,select{min-height:var(--touch)}
  textarea{min-height:110px}
  .sidebar{width:min(86vw,300px);transform:translateX(-105%);padding-top:calc(18px + var(--safe-top));transition:transform .22s ease}
  .sidebar.open{transform:translateX(0);box-shadow:22px 0 70px #000c}
  .sidebar.open~.sidebar-backdrop{display:block}
  #nav button{min-height:48px;font-size:.88rem}
  .sidebar-user button{width:48px;height:48px}
  .main-shell{margin-left:0;width:100%;padding-bottom:calc(72px + var(--safe-bottom))}
  .topbar{height:64px;padding:0 12px;gap:8px}
  .icon-btn{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px}
  .topbar>div:nth-child(2){display:none}
  .top-actions{margin-left:auto;gap:8px}
  .top-actions #currentDate{display:none}
  .notification-button{width:48px;height:48px}
  #quickAdd{min-width:48px;padding-inline:13px}
  .content{padding:18px 12px}
  .page-head{align-items:flex-start;flex-direction:column;margin-bottom:18px}
  .page-head h1{line-height:1.18}
  .head-actions{display:grid;grid-template-columns:1fr;width:100%}
  .head-actions .btn{width:100%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-card{padding:14px}
  .stat-value{font-size:clamp(1.2rem,5vw,1.55rem);overflow-wrap:anywhere}
  .grid-3,.grid-2,.form-grid,.check-grid,.checklist-list,.team-list{grid-template-columns:1fr}
  .span-2,.subscription-grid .span-3{grid-column:auto}
  .card{padding:16px;border-radius:12px}
  .modal{align-items:end;padding:0}
  .modal-card{width:100%;max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;padding:24px 14px calc(18px + var(--safe-bottom))}
  .modal-close{width:48px;height:48px;right:6px;top:4px}
  .modal h2{padding-right:40px;font-size:1.35rem}
  .mobile-nav{display:flex;height:calc(64px + var(--safe-bottom));padding-bottom:var(--safe-bottom)}
  .mobile-nav button{min-width:64px;min-height:60px;flex:1;font-size:20px}
  .mobile-nav small{font-size:.62rem}
  .copy-row,.cost-entry{grid-template-columns:1fr;display:grid}
  .settings-nav,.pricing-tabs{width:100%;scroll-snap-type:x proximity}
  .settings-nav button,.pricing-tabs button{min-height:48px;scroll-snap-align:start}
  .hour-row{grid-template-columns:minmax(120px,1fr) minmax(100px,1fr)}
  .hour-row span{display:none}
  .subscription-hero{align-items:flex-start;flex-direction:column}
  .subscription-grid{grid-template-columns:1fr}
  .dilution-form,.dilution-output{min-height:auto}
  .dilution-output{min-height:280px}
  .result-split{grid-template-columns:1fr}
  .history-row{grid-template-columns:1fr}
  .volume-presets{grid-template-columns:repeat(2,1fr)}
  .pricing-result>strong{font-size:clamp(1.7rem,9vw,2.2rem)}
  .search{width:100%;min-width:0}
  .card-head{align-items:flex-start;gap:12px;flex-wrap:wrap}
  .card-head .head-actions{width:100%}
  .timeline-item{grid-template-columns:52px minmax(0,1fr);align-items:start}
  .timeline-item>.badge,.timeline-item>small:last-child{grid-column:2}
  .notification-item{grid-template-columns:40px minmax(0,1fr)}
  .notification-item>b{grid-column:2}
  .toast{left:12px;right:12px;bottom:calc(76px + var(--safe-bottom));text-align:center}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table{min-width:0;background:transparent}
  .data-table thead{display:none}
  .table-wrap{border:0;overflow:visible}
  .data-table tbody{display:grid;gap:12px}
  .data-table tr{background:linear-gradient(145deg,var(--card),#11161d);border:1px solid var(--line);border-radius:13px;padding:10px 12px;box-shadow:var(--shadow)}
  .data-table td{display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
  .data-table td:last-child{border-bottom:0}
  .data-table td::before{content:attr(data-label);color:#7890a4;text-transform:uppercase;font-size:.62rem;font-weight:800;letter-spacing:.06em}
  .data-table td.actions{display:flex;justify-content:flex-end;padding-top:12px}
  .data-table td.actions::before{margin-right:auto;align-self:center}
  .data-table td.actions button{min-width:48px;min-height:48px}
}

@media (max-width:420px){
  .content{padding-inline:10px}
  .stats{grid-template-columns:1fr 1fr}
  .stat-card{padding:12px}
  .quick-grid{grid-template-columns:1fr 1fr}
  .quick{min-height:76px;padding:12px}
  .top-actions{gap:6px}
  #quickAdd{font-size:0;width:48px}
  #quickAdd::first-letter{font-size:18px}
  .login-card,.install-card{width:100%;padding:22px 16px;border-radius:15px}
  .data-table td{grid-template-columns:1fr;gap:5px}
  .data-table td.actions{justify-content:flex-start}
  .data-table td.actions::before{width:100%}
}

@media (hover:none) and (pointer:coarse){
  button,.btn,a.cta,#nav button,.actions button{min-height:48px}
}

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