/* ─── Clinic portal on smaller screens ───────────────────────────
   Everything here is an override of application.css / clinic_portal.css (bundled after both —
   stylesheet_link_tag :app is alphabetical), so the desktop rules stay the single source of truth.

     ≥ 1280px   desktop: sidebar, workspace columns docked side by side (unchanged)
     768–1279   tablet: workspace side panels slide over as overlays (application.css)
     ≤ 767px    phone: no sidebar — a bottom tab bar (clinic_portal/shared/_mobile_tabbar) and,
                in the patient workspace, one panel at a time behind its own bottom bar
                (patients/show) */

:root {
  --tabbar-h: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Phone-only pieces stay out of the way everywhere else */
.portal-tabbar,
.patient-mobile-nav,
.patient-mobile-header { display: none; }

/* The global form rule caps every form at 640px; the patient search should span its list */
.doctor-home__search { max-width: none; }

/* ─── Account sheet (the tab bar's last button) ──────────────── */
.portal-sheet {
  /* the global `* { margin: 0 }` reset already pins it to the top-left; anchor it to the bottom */
  margin: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 85dvh;
  overflow-y: auto;
  padding: 8px 20px calc(20px + var(--safe-bottom));
  border: 0;
  border-radius: 18px 18px 0 0;
  background: #fff;
  color: var(--grey-900);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
}

.portal-sheet[open] { animation: portal-sheet-up .22s ease-out; }

.portal-sheet::backdrop { background: rgba(10, 16, 30, .4); }

@keyframes portal-sheet-up { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .portal-sheet[open] { animation: none; }
}

.portal-sheet__grip {
  width: 36px;
  height: 4px;
  margin: 2px auto 18px;
  border-radius: 2px;
  background: var(--grey-200);
}

.portal-sheet__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--grey-100);
}

.portal-sheet__who strong { font-size: 17px; }

.portal-sheet__who > span:not(.portal-trial) { margin-top: -4px; font-size: 13px; color: var(--grey-500); }

.portal-sheet .portal-impersonation { margin: 16px 0 0; }

.portal-sheet__links { display: flex; flex-direction: column; }

.portal-sheet__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--grey-100);
  color: var(--grey-900);
  font-size: 15px;
  font-weight: 600;
}

.portal-sheet__link:hover { text-decoration: none; background: var(--grey-50); }

.portal-sheet__link.is-active { color: var(--blue-mid); }

.portal-sheet__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
}

.portal-sheet__footer .portal-locale { margin: 0; font-size: 15px; }

.portal-sheet__footer form { margin: 0; }

/* ─── Tablet and below ───────────────────────────────────────── */
@media (max-width: 1279px) {
  /* .left-panel/.side-panel are position: sticky, and sticky always starts its own stacking
     context — so their bodies' z-index: 200 only competed inside their own column, and the
     document column (later in the DOM) painted over the left one. Lift the open column itself. */
  .patient-page.workspace--left-open .left-panel,
  .patient-page.workspace--panel-open .side-panel { z-index: 210; }
}

@media (max-width: 1023px) {
  .portal-main {
    --main-pad-top: 28px;
    --main-pad-x: 24px;
    --main-pad-bottom: 48px;
  }

  .portal-sidebar { width: 220px; }
}

/* ─── Phone ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Shell: the bottom tab bar replaces the sidebar */
  .portal-sidebar,
  .portal-sidebar__toggle { display: none; }

  .portal-main {
    --main-pad-top: 16px;
    --main-pad-x: 16px;
    --main-pad-bottom: 24px;
  }

  .portal-main--with-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 24px); }

  .portal-tabbar,
  .patient-mobile-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding: 0 4px var(--safe-bottom);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--grey-200);
  }

  .portal-tabbar__item,
  .patient-mobile-nav__item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--grey-500);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .portal-tabbar__item:hover,
  .patient-mobile-nav__item:hover { text-decoration: none; color: var(--grey-900); }

  .portal-tabbar__item span,
  .patient-mobile-nav__item span {
    max-width: 100%;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Active destination: Android-style pill behind the icon */
  .portal-tabbar__item svg,
  .patient-mobile-nav__item svg {
    box-sizing: content-box;
    padding: 4px 16px;
    border-radius: 999px;
    transition: background .15s;
  }

  .portal-tabbar__item.is-active,
  .patient-page:not(.workspace--left-open):not(.workspace--panel-open) .patient-mobile-nav__item--document,
  .patient-page.workspace--left-open .patient-mobile-nav__item--history,
  .patient-page.workspace--panel-open .patient-mobile-nav__item--assistant {
    color: var(--blue-mid);
  }

  .portal-tabbar__item.is-active svg,
  .patient-page:not(.workspace--left-open):not(.workspace--panel-open) .patient-mobile-nav__item--document svg,
  .patient-page.workspace--left-open .patient-mobile-nav__item--history svg,
  .patient-page.workspace--panel-open .patient-mobile-nav__item--assistant svg {
    background: var(--blue-light);
  }

  /* Toasts sit above the bar instead of under a thumb */
  .toast {
    left: 16px;
    right: 16px;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
    text-align: center;
  }

  /* iOS zooms into any focused field under 16px */
  .portal-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .portal-body select,
  .portal-body textarea { font-size: 16px; }

  /* Pages */
  .portal-page-header--row { flex-wrap: wrap; align-items: center; gap: 12px; }

  .portal-page-header h1 { overflow-wrap: anywhere; }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .chart-grid,
  .form-row { grid-template-columns: 1fr; }

  .audit-filters { padding: 14px; }

  .audit-filters__field { flex: 1 1 140px; }

  /* Wide tables scroll sideways inside their own card instead of widening the page */
  .portal-main table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .portal-modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  /* Doctor home: the account cluster moves into the tab bar's account sheet */
  .doctor-home__account { display: none; }

  .doctor-home__bar { margin-bottom: 16px; }

  .doctor-home__row { flex-wrap: wrap; gap: 2px 12px; padding: 14px 12px 14px 16px; }

  .doctor-home__actions { margin-right: 4px; }

  .doctor-home__icon-button { width: 40px; height: 40px; }

  .exam-queue { padding: 14px; margin-bottom: 20px; }

  /* New-document picker, diary form, uploads */
  .new-document-picker__grid { grid-template-columns: 1fr; gap: 10px; }

  .diary-form__row { flex-direction: column; gap: 0; }

  .uploads-table__delete { padding: 10px; }

  /* ─── Patient workspace: one column at a time ─────────────── */
  .patient-page {
    display: block;
    height: 100dvh;
  }

  .patient-page .left-panel,
  .patient-page .side-panel {
    position: static;
    height: 0;
    border: 0;
  }

  .left-panel__rail,
  .side-panel__rail,
  .left-panel__collapse,
  .side-panel__collapse { display: none !important; }

  .patient-page__main {
    position: relative;
    height: calc(100dvh - var(--tabbar-h) - var(--safe-bottom));
    gap: 0;
  }

  .patient-page.workspace--left-open .left-panel__body,
  .patient-page.workspace--panel-open .side-panel__body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 250;
    width: auto;
    height: calc(100dvh - var(--tabbar-h) - var(--safe-bottom));
    padding-top: env(safe-area-inset-top, 0px);
    border: 0;
    box-shadow: none;
  }

  .patient-mobile-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
    min-height: 52px;
    padding: env(safe-area-inset-top, 0px) 8px 0 4px;
    background: #fff;
    border-bottom: 1px solid var(--grey-200);
  }

  .patient-mobile-header__back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--grey-700);
  }

  .patient-mobile-header__back:hover { background: var(--grey-100); }

  .patient-mobile-header__name {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    border: 0;
    background: none;
    color: var(--blue-mid);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  /* Center: the document tabs and the sheet under them */
  .detail-tab { height: 44px; }

  .detail-tab--active,
  .detail-tab--active:hover { height: 45px; }

  .detail-tab__close { width: 28px; height: 28px; }

  .detail-panel { padding: 20px 16px; }

  .detail-tabs__frame > .detail-panel { border-left: 0; border-right: 0; border-radius: 0; }

  /* The paper (reports): actions wrap into full-width rows, toolbar scrolls */
  .paper { min-height: 0; }

  .paper__actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .paper__actions > *,
  .paper__actions > form,
  .paper__actions > form > button { flex: 1 1 auto; justify-content: center; }

  /* Thumb-sized: 44px is the smallest comfortable touch target */
  .paper__actions :is(button, a),
  .paper-proposal__actions :is(button, a),
  .panel-new-button { min-height: 44px; }

  .paper-proposal__actions { flex-wrap: wrap; }

  .paper-proposal__content { min-height: 40vh; }

  trix-toolbar .trix-button-group--file-tools { display: none; }

  /* Side panel tabs: bigger hit areas */
  .side-panel__tab { padding: 15px 12px 13px; }
}