/* ═══════════════════════════════════════════════
   HealthTeky — mobile app layer (all pages)
   Injected last on every page by healthstack.pwa.MobileAppMiddleware.
   Desktop layout is unaffected except for the overflow guard.
   ═══════════════════════════════════════════════ */

:root {
    --app-tabbar-h: 64px;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-brand: linear-gradient(90deg, #00a8ff 0%, #00a8ff 30%, #64dd17 100%);
}

/* Decorations positioned past the edge must never create sideways scrolling.
   clip (not hidden) keeps position: sticky headers working. */
html, body { overflow-x: clip; max-width: 100%; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Profile photos everywhere (navbars, lists, reviews, calls): a true circle filled by the photo — never squashed
   by a fixed width/height, never an oval when only the width is set. Sizes stay whatever each page gives them. */
img.rounded-circle, img.avatar, img.avatar-img, .avatar > img, .user-img > img,
img.comment-profiles, img.call-avatar, img.article-img, img.imground { object-fit: cover; object-position: center 30%; }
img.rounded-circle, img.avatar, img.comment-profiles, img.call-avatar, img.imground { aspect-ratio: 1 / 1; }
body { -webkit-tap-highlight-color: transparent; }

/* ─── Phones & small tablets ─── */
@media (max-width: 767.98px) {
    /* 16px stops iOS Safari from zooming into a field when it is tapped */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
    select, textarea { font-size: 16px !important; }

    img, video, canvas, svg:not([width]) { max-width: 100%; }
    img, video { height: auto; }
    iframe { max-width: 100%; }

    /* Comfortable touch targets */
    .btn, input[type=submit], input[type=button] { min-height: 44px; }
    .btn-sm { min-height: 38px; }

    /* Wide tables scroll inside their own box instead of widening the page */
    .app-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .app-table-scroll > table { min-width: 100%; }

    /* Public site: header clears the status bar when installed on iPhone */
    .header-nav { padding-top: var(--app-safe-top); height: calc(85px + var(--app-safe-top)) !important; }

    /* Public site: long single-line tickers and headings may wrap */
    h1, h2, h3 { overflow-wrap: break-word; }

    /* Chat page removes the container padding but keeps Bootstrap's -15px row margins */
    body.chat-page .container-fluid > .row { margin-left: 0; margin-right: 0; }
    .container, .container-fluid { padding-left: max(15px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); }
}

/* ─── App tab bar (public pages; HMS has its own in base.html) ─── */
.app-tabbar { display: none; }

@media (max-width: 991.98px) {
    .app-tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1040;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        height: calc(var(--app-tabbar-h) + var(--app-safe-bottom));
        padding-bottom: var(--app-safe-bottom);
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid rgba(11, 37, 69, 0.08);
        box-shadow: 0 -6px 24px rgba(11, 37, 69, 0.08);
    }
    .app-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 44px;
        color: #6b8199 !important;
        font-family: 'Poppins', system-ui, sans-serif;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.1;
        text-decoration: none !important;
        -webkit-user-select: none;
        user-select: none;
    }
    .app-tab i { font-size: 20px; transition: transform 0.15s ease; }
    .app-tab:active i { transform: scale(0.88); }
    .app-tab.active { color: #0086d1 !important; }
    .app-tab.active i {
        background: var(--app-brand);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .app-tab.active::before {
        content: '';
        position: absolute;
        top: 0;
        width: 28px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--app-brand);
    }
    /* keep page content clear of the bar */
    body.has-app-tabbar { padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom)); }
    body.has-app-tabbar .scroll-to-top, body.has-app-tabbar #scrollTop { bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 12px) !important; }
}

/* ─── Public site slide-out menu: same look as the HMS sidebar ─── */
/* Icons show in the phone menu (styled below) and in the desktop bar (styled in
   navbar_home.html). They used to be hidden everywhere but the phone menu. */

@media (max-width: 991.98px) {
    html body .main-menu-wrapper {
        width: min(84vw, 300px) !important;
        max-width: 300px !important;
        background: linear-gradient(180deg, #eaf7ff 0%, #ffffff 30%, #ffffff 70%, #f0fbe8 100%) !important;
        border-right: 3px solid transparent;
        border-image: linear-gradient(180deg, #00a8ff 0%, #00a8ff 30%, #64dd17 100%) 1;
        box-shadow: 8px 0 30px rgba(11, 37, 69, 0.18) !important;
        font-family: 'Poppins', system-ui, sans-serif;
        display: flex !important;
        flex-direction: column;
    }

    /* Brand block: solid brand blue, same height as the top bar */
    html body .main-menu-wrapper .menu-header {
        display: flex !important;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        height: calc(85px + var(--app-safe-top)) !important;
        padding: var(--app-safe-top) 16px 0 20px !important;
        background: #00a8ff !important;
        border-bottom: 0 !important;
        position: sticky !important;
        top: 0;
        z-index: 2 !important;
    }
    html body .main-menu-wrapper .menu-logo {
        display: flex; align-items: center; gap: 12px; text-decoration: none !important;
        min-width: 0; margin-right: 12px;
    }
    /* the logo tile (static/brand/logo-tile-128.png) comes from the navbar template */
    html body .main-menu-wrapper .menu-logo > span > img {
        width: 44px !important; height: 44px !important; border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 60, 110, 0.25); filter: none !important;
    }
    html body .main-menu-wrapper .menu-logo h2 {
        margin: 0 !important;
        color: #fff !important;
        font-family: 'Poppins', system-ui, sans-serif !important;
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        line-height: 1.1;
    }
    html body .main-menu-wrapper .menu-close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 12px;
        background: rgba(255, 255, 255, 0.22); color: #fff !important; font-size: 18px;
    }
    html body .main-menu-wrapper .menu-close:active { background: rgba(255, 255, 255, 0.35); }

    /* Menu list */
    html body .main-menu-wrapper .main-nav {
        background: transparent !important;
        padding: 14px 12px calc(16px + var(--app-safe-bottom)) !important;
        margin: 0 !important;
        min-height: 0 !important;
        flex: 1 0 auto;
        gap: 2px;
    }
    html body .main-menu-wrapper .main-nav::before {
        content: 'Menu';
        display: block;
        padding: 4px 12px 8px;
        font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
        color: #6f8aa6;
    }
    html body .main-menu-wrapper .main-nav > li { border: 0 !important; margin: 0 !important; }
    html body .main-menu-wrapper .main-nav > li > a {
        display: flex !important; align-items: center; gap: 12px;
        padding: 12px 14px !important;
        margin: 0 !important;
        border-radius: 12px;
        color: #1d3b5c !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
        transition: background 0.15s ease, color 0.15s ease;
    }
    html body .main-menu-wrapper .main-nav > li > a.nav-spacer { display: none !important; }
    html body .main-menu-wrapper .main-nav .nav-ico {
        display: inline-block; width: 22px; text-align: center; font-size: 1.05rem; color: #00a8ff;
        float: none !important; margin: 0 !important;
    }
    html body .main-menu-wrapper .main-nav > li > a:hover,
    html body .main-menu-wrapper .main-nav > li > a:active { background: #e6f6ff; color: #0086d1 !important; }
    html body .main-menu-wrapper .main-nav > li > a.active {
        background: var(--app-brand) !important;
        color: #fff !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 14px rgba(0, 168, 255, 0.35);
    }
    html body .main-menu-wrapper .main-nav > li > a.active .nav-ico { color: #fff; }

    /* Sign in / sign out: a proper button at the bottom of the menu */
    html body .main-menu-wrapper .main-nav > li.login-link { margin-top: auto !important; padding-top: 14px; display: block !important; }
    html body .main-menu-wrapper .main-nav > li.login-link > a {
        justify-content: center;
        background: linear-gradient(90deg, #0086d1 0%, #0086d1 25%, #3a9d0b 100%) !important;
        color: #fff !important;
        font-weight: 600 !important;
        box-shadow: 0 6px 16px rgba(0, 134, 209, 0.3);
    }
    html body .main-menu-wrapper .main-nav > li.login-link .nav-ico { color: #fff; }

    /* Layer order on phones: page < ticker (980) < tab bar (990) < backdrop (999) < site header
       with its slide-out menu (1000). The menu lives inside the header, so the backdrop must stay below it. */
    html body .sidebar-overlay.opened {
        background: rgba(11, 37, 69, 0.38) !important;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 999 !important;
    }
    body.has-app-tabbar .public-tabbar { z-index: 990; }

    /* Home page ticker sits just above the tab bar instead of on top of it */
    body.has-app-tabbar .bottom-marquee {
        bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom)) !important;
        z-index: 980 !important;
    }
    body.has-app-tabbar:has(.bottom-marquee) { padding-bottom: calc(var(--app-tabbar-h) + 36px + var(--app-safe-bottom)); }
}

/* ─── Install prompt (shown once, phones only, not when already installed) ─── */
.app-install {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 12px);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(11, 37, 69, 0.22);
    font-family: 'Poppins', system-ui, sans-serif;
    color: #0b2545;
    animation: app-slide-up 0.25s ease;
}
.app-install img { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.app-install .app-install-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.app-install .app-install-text strong { display: block; font-size: 14px; }
.app-install button {
    border: 0; border-radius: 12px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 40px;
}
.app-install .app-install-go { padding: 0 16px; color: #fff; background: linear-gradient(90deg, #0086d1 0%, #0086d1 25%, #3a9d0b 100%); }
.app-install .app-install-close { width: 36px; background: #eef4fa; color: #4a6078; }
@keyframes app-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (display-mode: standalone) {
    .app-install { display: none !important; }
    /* feel native: no text selection on chrome, no bounce-highlight on links */
    .app-tabbar, .top-header, .sidebar, .header-nav { -webkit-user-select: none; user-select: none; }
}

/* ─── Public site navbar: icons and desktop layout ───────────────────────────
   Shared by navbar_home.html, doctor-navbar.html and patient_navbar.html. This
   file is injected into every page by MobileAppMiddleware, which is why the rules
   live here rather than being pasted into each of the three templates. */
/* Nav icons: a fixed width keeps every label starting on the same x, whatever
   the glyph. Sized from the link's own font so they scale with it. */
.main-nav li a .nav-ico,
.header-navbar-rht li a .nav-ico {
  display: inline-block;
  width: 1.15em;
  margin-right: 8px;
  font-size: 0.9em;
  line-height: 1;
  text-align: center;
  opacity: 0.92;
}

.main-nav li a:hover .nav-ico { opacity: 1; }

/* Dropdown items. style.css paints these #2d3b48, which reads as black on the white
   panel; the two dashboard navbars each carried their own dodgerblue override and the
   home navbar had none, so the same menu was blue on one page and black on another.
   Hover stays #09dca4 - that rule outranks this one on class count. */
.main-nav > li .submenu li a { color: dodgerblue; }

/* Laptop widths. The labels, a 160px logo and the login button do not fit in 1280px
   at 18px with 30px gutters - the menu ran underneath the login button, and worse
   once signing in adds the dashboard links. Tighten the row here only; 1400px and
   wider keeps the roomier spacing. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .main-nav > li { margin-right: 16px; }
  .main-nav li a { font-size: 16px; }
  .main-nav li a .nav-ico { margin-right: 6px; }
  .logo { margin-right: 24px; width: auto; }
  .header-nav { padding: 0 18px; }
}

/* Whatever the width and however many links the signed-in user has, the menu must
   stay inside its own share of the bar. Without min-width:0 a flex item refuses to
   shrink below its content, which is why the links slid under the login button.
   Once they can shrink, long labels truncate rather than collide - the icon is
   flex:none, so it never shrinks with the text. */
@media (min-width: 992px) {
  /* The bar wrapped instead of shrinking: with flex-wrap:wrap the login button was
     pushed to a second line the 85px bar cannot show, which left the menu free to
     keep its full natural width and spill across the button. */
  .header-nav {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .header-navbar-rht {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .main-menu-wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .main-nav { min-width: 0; }
  .main-nav > li {
    min-width: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
  /* Centre icon against label. The bar gives each link line-height:85px, so an
     inline icon hangs off the text baseline and needed a hand-tuned nudge to look
     right. Centring them as flex siblings instead is exact, and matches how the
     phone menu already lays these links out. */
  .main-nav > li > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* Fill the row so centring is against the bar, not against a line box that
       overhangs it by half a pixel. */
    height: 100%;
    line-height: 1;
    white-space: nowrap;
  }
  /* Stretch the whole chain to the bar's height. Dropping line-height:85px for
     flex centring would otherwise collapse each link to the height of its text,
     shrinking the hover target and the active-state background to a thin strip. */
  .main-menu-wrapper {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    /* A block wrapper gives the list no height to resolve against, so the links
       would sit at the top of the bar. Its only other child is .menu-header,
       which is display:none above 992px. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .main-nav {
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
  .main-nav > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  /* The label, not the link, is what truncates - so the icon keeps its full size. */
  .main-nav > li > a > .nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Covers the submenu chevron as well as .nav-ico: any icon in the link keeps its
     size, so only the label gives way when the bar runs out of room. */
  .main-nav > li > a > i,
  .main-nav li a .nav-ico {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
}

/* The desktop navbar layout (centred, sized to fit) lives in pwa/nav.css, loaded in <head> so it is right from the first paint. */