/* TATNERA — mobile bottom navigation clarity
   Makes the global app navigation understandable on phones by showing icon + label,
   improving touch targets, spacing and active state. Desktop/tablet stay unchanged. */

@media (max-width:760px){
  .sidebar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    z-index:60!important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
    border-right:0!important;
    border-top:1px solid var(--line)!important;
    background:var(--panel)!important;
    box-shadow:0 -10px 30px rgba(0,0,0,.10)!important;
    display:block!important;
  }

  .brand-wrap,
  .sidebar-bottom{display:none!important}

  .sidebar .nav{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    align-items:stretch!important;
  }

  .sidebar .nav-item{
    appearance:none!important;
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    min-height:56px!important;
    padding:6px 3px 5px!important;
    margin:0!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    color:var(--muted)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    font-size:10px!important;
    line-height:1.05!important;
    font-weight:750!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  .sidebar .nav-item span:first-child{
    width:auto!important;
    min-width:0!important;
    height:21px!important;
    display:grid!important;
    place-items:center!important;
    font-size:19px!important;
    line-height:1!important;
    color:inherit!important;
  }

  .sidebar .nav-item.active{
    background:var(--panel-2)!important;
    color:var(--text)!important;
    box-shadow:none!important;
  }

  .sidebar .nav-item.active::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:2px;
    width:24px;
    height:3px;
    border-radius:999px;
    background:var(--accent);
    transform:translateX(-50%);
  }

  .sidebar .nav-item:hover{background:var(--panel-2)!important;color:var(--text)!important}

  .sidebar .nav-item .badge{
    position:absolute!important;
    top:4px!important;
    right:calc(50% - 22px)!important;
    margin:0!important;
    min-width:16px!important;
    height:16px!important;
    padding:0 4px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    font-size:8px!important;
    line-height:1!important;
  }

  /* Five everyday destinations on mobile. The project page remains available
     through customer/project flows, so it does not need its own bottom-tab slot. */
  .sidebar .nav-item[data-view="dashboard"]{order:1}
  .sidebar .nav-item[data-view="calendar"]{order:2}
  .sidebar .nav-item[data-view="customers"]{order:3}
  .sidebar .nav-item[data-view="requests"]{order:4}
  .sidebar .nav-item[data-view="invoices"]{order:5}
  .sidebar .nav-item[data-view="projects"]{display:none!important}

  /* Main content must clear the taller labelled navigation. */
  .main{padding-bottom:calc(94px + env(safe-area-inset-bottom))!important}
}

@media (max-width:390px){
  .sidebar{padding-inline:4px!important}
  .sidebar .nav{gap:2px!important}
  .sidebar .nav-item{font-size:9px!important;padding-inline:1px!important}
  .sidebar .nav-item span:first-child{font-size:18px!important}
}

/* --------------------------------------------------------------------------
   ALL FORM DIALOGS: vertical scrolling must always work.
   The dialog itself stays inside the viewport and exactly one direct content
   wrapper becomes the vertical scroll container. This covers consent, health,
   payments, aftercare, session start/finish, ink, requests and future forms.
   -------------------------------------------------------------------------- */
html body dialog.dialog{
  box-sizing:border-box!important;
  max-height:calc(100dvh - 20px)!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
}
html body dialog.dialog>form,
html body dialog.dialog>div{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  max-height:calc(100dvh - 20px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}
html body #consentDialog>form,
html body #sessionFinishDialog>form,
html body #sessionStartDialog>div{
  max-height:calc(100dvh - 20px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}
html body #consentDialog .consent-dialog-inner,
html body #sessionStartDialog>div,
html body #sessionFinishDialog>form{
  min-width:0!important;
  max-width:100%!important;
}
html body #consentDialog input,
html body #consentDialog select,
html body #consentDialog textarea,
html body #sessionStartDialog input,
html body #sessionStartDialog select,
html body #sessionStartDialog textarea,
html body #sessionFinishDialog input,
html body #sessionFinishDialog select,
html body #sessionFinishDialog textarea{
  max-width:100%!important;
  min-width:0!important;
}

/* Avoid the signature canvas swallowing vertical scroll gestures outside the canvas. */
html body #consentDialog .consent-section,
html body #consentDialog .consent-checks,
html body #consentDialog .health-grid{
  min-width:0!important;
  max-width:100%!important;
}
html body #signatureCanvas,
html body #guardianSignatureCanvas{touch-action:none!important}

/* --------------------------------------------------------------------------
   TODAY'S APPOINTMENTS: refined session start / finish presentation.
   Session action is a real, visually separated action instead of a loose button
   appended to the appointment row.
   -------------------------------------------------------------------------- */
#todayAppointments .dashboard-appointment{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto auto!important;
  grid-template-areas:
    "time info status action"
    "time info health action"!important;
  gap:5px 12px!important;
  align-items:center!important;
  padding:12px 13px!important;
  margin:0 0 8px!important;
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:var(--panel-2)!important;
  color:var(--text)!important;
  overflow:hidden!important;
}
#todayAppointments .dashboard-appointment:last-child{margin-bottom:0!important}
#todayAppointments .dashboard-appointment>.time{
  grid-area:time!important;
  align-self:center!important;
  font-size:13px!important;
  font-weight:900!important;
  color:var(--text)!important;
}
#todayAppointments .dashboard-appointment>.main-info{
  grid-area:info!important;
  min-width:0!important;
  align-self:center!important;
}
#todayAppointments .dashboard-appointment>.main-info strong{
  display:block!important;
  font-size:13px!important;
  line-height:1.25!important;
  color:var(--text)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#todayAppointments .dashboard-appointment>.main-info>span:not(.dashboard-health-state){
  display:block!important;
  margin-top:3px!important;
  font-size:10px!important;
  color:var(--muted)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#todayAppointments .dashboard-appointment>.status-pill{
  grid-area:status!important;
  justify-self:end!important;
  display:inline-flex!important;
  align-items:center!important;
  min-width:0!important;
  white-space:nowrap!important;
}
#todayAppointments .dashboard-appointment>.dashboard-health-flag{
  grid-area:health!important;
  justify-self:end!important;
  margin:0!important;
  min-width:0!important;
}
#todayAppointments .dashboard-appointment>.dashboard-session-action{
  grid-area:action!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
  min-height:38px!important;
  min-width:132px!important;
  padding:9px 12px!important;
  border-radius:10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
#todayAppointments .dashboard-appointment>.dashboard-session-action[data-start-session]::before{
  content:'▶'!important;
  font-size:9px!important;
}
#todayAppointments .dashboard-appointment>.dashboard-session-action[data-finish-session]::before{
  content:'✓'!important;
  font-size:11px!important;
}
html[data-theme="light"] #todayAppointments .dashboard-appointment{
  background:#f8f9fa!important;
  border-color:#dfe2e6!important;
  color:#1a1d21!important;
}

@media (max-width:760px){
  html body dialog.dialog{
    width:calc(100dvw - 12px)!important;
    max-width:calc(100dvw - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
  }
  html body dialog.dialog>form,
  html body dialog.dialog>div,
  html body #consentDialog>form,
  html body #sessionFinishDialog>form,
  html body #sessionStartDialog>div{
    max-height:calc(100dvh - 12px)!important;
  }

  #todayAppointments .dashboard-appointment{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "time status"
      "info info"
      "health health"
      "action action"!important;
    gap:8px 10px!important;
    padding:12px!important;
    border-radius:13px!important;
  }
  #todayAppointments .dashboard-appointment>.time{
    justify-self:start!important;
    font-size:14px!important;
  }
  #todayAppointments .dashboard-appointment>.status-pill{
    justify-self:end!important;
    display:inline-flex!important;
    font-size:9px!important;
    padding:5px 8px!important;
  }
  #todayAppointments .dashboard-appointment>.main-info{
    padding-top:1px!important;
  }
  #todayAppointments .dashboard-appointment>.main-info strong{
    font-size:14px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #todayAppointments .dashboard-appointment>.main-info>span:not(.dashboard-health-state){
    font-size:11px!important;
    line-height:1.4!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #todayAppointments .dashboard-appointment>.dashboard-health-flag{
    justify-self:start!important;
    width:auto!important;
    margin:0!important;
  }
  #todayAppointments .dashboard-appointment>.dashboard-session-action{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    justify-self:stretch!important;
    margin-top:2px!important;
    border-radius:11px!important;
    font-size:12px!important;
    padding:11px 14px!important;
  }

  /* Session preflight itself must also stay readable on a phone. */
  #sessionStartDialog .session-check{
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:9px!important;
  }
  #sessionStartDialog .session-check>*:last-child:not(:nth-child(2)){
    grid-column:1/-1!important;
    width:100%!important;
  }
  #sessionStartDialog .dialog-actions,
  #sessionFinishDialog .dialog-actions,
  #consentDialog .dialog-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  #sessionStartDialog .dialog-actions .btn,
  #sessionFinishDialog .dialog-actions .btn,
  #consentDialog .dialog-actions .btn{
    width:100%!important;
    min-height:44px!important;
  }
}