/* ==========================================================================
   nubiss_mobile.css: the phone experience (below lg / 992px).
   Ported from nubissFusion's nb.css ("Phone shell", "Appearance control",
   "Mobile sweep"). Loaded LAST from partial/layout/_shell_css.html.

   Tokens: --nv-* exist in DARK only (static/custom/css/nubiss_dark.css), so
   every use carries the light value as its fallback.
   Markup: templates/partial/nav/bottom_nav.html + more_sheet.html.
   Glue:   static/custom/js/nubiss_mobile.js.
   ========================================================================== */

:root { --nv-tabbar-h: 3.75rem; }

/* --- Tab bar ------------------------------------------------------------ */
/* Hidden by default; shown only below lg AND only on app layouts (the bar is
   a later sibling of .layout-wrapper there; auth_layout has no wrapper). */
.nv-bottom-nav { display: none; }

@media (max-width: 991.98px) {
    .layout-wrapper ~ .nv-bottom-nav {
        display: flex; justify-content: space-around; align-items: stretch;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        height: calc(var(--nv-tabbar-h) + env(safe-area-inset-bottom));
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--nv-surface, #ffffff);
        border-top: 1px solid var(--nv-line, #e6ecf3);
        box-shadow: 0 -0.25rem 1rem rgba(19, 52, 139, 0.06);
    }
}

.nv-bottom-nav__item {
    flex: 1 1 0; min-width: 0; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    padding: .35rem .15rem .25rem;
    font-size: .68rem; font-weight: 600; line-height: 1.15;
    color: var(--nv-muted, #5B6B8A); text-decoration: none;
    background: transparent; border: 0;
    -webkit-tap-highlight-color: transparent;
}
.nv-bottom-nav__item:hover { color: var(--nv-accent-text, #13348B); }
.nv-bottom-nav__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 1.85rem; border-radius: 1rem;
    font-size: 1.35rem; line-height: 1;
    transition: background-color .15s ease;
}
.nv-bottom-nav__label {
    display: block; max-width: 100%; padding: 0 .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nv-bottom-nav__item.is-current,
.nv-bottom-nav__item[aria-current="page"] { color: var(--nv-accent-text, #13348B); }
.nv-bottom-nav__item.is-current .nv-bottom-nav__icon,
.nv-bottom-nav__item[aria-current="page"] .nv-bottom-nav__icon { background: var(--nv-accent-tint, #EEF2FC); }
.nv-bottom-nav__item:focus-visible {
    outline: 2px solid var(--nv-accent-text, #13348B); outline-offset: -3px; border-radius: .75rem;
}

/* --- More sheet --------------------------------------------------------- */
.nv-sheet {
    border: 0;
    border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem;
    background: var(--nv-surface, #ffffff); color: var(--nv-ink, #0f172a);
    box-shadow: var(--nv-shadow-lg, 0 -1rem 3rem rgba(11, 18, 48, 0.18));
}
/* Vuexy fixes .offcanvas-bottom at 30vh. The sheet sizes to its content up
   to 90% of the screen; vh first for browsers without dvh. */
.nv-sheet.offcanvas-bottom {
    --bs-offcanvas-height: auto;
    height: auto;
    max-height: 90vh; max-height: 90dvh;
}
.nv-sheet__handle {
    flex: 0 0 auto; width: 2.5rem; height: .3rem; border-radius: 1rem;
    margin: .5rem auto 0; background: var(--nv-line-2, #cdd7e3);
}
.nv-sheet__head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: .25rem .75rem .5rem 1.25rem;
}
.nv-sheet__title { color: var(--nv-ink, #0f172a); font-weight: 700; }
.nv-sheet__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: .25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
}
.nv-sheet__section { margin-top: 1.25rem; }
.nv-sheet__kicker {
    margin-bottom: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--nv-muted, #5B6B8A);
}

.nv-sheet__profile {
    display: flex; align-items: center; gap: .875rem; padding: .875rem;
    border-radius: .875rem; background: var(--nv-surface-2, #f1f4f9); color: var(--nv-ink, #0f172a);
}
.nv-sheet__profile .avatar { flex: 0 0 44px; width: 44px; height: 44px; }
.nv-sheet__profile .avatar img { width: 44px; height: 44px; object-fit: cover; }
.nv-sheet__profile-text { display: flex; flex-direction: column; min-width: 0; }
.nv-sheet__profile-text strong { font-weight: 700; }
.nv-sheet__profile-text small { color: var(--nv-muted, #5B6B8A); }

/* Section tiles */
.nv-sheet__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .625rem; }
.nv-sheet__grid:empty { display: none; }
.nv-sheet__tile {
    display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0;
    padding: .75rem .25rem .625rem; border-radius: .875rem;
    color: var(--nv-ink, #0f172a); text-decoration: none; text-align: center;
}
.nv-sheet__tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: .875rem; font-size: 1.4rem;
    background: var(--nv-accent-tint, #EEF2FC); color: var(--nv-accent-text, #13348B);
}
.nv-sheet__tile-label {
    max-width: 100%; font-size: .72rem; font-weight: 600; line-height: 1.2;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nv-sheet__tile:hover, .nv-sheet__tile.is-current { background: var(--nv-surface-2, #f1f4f9); color: var(--nv-accent-text, #13348B); }
@media (max-width: 359.98px) {
    .nv-sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Rows: clinic switcher, children of a section, settings / full menu */
.nv-sheet__list { display: flex; flex-direction: column; gap: .375rem; }
.nv-sheet__list form { margin: 0; }
.nv-sheet__list a,
.nv-sheet__list button,
.nv-sheet__group > summary,
.nv-sheet__static {
    display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 44px;
    padding: .625rem .875rem; border-radius: .75rem;
    border: 1px solid var(--nv-line, #e6ecf3);
    background: var(--nv-surface, #ffffff); color: var(--nv-ink, #0f172a);
    font-weight: 500; text-align: left; text-decoration: none;
}
.nv-sheet__list [hidden] { display: none; }
.nv-sheet__list a > i,
.nv-sheet__list button > i,
.nv-sheet__group > summary > i,
.nv-sheet__static > i { flex: 0 0 auto; font-size: 1.15rem; color: var(--nv-muted, #5B6B8A); }
.nv-sheet__list .is-current {
    border-color: var(--nv-accent-text, #13348B);
    background: var(--nv-accent-tint, #EEF2FC); color: var(--nv-accent-text, #13348B); font-weight: 600;
}
.nv-sheet__list .is-current > i { color: inherit; }
.nv-sheet__static { border-style: dashed; }

.nv-sheet__group { margin-top: .375rem; }
.nv-sheet__grid + .nv-sheet__group { margin-top: .75rem; }
.nv-sheet__group > summary { cursor: pointer; list-style: none; }
.nv-sheet__group > summary::-webkit-details-marker { display: none; }
.nv-sheet__group[open] > summary { color: var(--nv-accent-text, #13348B); }
.nv-sheet__group[open] > summary .nv-sheet__chev { transform: rotate(180deg); }
.nv-sheet__chev { transition: transform .15s ease; }
.nv-sheet__group > .nv-sheet__list { margin: .375rem 0 .25rem; padding-left: .875rem; }

.nv-sheet__logout { min-height: 48px; }
.nv-sheet a:focus-visible,
.nv-sheet button:focus-visible,
.nv-sheet summary:focus-visible { outline: 2px solid var(--nv-accent-text, #13348B); outline-offset: 2px; }

/* --- Segmented control (Appearance, Language) --------------------------- */
.nv-seg {
    display: inline-flex; gap: .2rem; padding: .2rem; border-radius: .875rem;
    background: var(--nv-surface-2, #f1f4f9);
}
.nv-seg form { display: flex; margin: 0; }
.nv-seg__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 44px; padding: .45rem .75rem; border: 0; border-radius: .7rem;
    background: transparent; color: var(--nv-muted, #5B6B8A);
    font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.nv-seg__btn[aria-pressed="true"] {
    background: var(--nv-surface, #ffffff); color: var(--nv-accent-text, #13348B);
    box-shadow: var(--nv-shadow-card, 0 1px 3px rgba(11, 18, 48, 0.12));
}
.nv-seg--block { display: flex; }
.nv-seg--block .nv-seg__btn { flex: 1 1 0; }
.nv-seg--wrap { display: flex; flex-wrap: wrap; }
.nv-seg--wrap form { flex: 1 1 30%; }
.nv-seg--wrap .nv-seg__btn { flex: 1 1 auto; }

/* --- Below lg: make room for the bar ------------------------------------ */
@media (max-width: 991.98px) {
    /* Vuexy zeroes .content-wrapper padding-bottom with !important unless the
       footer is fixed, hence the matching selector. */
    html:not(.layout-footer-fixed) .layout-wrapper .content-wrapper {
        padding-bottom: calc(var(--nv-tabbar-h) + env(safe-area-inset-bottom) + 1rem) !important;
    }
    /* The AI chat launcher sits above the tab bar. */
    #ai-chat-root {
        bottom: calc(var(--nv-tabbar-h) + env(safe-area-inset-bottom) + .75rem) !important;
    }
    /* The Vuexy drawer ("Full menu") covers the tab bar when open. */
    .layout-menu { z-index: 1100 !important; }
    .layout-overlay { z-index: 1099 !important; }

    /* /nav/ ships its own older bottom bar: never show two. */
    .navv2-bottomnav { display: none !important; }

    /* Top bar: language and the clinic name now live in the More sheet.
       Scoped to pages that really have the tab bar (class stamped by
       nubiss_mobile.js; :has() covers the moment before the script runs). */
    html.nv-has-tabbar .layout-navbar .dropdown-language,
    html.nv-has-tabbar .layout-navbar .nv-clinic-name { display: none !important; }
}
@media (max-width: 991.98px) {
    body:has(> .nv-bottom-nav) .layout-navbar .dropdown-language,
    body:has(> .nv-bottom-nav) .layout-navbar .nv-clinic-name { display: none !important; }
}
@media (min-width: 992px) {
    .nv-bottom-nav, .nv-sheet, .nv-sheet + .offcanvas-backdrop { display: none !important; }
}

/* --- Touch sweep (ported from Fusion) ----------------------------------- */
@media (pointer: coarse) {
    .btn-sm { min-height: 40px; padding-inline: 0.875rem; }
    .btn-icon.btn-sm { min-width: 40px; }
    .list-group-item-action { min-height: 48px; }
    .nav-pills .nav-link, .dropdown-item { min-height: 44px; display: flex; align-items: center; }
    .form-check-input { width: 1.25em; height: 1.25em; }
}
@media (max-width: 575.98px) {
    /* 16px stops iOS Safari zooming the page on focus. */
    .form-control, .form-select, .input-group-text { font-size: 1rem; }
    div.dataTables_wrapper div.dataTables_length { display: none; }
    div.dataTables_wrapper div.dataTables_filter input { min-height: 44px; font-size: 1rem; }
    div.dataTables_wrapper .pagination { --bs-pagination-padding-x: 0.75rem; }
    div.dataTables_wrapper .pagination li:not(.active):not(.previous):not(.next):not(.first):not(.last) { display: none; }
    table.dataTable td .btn-sm { min-height: 40px; display: inline-flex; align-items: center; }
}

/* --- Auth pages: fluid boxes and logos ---------------------------------- */
.nv-auth-box { width: 100%; max-width: 400px; }
.nv-auth-box--mid { max-width: 500px; }
.nv-auth-box--wide { max-width: 700px; }
img.nv-auth-logo { max-width: 100%; height: auto; }

/* --- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nv-bottom-nav__icon, .nv-sheet__chev { transition: none; }
    .nv-sheet.offcanvas { transition: none; }
}

/* ── Top bar on phones: keep what is needed at a glance ──
   Menu, search, AI chat, notifications and the user menu stay. The clinic
   switcher, launcher, theme and language live in the tab bar / More sheet,
   and voice input is a desktop feature. Without this the bar overflowed its
   right edge at 390px and the avatar was unreachable. */
@media (max-width: 991.98px) {
    html.nv-has-tabbar #layout-navbar #navbar-collapse > ul > li:has(#clinicSwitcher),
    html.nv-has-tabbar #layout-navbar #navbar-collapse > ul > li:has(> a[href$="/nav/"]),
    html.nv-has-tabbar #layout-navbar #navbar-collapse > ul > li:has([data-nv-theme-toggle]),
    html.nv-has-tabbar #layout-navbar #navbar-collapse > ul > li:has(#voice-output),
    html.nv-has-tabbar #layout-navbar #voice-status-v,
    html.nv-has-tabbar #layout-navbar .ai-search-toggler { display: none !important; }
    #layout-navbar.navbar-detached { padding: 0 .75rem; }
    #layout-navbar #navbar-collapse > ul.navbar-nav { gap: .125rem; }
}