/* Responsive fixes for every screen size. Loaded last, so it refines the other stylesheets.
   Sizes: small phone <=380 | phone <=700 | tablet <=860 | laptop and up | short landscape screens | touch screens */

/* ---- all sizes ---- */
html{overflow-x:hidden}
body{min-height:100vh;min-height:100dvh;overflow-x:clip}
img,svg{max-width:100%}
input[type="date"]{min-height:46px;-webkit-appearance:none;appearance:none}   /* iPhone draws dates shorter than other fields */
#breedList,#saleList{max-height:min(240px,40dvh)}

/* notched phones (iPhone / Android cut-outs, landscape): keep content out of the notch */
header nav{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
main{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
footer{padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
.pager{bottom:max(22px,env(safe-area-inset-bottom,0px))}
.toast{bottom:max(28px,env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);text-align:center}

/* long names never push the header wider than the screen */
nav{flex-wrap:nowrap}
.nav-actions,.nav-auth{min-width:0}
.brand{flex:none}
.nav-link,button.nav-link,.nav-cta{white-space:nowrap;flex:none}
button.who{display:block;min-width:0;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- wide screens: header lines up with the page ---- */
@media(min-width:861px){
  header nav{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
  main{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
}

/* ---- tablet and below: the notebook rings were clipped at the left edge between 701px and 860px ---- */
@media(max-width:860px){
  #dashboard,#overview,#newsale{padding-left:max(32px,env(safe-area-inset-left,0px))}
  .modal-card{padding-left:clamp(18px,4vw,32px);padding-right:clamp(18px,4vw,32px)}
  #profileCard{max-width:640px}
}

/* ---- phones ---- */
@media(max-width:700px){
  /* section tabs share the full width instead of squeezing to the right */
  .tabs{justify-content:stretch;padding-left:0;padding-right:12px;gap:3px}
  .tab{flex:1 1 0;min-width:0;padding:10px 6px 9px;font-size:13px;line-height:1.2;text-align:center;white-space:normal}
  .tab.on{padding-top:12px}

  /* 16px or larger stops iPhones zooming in when a field is tapped */
  .dash-tools input,.dash-tools select,.ov-field select,.ov-field input,.search-box input,.ov-breed select{font-size:16px}
  .dash-tools select,.ov-field select{padding-top:9px;padding-bottom:9px}

  .tool-right,.tool-right select{width:100%}
  .filter-group .dash-tools{width:100%}
  .chips{width:100%}
  .view-toggle{width:100%}
  .vt{flex:1;padding:8px 12px}

  .modal-card.narrow{max-width:none}
  .success .actions .btn{width:100%}
  .btn-row .btn{width:100%}
  .pw-head .btn{width:100%}

  /* toast and floating pager must not sit on top of each other */
  body:has(.pager:not([hidden])) .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .pager{max-width:calc(100vw - 20px)}

  .cal-head{justify-content:center}
  .cal-head-r{width:100%;justify-content:space-between}
  .cal-side-head{flex-wrap:wrap}
}

/* ---- small phones (iPhone SE, 320-380px wide) ---- */
@media(max-width:380px){
  header nav{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
  main{padding-left:14px;padding-right:14px}
  #dashboard,#overview,#newsale{padding-left:max(30px,env(safe-area-inset-left,0px));padding-right:10px}
  .brand img{width:78px}
  .nav-actions{gap:6px}
  .nav-auth{gap:6px}
  button.who{max-width:34vw}
  .notebook{padding:18px 14px 22px 44px}
  .form-card{padding:22px 16px}
  h1{font-size:34px}
  .stepper{margin-top:20px}
  .dash-head .summary>div{padding:0 6px}
  .cal-day{height:44px}
  .cal-title{font-size:20px}
  .pg-info{display:none}
  .auth-links{flex-direction:column;align-items:flex-start}
}

/* ---- short landscape screens (phones on their side): don't waste height on a sticky header ---- */
@media(max-height:500px) and (orientation:landscape){
  header{position:static}
  .modal{padding:8px}
  .modal-card{max-height:calc(100dvh - 16px)}
  .notebook{padding-top:18px;padding-bottom:18px}
  footer{padding-top:14px;padding-bottom:14px}
}

/* ---- touch screens: tap targets of at least 44px (works on any size of device) ---- */
@media(pointer:coarse){
  .btn,.nav-cta{min-height:46px}
  .nav-link,button.nav-link{min-height:44px;display:inline-flex;align-items:center}
  button.who{min-height:44px}
  .tab{min-height:44px}
  .chip,.pg,.vt,.cal-today,.ov-clear,.row-btn{min-height:44px}
  .pg{min-width:44px}
  .kebab,.cal-btn,.modal-x{width:44px;height:44px}
  .row-menu-item{min-height:44px}
  .linkbtn{padding:10px 0}
  .opt{padding-top:13px;padding-bottom:13px}
  select,input{min-height:46px}
  .dash-tools select,.ov-field select,.dash-tools input,.ov-field input{min-height:44px}
  /* hover-only colours stick on touch; keep them off */
  .listing:hover{background:transparent}
}

/* ---- Submitted Sale list: columns line up row to row, and the title keeps room on tablets ---- */
@media(min-width:1101px){
  .listing.sale-row{grid-template-columns:minmax(220px,460px) 170px 130px minmax(0,1fr) 180px 40px}
}
@media(min-width:901px) and (max-width:1100px){
  .listing.sale-row{grid-template-columns:minmax(0,1fr) 130px 118px 180px 40px}
}
@media(min-width:701px) and (max-width:900px){
  .listing.sale-row{grid-template-columns:minmax(0,1fr) 112px 118px 40px;gap:2px 16px}
  .sale-row .l-sub,.sale-row>.l-sub:nth-last-child(1){grid-column:1;grid-row:2;text-align:left;font-size:12.5px}
  .sale-row .kebab{grid-column:4;grid-row:1 / span 2}
}