/* =====================================================================
   V2.8.6 — MOBILE NAVIGATION & CALENDAR WORKFLOW CLEANUP
   UI/workflow polish over V2.8.5. No Firebase/data/clinical logic changes.
   ===================================================================== */

/* Hide the old V2.8.5 Week CTA; Week now exposes real time slots. */
.v285-week-actionbar{display:none!important}

/* Home: redundant full-calendar footer removed by JS; fallback CSS. */
#main[data-active-view="home"] .appointments-card .premium-home-card-footer,
#main[data-active-view="home"] .today-full-calendar{display:none!important}

/* Task type icon language: line icons only, no emoji. */
.smart-task-card .task-type[data-task-icon]{display:inline-flex!important;align-items:center!important;gap:5px!important}
.smart-task-card .task-type[data-task-icon]::before{
  content:""!important;width:14px!important;height:14px!important;flex:0 0 14px!important;
  background:currentColor!important;mask:var(--v286-task-icon) center/contain no-repeat!important;
  -webkit-mask:var(--v286-task-icon) center/contain no-repeat!important
}
.smart-task-card .task-type[data-task-icon="reminder"]{--v286-task-icon:var(--ico-bell)}
.smart-task-card .task-type[data-task-icon="call"]{--v286-task-icon:var(--ico-phone)}
.smart-task-card .task-type[data-task-icon="shopping"]{--v286-task-icon:var(--ico-cart)}
.smart-task-card .task-type[data-task-icon="personal"]{--v286-task-icon:var(--ico-calendar)}

.v286-back-more{
  appearance:none;border:0;background:transparent;color:var(--os-primary);font:inherit;
  font-size:10px;line-height:14px;font-weight:650;padding:0;margin:0 0 7px;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer
}

@media(max-width:820px){
  /* Calendar: only Day / Week / Month. */
  #main[data-active-view="calendar"] .calendar-mode-tabs{grid-template-columns:repeat(3,1fr)!important}
  #main[data-active-view="calendar"] .calendar-mode-tabs .v286-hide-next-available{display:none!important}
  #main[data-active-view="calendar"] .calendar-day-meta>.v286-hide-next-available{display:none!important}

  /* Mobile Week = selected-day slot timeline, same booking interaction as Day. */
  #main[data-active-view="calendar"].v286-week-slot-mode .calendar-week-grid.v283-mobile-agenda{display:none!important}
  #main[data-active-view="calendar"] .v286-week-timeline{
    display:block!important;width:100%!important;margin:6px 0 0!important;
    border:1px solid var(--os-border)!important;border-radius:8px!important;
    overflow:hidden!important;background:var(--os-surface)!important
  }
  #main[data-active-view="calendar"] .v286-week-timeline .calendar-slot{min-height:54px!important}
  #main[data-active-view="calendar"] .v286-week-timeline .slot-time{min-width:54px!important;padding:10px 7px!important}
  #main[data-active-view="calendar"] .v286-week-timeline .slot-time>span{font-size:11px!important;font-weight:700!important;color:var(--os-text)!important}
  #main[data-active-view="calendar"] .v286-week-timeline .slot-content{padding:5px 7px!important}
  #main[data-active-view="calendar"] .v286-week-timeline .empty-slot{
    min-height:38px!important;width:100%!important;border:0!important;border-radius:5px!important;
    background:transparent!important;color:var(--os-muted)!important;text-align:center!important;
    font-size:9.5px!important;font-weight:500!important;box-shadow:none!important
  }
  #main[data-active-view="calendar"] .v286-week-timeline .empty-slot:hover{background:var(--os-primary-tint)!important;color:var(--os-primary)!important}
  #main[data-active-view="calendar"] .v286-week-timeline .appointment-card{margin:0!important}

  /* Bottom navigation is docked to the viewport, not floating above it. */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}
  #main.container{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
  .clinic-bottom-nav{
    left:8px!important;right:8px!important;bottom:0!important;
    width:auto!important;height:auto!important;min-height:58px!important;
    padding:5px 5px max(5px,env(safe-area-inset-bottom))!important;
    border-left:1px solid var(--os-border)!important;border-right:1px solid var(--os-border)!important;
    border-top:1px solid var(--os-border)!important;border-bottom:0!important;
    border-radius:10px 10px 0 0!important;
    box-shadow:0 -6px 20px rgba(15,23,42,.07)!important;
    background:color-mix(in srgb,var(--os-surface) 98%,transparent)!important
  }
  .clinic-nav-item{height:48px!important;min-height:48px!important;padding:3px 2px!important;border-radius:6px!important;transform:none!important}
  .clinic-nav-item.active{transform:none!important;box-shadow:none!important}
  .clinic-nav-icon{width:19px!important;height:19px!important}
  .clinic-nav-icon svg{width:18px!important;height:18px!important}
  .clinic-nav-label{font-size:8px!important;line-height:10px!important}

  /* More subpages: visible return path. */
  .v286-back-more{margin:0 0 8px!important;padding:5px 2px!important;font-size:10px!important}

  /* More contains only secondary destinations; Patients already has a bottom tab. */
  #main[data-active-view="more"] .more-grid{grid-template-columns:1fr!important}
}

html.dark .clinic-bottom-nav{background:color-mix(in srgb,var(--os-surface) 98%,transparent)!important}