/* =====================================================================
   V2.8.7 — HORIZONTAL TOP NAVIGATION
   Navigation / shell presentation only.
   Replaces the desktop left icon rail with a readable top navigation bar.
   Mobile bottom navigation, clinical workflows and data logic are untouched.
   ===================================================================== */

:root{
  --v287-topbar-height:70px;
  --v287-icon-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='5' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='19' cy='12' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
  --v287-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  --v287-icon-stethoscope:var(--ico-stethoscope);
}

/* Desktop + tablet: horizontal navigation is the single global nav. */
@media(min-width:821px){
  #shell{min-height:100vh!important;background:var(--os-bg)!important}

  .clinic-header{
    position:sticky!important;
    inset:auto!important;
    top:0!important;
    z-index:220!important;
    width:100%!important;
    min-width:0!important;
    min-height:var(--v287-topbar-height)!important;
    height:var(--v287-topbar-height)!important;
    padding:0 18px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:14px!important;
    border:0!important;
    border-bottom:1px solid var(--os-border)!important;
    background:color-mix(in srgb,var(--os-surface) 96%,transparent)!important;
    box-shadow:0 1px 0 rgba(15,23,42,.02)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }

  .clinic-brand.site-brand-lockup{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:184px!important;
    max-width:214px!important;
    height:50px!important;
    margin:0!important;
    padding:0 4px 0 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .clinic-brand.site-brand-lockup:hover{background:var(--os-elevated)!important}
  .clinic-brand .site-brand-shield{
    width:34px!important;
    height:40px!important;
    flex:0 0 34px!important;
  }
  .clinic-brand .site-brand-copy{
    display:flex!important;
    min-width:0!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .clinic-brand .site-brand-name{
    max-width:160px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:var(--os-text)!important;
    font-size:13px!important;
    line-height:17px!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;
  }
  .clinic-brand .site-brand-sub{
    max-width:170px!important;
    margin:1px 0 0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:var(--os-muted)!important;
    font-size:7px!important;
    line-height:10px!important;
    letter-spacing:.015em!important;
  }

  .clinic-desktop-nav.clinic-top-nav{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:3px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:visible!important;
  }

  .clinic-top-nav>button,
  .clinic-top-nav>.clinic-more-wrap>.clinic-more-trigger{
    position:relative!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    padding:0 10px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border:1px solid transparent!important;
    border-radius:8px!important;
    background:transparent!important;
    color:var(--os-secondary)!important;
    box-shadow:none!important;
    overflow:visible!important;
    font-size:12.5px!important;
    line-height:1!important;
    font-weight:650!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    transition:background .14s ease,border-color .14s ease,color .14s ease!important;
  }

  .clinic-top-nav>button::before,
  .clinic-top-nav>.clinic-more-wrap>.clinic-more-trigger::before{
    content:""!important;
    flex:0 0 18px!important;
    width:18px!important;
    height:18px!important;
    background:currentColor!important;
    mask:var(--v283-nav-icon) center/contain no-repeat!important;
    -webkit-mask:var(--v283-nav-icon) center/contain no-repeat!important;
    filter:none!important;
    font-size:0!important;
  }
  .clinic-top-nav>button[data-view="home"]{--v283-nav-icon:var(--v283-icon-home)}
  .clinic-top-nav>button[data-view="patients"]{--v283-nav-icon:var(--v283-icon-patients)}
  .clinic-top-nav>button[data-view="calendar"]{--v283-nav-icon:var(--v283-icon-calendar)}
  .clinic-top-nav>button[data-view="callbacks"]{--v283-nav-icon:var(--v283-icon-inbox)}
  .clinic-top-nav>.clinic-nav-action{--v283-nav-icon:var(--v287-icon-stethoscope)}
  .clinic-top-nav>.clinic-more-wrap>.clinic-more-trigger{--v283-nav-icon:var(--v287-icon-more)}

  .clinic-top-nav>button:hover,
  .clinic-top-nav>.clinic-more-wrap>.clinic-more-trigger:hover{
    background:var(--os-elevated)!important;
    border-color:var(--os-border)!important;
    color:var(--os-text)!important;
  }

  .clinic-top-nav>button.active{
    background:var(--os-primary-tint)!important;
    border-color:color-mix(in srgb,var(--os-primary) 18%,var(--os-border))!important;
    color:var(--os-primary)!important;
    box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--os-primary) 76%,transparent)!important;
  }
  .clinic-top-nav>button.active::before{color:currentColor!important}

  .clinic-top-nav>.clinic-nav-action{
    margin-left:2px!important;
    background:color-mix(in srgb,var(--os-primary-tint) 78%,var(--os-surface))!important;
    border-color:color-mix(in srgb,var(--os-primary) 24%,var(--os-border))!important;
    color:var(--os-primary)!important;
    font-weight:700!important;
  }
  .clinic-top-nav>.clinic-nav-action:hover{
    background:var(--os-primary-tint)!important;
    border-color:color-mix(in srgb,var(--os-primary) 38%,var(--os-border))!important;
    color:var(--os-primary)!important;
  }

  .clinic-more-wrap{
    position:relative!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
  }
  .clinic-more-trigger.is-active{
    background:var(--os-primary-tint)!important;
    border-color:color-mix(in srgb,var(--os-primary) 18%,var(--os-border))!important;
    color:var(--os-primary)!important;
    box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--os-primary) 76%,transparent)!important;
  }
  .clinic-more-menu{
    position:absolute!important;
    z-index:400!important;
    top:calc(100% + 8px)!important;
    right:0!important;
    width:222px!important;
    padding:6px!important;
    display:grid!important;
    gap:3px!important;
    border:1px solid var(--os-border)!important;
    border-radius:10px!important;
    background:var(--os-surface)!important;
    box-shadow:0 16px 38px rgba(15,23,42,.14)!important;
  }
  .clinic-more-menu[hidden]{display:none!important}
  .clinic-more-menu button{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:40px!important;
    margin:0!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    border:1px solid transparent!important;
    border-radius:7px!important;
    background:transparent!important;
    color:var(--os-secondary)!important;
    box-shadow:none!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:650!important;
    text-align:left!important;
    cursor:pointer!important;
  }
  .clinic-more-menu button::before{
    content:""!important;
    width:17px!important;
    height:17px!important;
    flex:0 0 17px!important;
    background:currentColor!important;
    mask:var(--v283-nav-icon) center/contain no-repeat!important;
    -webkit-mask:var(--v283-nav-icon) center/contain no-repeat!important;
    font-size:0!important;
  }
  .clinic-more-menu button[data-view="tasks"]{--v283-nav-icon:var(--v283-icon-tasks)}
  .clinic-more-menu button[data-view="clinic"]{--v283-nav-icon:var(--v283-icon-chart)}
  .clinic-more-menu button[data-view="settings"]{--v283-nav-icon:var(--v283-icon-settings)}
  .clinic-more-menu button:hover,
  .clinic-more-menu button.active{
    background:var(--os-elevated)!important;
    border-color:var(--os-border)!important;
    color:var(--os-text)!important;
  }

  .clinic-header-utility{
    flex:0 0 auto!important;
    min-width:0!important;
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  .clinic-global-search{
    position:relative!important;
    width:clamp(190px,18vw,260px)!important;
    height:40px!important;
    display:flex!important;
    align-items:center!important;
    border:1px solid var(--os-border)!important;
    border-radius:8px!important;
    background:var(--os-surface)!important;
    color:var(--os-secondary)!important;
    box-shadow:none!important;
  }
  .clinic-global-search:focus-within{
    border-color:color-mix(in srgb,var(--os-primary) 42%,var(--os-border))!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--os-primary) 11%,transparent)!important;
  }
  .clinic-global-search-icon{
    width:16px!important;height:16px!important;flex:0 0 16px!important;margin-left:10px!important;
    background:var(--os-muted)!important;
    mask:var(--v287-icon-search) center/contain no-repeat!important;
    -webkit-mask:var(--v287-icon-search) center/contain no-repeat!important;
  }
  .clinic-global-search input{
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    padding:0 7px!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:var(--os-text)!important;
    box-shadow:none!important;
    font-size:12px!important;
  }
  .clinic-global-search input::placeholder{color:var(--os-muted)!important}
  .clinic-global-search kbd{
    flex:0 0 auto!important;
    margin-right:7px!important;
    padding:3px 5px!important;
    border:1px solid var(--os-border)!important;
    border-radius:5px!important;
    background:var(--os-elevated)!important;
    color:var(--os-muted)!important;
    font:600 9px/1 "Noto Sans",sans-serif!important;
    white-space:nowrap!important;
  }
  .clinic-global-search-results{
    position:absolute!important;
    z-index:420!important;
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    max-height:min(430px,62vh)!important;
    overflow:auto!important;
    padding:6px!important;
    border:1px solid var(--os-border)!important;
    border-radius:10px!important;
    background:var(--os-surface)!important;
    box-shadow:0 18px 42px rgba(15,23,42,.16)!important;
  }
  .clinic-global-search-results[hidden]{display:none!important}
  .clinic-global-search-result{
    width:100%!important;
    min-height:48px!important;
    padding:7px 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    border:1px solid transparent!important;
    border-radius:7px!important;
    background:transparent!important;
    color:var(--os-text)!important;
    text-align:left!important;
    cursor:pointer!important;
  }
  .clinic-global-search-result:hover,
  .clinic-global-search-result.is-keyboard-active{
    background:var(--os-elevated)!important;
    border-color:var(--os-border)!important;
  }
  .clinic-global-search-result span{min-width:0!important;display:block!important}
  .clinic-global-search-result strong{
    display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    font-size:11.5px!important;line-height:16px!important;color:var(--os-text)!important
  }
  .clinic-global-search-result small{
    display:block!important;margin-top:2px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    font-size:9.5px!important;line-height:13px!important;color:var(--os-muted)!important
  }
  .clinic-global-search-result b{flex:0 0 auto!important;color:var(--os-primary)!important;font-size:13px!important}
  .clinic-global-search-empty{padding:12px 10px!important;color:var(--os-muted)!important;font-size:10.5px!important;text-align:center!important}

  .clinic-header-actions{
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:5px!important;
    border:0!important;
  }
  .clinic-user-name{display:none!important}
  #uiThemeToggle,.clinic-logout{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid var(--os-border)!important;
    border-radius:8px!important;
    background:var(--os-surface)!important;
    color:var(--os-secondary)!important;
    box-shadow:none!important;
  }
  #uiThemeToggle:hover,.clinic-logout:hover{background:var(--os-elevated)!important;color:var(--os-text)!important}
  .clinic-logout span{display:none!important}
  .clinic-logout svg{width:18px!important;height:18px!important;stroke:currentColor!important;fill:none!important}

  #main.container{
    width:100%!important;
    max-width:none!important;
    min-height:calc(100vh - var(--v287-topbar-height))!important;
    margin:0!important;
    padding:24px clamp(18px,2.2vw,32px) 48px!important;
    background:var(--os-bg)!important;
  }
  .clinic-bottom-nav{display:none!important}

  /* During an active clinical visit the bar stays available but visually quieter. */
  body.clinic-active-visit .clinic-global-search{display:none!important}
  body.clinic-active-visit .clinic-brand.site-brand-lockup{min-width:44px!important;width:44px!important;max-width:44px!important}
  body.clinic-active-visit .clinic-brand .site-brand-copy{display:none!important}
}

/* Wide desktop: show full brand and the global patient lookup. */
@media(min-width:1240px){
  .clinic-global-search{display:flex!important}
}

/* Medium desktop / tablet: preserve labels, sacrifice nonessential chrome first. */
@media(min-width:821px) and (max-width:1239px){
  .clinic-global-search{display:none!important}
  .clinic-brand.site-brand-lockup{min-width:148px!important;max-width:170px!important}
  .clinic-brand .site-brand-sub{display:none!important}
  .clinic-top-nav>button,
  .clinic-top-nav>.clinic-more-wrap>.clinic-more-trigger{padding-left:8px!important;padding-right:8px!important;font-size:11.5px!important;gap:6px!important}
}

@media(min-width:821px) and (max-width:980px){
  .clinic-brand.site-brand-lockup{min-width:42px!important;width:42px!important;max-width:42px!important}
  .clinic-brand .site-brand-copy{display:none!important}
  .clinic-header{gap:8px!important;padding-left:10px!important;padding-right:10px!important}
  .clinic-top-nav>button,
  .clinic-top-nav>.clinic-more-wrap>.clinic-more-trigger{padding-left:7px!important;padding-right:7px!important;font-size:11px!important}
  .clinic-top-nav>button::before,
  .clinic-top-nav>.clinic-more-wrap>.clinic-more-trigger::before{width:16px!important;height:16px!important;flex-basis:16px!important}
}

/* Mobile remains the V2.8.6 bottom-navigation product. */
@media(max-width:820px){
  .clinic-global-search,.clinic-more-wrap{display:none!important}
  .clinic-header-utility{margin-left:auto!important;display:flex!important;align-items:center!important}
  .clinic-header-utility .clinic-header-actions{margin-left:0!important}
}