/*
   Tactyl demo brand layer
   Mock clinic: Aster Health Collective
   Purpose: sales/demo touchscreen sandbox.
*/

:root {
  --navy: #070b3a;
  --navy-dark: #030624;
  --navy-mid: #111a5a;
  --teal: #18b8ff;
  --teal-dark: #2563eb;
  --teal-light: #eef6ff;
  --teal-xlight: #f8fbff;
  --teal-xlt: #f8fbff;
  --newh-teal: #18b8ff;
  --cyan: #18b8ff;
  --blue: #2563eb;
  --violet: #7c3aed;
  --magenta: #e23aa6;
  --orange: #ff9f1c;
  --gold: #ff9f1c;
  --gold-light: #fff4df;
  --gold-lt: #fff4df;
  --bg: #f3f7ff;
  --warm-white: #f3f7ff;
  --off-white: #e8eefb;
  --text: #111827;
  --text-dark: #111827;
  --text-mid: #334155;
  --text-muted: #64748b;
  --cat-protocol: #18b8ff;
  --cat-vaccines: #2563eb;
  --cat-epds: #e23aa6;
  --cat-labs: #3b82f6;
  --cat-us: #7c3aed;
  --cat-antenatal: #ff6b35;
  --cat-admin: #64748b;
  --cat-consent: #ff9f1c;
  --cat-education: #06b6d4;
  --cat-nextsteps: #070b3a;
  --cat-fetal: #e23aa6;
  --ps-mint: #18b8ff;
  --ps-mint-dark: #2563eb;
  --ps-mint-light: #eef6ff;
  --lumina-gradient: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta), var(--orange));
  --lumina-gradient-soft: linear-gradient(135deg, rgba(24, 184, 255, .14), rgba(124, 58, 237, .11), rgba(226, 58, 166, .10), rgba(255, 159, 28, .12));
  --visit-state-h: 46px;
}

body {
  background-color: var(--teal-light) !important;
}

html,
body {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
}

body {
  min-width: 0;
}

main,
.app-main,
.agenda-panel,
.page-shell,
.scroll-area,
.cast-main,
.specialty-main {
  background-color: var(--teal-light) !important;
}

.logo-circle,
.brand-mark,
.app-logo,
.practice-logo {
  background: #fff !important;
}

.logo-circle {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-color: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 8px 28px rgba(7, 11, 58, .34), 0 0 0 4px rgba(24, 184, 255, .24), 0 0 34px rgba(226, 58, 166, .20) !important;
}

.logo-circle img,
.top-bar-logo > img,
.logo-ring img,
.ss-logo-wrap img,
#idleOverlay .idle-logo {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 50% !important;
}

.logo-circle text {
  font-family: var(--font, var(--font-body, system-ui)) !important;
}

.teal-stripe,
.accent-stripe {
  background: var(--lumina-gradient) !important;
}

.top-bar,
.app-header,
.bottom-nav,
.announcement-bar {
  background: var(--navy) !important;
}

.app-header > .top-bar {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 0 3rem !important;
  background: transparent !important;
}

.app-header > .top-bar .top-bar-date {
  margin-right: auto !important;
}

.app-header > .top-bar .top-bar-weather {
  margin-left: auto !important;
  min-width: 260px !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

.app-header > .top-bar .top-bar-weather span {
  white-space: nowrap !important;
}

.tile-icon,
.nav-item.active,
.primary-action,
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
}

.tile:focus,
.tile:hover,
.resource-card:hover,
.provider-card:hover {
  border-color: rgba(24, 184, 255, .45) !important;
}

.bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 5000 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  height: var(--bottom-nav-h) !important;
  min-height: var(--bottom-nav-h) !important;
  background: var(--navy) !important;
  border-top: 0 !important;
  box-shadow: 0 -3px 20px rgba(0, 0, 0, .22) !important;
  font-family: var(--font, var(--font-body, system-ui, sans-serif)) !important;
}

.bottom-nav::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--lumina-gradient) !important;
}

.bottom-nav .bnav-btn {
  appearance: none !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .08) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .74) !important;
  text-decoration: none !important;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100% !important;
  min-width: 0 !important;
  max-width: 150px !important;
  border-radius: 0 !important;
  gap: .1rem !important;
  padding: 0 1.9rem !important;
  font: 800 .68rem/1.15 var(--font, var(--font-body, system-ui, sans-serif)) !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  cursor: pointer !important;
  white-space: normal !important;
  touch-action: manipulation !important;
  position: relative !important;
}

.bottom-nav .bnav-btn[hidden] {
  display: flex !important;
}

.bottom-nav .bnav-btn i {
  font-size: 1.2rem !important;
  line-height: 1 !important;
  margin-bottom: .1rem !important;
}

.bottom-nav .bnav-btn:hover,
.bottom-nav .bnav-btn:focus-visible {
  color: rgba(255, 255, 255, .85) !important;
  background: rgba(255, 255, 255, .07) !important;
}

.bottom-nav .bnav-btn.active {
  color: var(--cyan) !important;
  background: transparent !important;
}

.bottom-nav .bnav-btn.active i {
  color: var(--cyan) !important;
}

.bottom-nav .bnav-btn.active::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 3px !important;
  background: var(--lumina-gradient) !important;
  border-radius: 0 0 3px 3px !important;
}

.bottom-nav .home-btn {
  max-width: 160px !important;
  color: #fff !important;
  flex: 1.4 1 0 !important;
}

.bottom-nav .home-btn .home-btn-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  min-width: 72px !important;
  padding: .38rem .95rem .34rem !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 22px rgba(24, 184, 255, .30), 0 0 18px rgba(226, 58, 166, .20) !important;
}

.bottom-nav .home-btn:hover .home-btn-inner,
.bottom-nav .home-btn:focus-visible .home-btn-inner {
  background: linear-gradient(135deg, var(--blue), var(--magenta)) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .30), 0 0 20px rgba(226, 58, 166, .24) !important;
  transform: translateY(-1px) !important;
}

.bottom-nav .home-btn i {
  font-size: 1.3rem !important;
  margin-bottom: 0 !important;
}

.bottom-nav .home-btn span {
  font-size: .72rem !important;
  line-height: 1.1 !important;
}

@media (min-width: 1200px) {
  .bottom-nav .bnav-btn {
    font-size: .75rem !important;
  }

  .bottom-nav .bnav-btn i {
    font-size: 1.5rem !important;
  }
}

@media (min-width: 1600px) {
  :root {
    --bottom-nav-h: 86px;
    --visit-state-h: 52px;
  }
}

body.visit-state-active .scribe-main,
body.visit-state-active .cast-main,
body.visit-state-active .specialty-main,
body.visit-state-active .provider-main,
body.visit-state-active .rooming-main,
body.visit-state-active .handoff-main,
body.visit-state-active .documents-main,
body.visit-state-active .anatomy-main,
body.visit-state-active .app-main {
  top: calc(var(--header-h) + var(--visit-state-h)) !important;
}

body.visit-state-active .page-shell {
  height: calc(100vh - var(--bottom-nav-h) - var(--top-bar-h) - var(--teal-stripe-h) - var(--visit-state-h)) !important;
  max-height: calc(100vh - var(--bottom-nav-h) - var(--top-bar-h) - var(--teal-stripe-h) - var(--visit-state-h)) !important;
  margin-top: var(--visit-state-h) !important;
}

body.visit-state-active .shell {
  height: calc(100vh - var(--bottom-nav-h) - var(--hdr-h, var(--header-h)) - var(--teal-stripe-h) - var(--visit-state-h)) !important;
  max-height: calc(100vh - var(--bottom-nav-h) - var(--hdr-h, var(--header-h)) - var(--teal-stripe-h) - var(--visit-state-h)) !important;
  margin-top: var(--visit-state-h) !important;
}

body.visit-state-active .documents-main {
  height: calc(100vh - var(--header-h) - var(--bottom-nav-h, 0px) - var(--visit-state-h)) !important;
  margin-top: var(--visit-state-h) !important;
}

body.visit-state-active > main:not(.scribe-main):not(.cast-main):not(.specialty-main):not(.provider-main):not(.rooming-main):not(.handoff-main):not(.documents-main):not(.anatomy-main):not(.app-main) {
  margin-top: var(--visit-state-h) !important;
}

.specialty-grid-demo {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-width: 1500px !important;
}

.specialty-grid-demo .tile {
  min-height: 190px;
}

@media (max-width: 1200px) {
  .specialty-grid-demo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.bnav-page-row {
  height: var(--bnav-page-h) !important;
  min-height: var(--bnav-page-h) !important;
}

.bnav-page-row .bnav-page-btn {
  min-height: 100% !important;
  max-width: 150px !important;
  gap: .2rem !important;
}

.bnav-page-row .bnav-page-btn i {
  font-size: 1.02rem !important;
  line-height: 1 !important;
}

.bnav-page-row .home-btn .home-btn-inner {
  min-width: 68px !important;
  padding: .32rem .9rem !important;
  border-radius: 10px !important;
}

.utility-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9000 !important;
}

.utility-nav .bnav-btn[aria-disabled="true"] {
  opacity: .54 !important;
  cursor: default !important;
}

.sixteen-nine-safe {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  margin: auto;
}

@media (min-width: 1500px) and (max-height: 950px) {
  .tile {
    min-height: 168px !important;
    padding-top: 1.15rem !important;
    padding-bottom: 1rem !important;
  }

  .tile-icon-circle {
    width: 74px !important;
    height: 74px !important;
  }

  .page-title {
    font-size: 1.65rem !important;
  }

  .cast-panel,
  .scribe-panel,
  .specialty-side,
  .admin-side {
    padding: 1rem !important;
    gap: .72rem !important;
    overflow: hidden !important;
  }

  .cast-copy,
  .scribe-copy,
  .specialty-summary,
  .admin-copy,
  .cast-note,
  .scribe-note {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .cast-btn,
  .scribe-btn,
  .admin-btn {
    min-height: 44px !important;
    font-size: .72rem !important;
  }

  .join-card,
  .scribe-card,
  .admin-card,
  .specialty-card,
  .visit-detail-panel {
    padding: .78rem !important;
  }

  .join-steps,
  .scribe-list,
  .specialty-card ul {
    gap: .34rem !important;
  }

  .join-qr {
    grid-template-columns: 84px 1fr !important;
  }

  .join-qr img {
    width: 84px !important;
    height: 84px !important;
  }

  .specialty-content,
  .scribe-workspace,
  .admin-content {
    padding: 1rem !important;
    gap: .75rem !important;
    overflow: hidden !important;
  }

  .specialty-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .specialty-card {
    min-height: 136px !important;
  }

  .visit-step {
    min-height: 112px !important;
    padding: .68rem !important;
  }
}