/* ==========================================================================
   Alternative Health MD — phone & installed-app layer
   Loaded after app.css. Everything here is either scoped to small screens,
   touch input, iOS, or the installed (standalone) app, so the desktop layout
   is unchanged.
   ========================================================================== */

:root {
  --tabbar-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Parts that only exist on phones. */
.tabbar, .cal__tap, .thread__back { display: none; }

/* Touch feedback that matches the brand instead of the default grey flash. */
a, button, [role="button"], label, summary { -webkit-tap-highlight-color: rgba(201, 168, 108, .18); }

/* Scroll areas keep their momentum to themselves (no rubber-banding the shell
   or triggering pull-to-refresh halfway through a list). */
.page, .inbox__scroll, .thread__scroll, .sidebar__scroll, .copilot__scroll, .modal__body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------ iOS form zoom
   Safari zooms the whole page when a field under 16px gets focus, and doesn't
   zoom back. 16px on iPhone/iPad only; other devices keep the design sizes. */
@supports (-webkit-touch-callout: none) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
  select, textarea { font-size: 16px !important; }
}

/* ------------------------------------------------------ touch devices */
@media (hover: none) {
  /* Hover lifts stick after a tap on a touchscreen. */
  .btn:hover, .btn--primary:hover { transform: none; }
  table.data tbody tr:hover td:first-child::before { display: none; }
}
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn--sm { min-height: 36px; }
  .btn--icon { min-width: 40px; }
  .btn--icon.btn--sm { min-width: 36px; }
  .composer-icon { width: 38px; height: 38px; }
  .lead-card__actions .btn { width: 38px; height: 38px; }
  .menu__item { min-height: 42px; }
  .segmented a, .segmented button { padding-top: 9px; padding-bottom: 9px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .copilot__head-btn { min-width: 40px; min-height: 40px; }
}

/* ------------------------------------------------------ installed app */
html.is-standalone .topbar__search kbd { display: none; }

/* ==========================================================================
   Phones and small tablets
   ========================================================================== */
@media (max-width: 760px) {
  /* ---- shell: leave room for the tab bar and the phone's home indicator ---- */
  .main { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
  .topbar {
    padding-left: max(var(--sp-4), var(--safe-left));
    padding-right: max(var(--sp-4), var(--safe-right));
  }
  .page {
    padding-left: max(var(--sp-4), var(--safe-left));
    padding-right: max(var(--sp-4), var(--safe-right));
    /* the Copilot button floats bottom-right: let content scroll clear of it */
    padding-bottom: 84px;
  }
  .page.page--flush { padding: 0; }
  .sidebar {
    width: min(300px, 86vw); flex-basis: auto;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    z-index: 70;
  }
  body.nav-open .scrim { z-index: 69; }
  body.nav-open { overflow: hidden; }

  /* ---- bottom tab bar ---- */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    background: var(--navy);
    border-top: 1px solid rgba(201, 168, 108, .35);
    box-shadow: none;
  }
  .tabbar__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-width: 0; padding: 6px 2px 4px;
    border: 0; background: transparent; cursor: pointer;
    color: rgba(247, 244, 239, .66); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    text-decoration: none;
  }
  .tabbar__item svg { width: 22px; height: 22px; stroke-width: 1.9; }
  .tabbar__item span:not(.tabbar__count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item.is-active { color: var(--ivory); }
  .tabbar__item.is-active svg { color: var(--gold); }
  .tabbar__item.is-active::before {
    content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px;
    border-radius: 0; background: var(--gold);
  }
  .tabbar__item:active { background: rgba(247, 244, 239, .06); }
  .tabbar__count {
    position: absolute; top: 5px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1;
    color: var(--navy); background: var(--gold);
    box-shadow: 0 0 0 2px var(--navy);
  }
  .tabbar__count--quiet { background: rgba(247, 244, 239, .22); color: var(--ivory); }
  html[data-theme="dark"] .tabbar { background: var(--rail); }
  html[data-theme="dark"] .tabbar__count { box-shadow: 0 0 0 2px var(--rail); }

  /* Hide the tab bar while typing (keyboard open) and inside a text thread. */
  body.kb-open .tabbar,
  body.is-thread-view .tabbar { display: none; }
  body.kb-open .main,
  body.is-thread-view .main { padding-bottom: var(--safe-bottom); }

  /* ---- floating pieces sit above the tab bar ---- */
  .copilot { right: max(var(--sp-4), var(--safe-right)); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); }
  .copilot__launcher { width: 50px; height: 50px; }
  body.nav-open .copilot,
  body.kb-open .copilot:not(.is-open),
  body.is-thread-view .copilot:not(.is-open) { display: none; }
  .toasts {
    left: max(var(--sp-3), var(--safe-left)); right: max(var(--sp-3), var(--safe-right));
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); align-items: stretch;
  }
  .toast { min-width: 0; max-width: none; }
  body.is-thread-view .toasts { top: calc(var(--safe-top) + 12px); bottom: auto; }

  /* ---- install banner ---- */
  .pwa-banner {
    position: fixed; z-index: 56;
    left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right));
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 10px);
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px 10px 12px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);
    animation: toast-in 260ms var(--ease);
  }
  .pwa-banner__icon { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px; }
  .pwa-banner__text { min-width: 0; flex: 1 1 auto; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
  .pwa-banner__text strong { display: block; color: var(--ink); font-size: 13.5px; }
  .pwa-banner__close { flex: 0 0 auto; }
  body.has-pwa-banner .copilot { display: none; }
  body.is-thread-view .pwa-banner { display: none !important; }

  /* ---- page headers ---- */
  .page-head { gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .page-head__actions { width: 100%; }
  .dashboard-toolbar { flex-wrap: wrap; gap: 8px; }
  .dashboard-toolbar__status { flex: 1 1 100%; order: 2; }
  .dashboard-toolbar__controls { flex: 1 1 100%; justify-content: space-between; }

  /* ---- modals & dialogs as bottom-anchored sheets ---- */
  .overlay { padding: max(12px, var(--safe-top)) 10px max(12px, var(--safe-bottom)); }
  .modal { max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); width: 100%; }
  .call-modal { max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); }

  /* ---- menus never run off the screen ---- */
  .menu { max-width: calc(100vw - 24px); }

  /* ================================================================ inbox
     One pane at a time: the conversation list, or a thread with a back
     button — like the phone's own Messages app. */
  .inbox, .inbox.inbox--list, .inbox.inbox--thread { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .inbox--list .thread { display: none; }
  .inbox--list .inbox__list { border: 0; }
  .inbox--thread .inbox__list { display: none; }
  .thread__back { display: inline-flex; flex: 0 0 auto; margin-left: -8px; }
  .thread__head { padding: 8px 12px; padding-top: max(8px, var(--safe-top)); gap: 10px; }
  .thread__head .avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 13px; }
  .thread__head .fw-600 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.is-thread-view .topbar { display: none; }
  .thread__scroll { padding: 12px; }
  .thread__composer { padding: 8px max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left)); }
  .thread__composer .message-composer textarea { min-height: 52px; max-height: 32vh; padding: 10px 12px; resize: none; }
  .message-composer.is-collapsed .composer-count { display: none; }
  .composer-top { min-height: 38px; }
  .composer-address { min-height: 30px; font-size: 12px; padding-top: 3px; padding-bottom: 3px; }
  .composer-toolbar { flex-wrap: nowrap; }
  .composer-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .composer-tools::-webkit-scrollbar { display: none; }
  .composer-tools .menu { position: fixed; left: 10px; right: 10px; bottom: auto; top: 30vh; width: auto; max-width: none; max-height: 50vh; }
  .composer-send-main { min-width: 44px; }
  .message-composer.is-expanded { inset: var(--safe-top) 0 0 0; border-radius: 0; }
  .inbox-search__field input { height: 44px; }
  .convo { padding-top: 12px; padding-bottom: 12px; }

  /* ================================================================ tables
     Wide tables turn into one card per row on phones (mobile.js adds the
     column names as labels and the data--stacked class when a table
     doesn't fit). Narrow tables stay tables. */
  table.data.data--stacked, table.data.data--stacked tbody { display: block; width: 100%; }
  table.data.data--stacked thead { display: none; }
  table.data.data--stacked tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px;
    padding: 14px 16px; border-bottom: 1px solid var(--line-soft); position: relative;
  }
  table.data.data--stacked tbody tr:last-child { border-bottom: 0; }
  table.data.data--stacked tbody td {
    display: block; height: auto; min-height: 0; width: auto; min-width: 0;
    padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  table.data.data--stacked tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
  }
  table.data.data--stacked tbody td:first-child { grid-column: 1 / -1; padding-right: 44px; }
  table.data.data--stacked tbody td:first-child::before,
  table.data.data--stacked tbody td[data-label=""]::before { display: none; }
  table.data.data--stacked tbody td[colspan] { grid-column: 1 / -1; padding-right: 0; }
  table.data.data--stacked tbody td[data-label=""] { grid-column: 1 / -1; }
  /* a row's trailing actions (edit, ⋯) sit in the card's top-right corner */
  table.data.data--stacked tbody td[data-label=""]:last-child:not(:first-child) {
    position: absolute; top: 10px; right: 10px; grid-column: auto;
    display: flex; gap: 4px; justify-content: flex-end;
  }
  table.data.data--stacked tbody td[data-label=""]:last-child:not(:first-child) form { display: inline-flex; }
  table.data.data--stacked .identity__name,
  table.data.data--stacked .identity__meta { white-space: normal; }
  table.data.data--stacked td.right { text-align: left; }
  /* invoice dates already carry their own "Issued" / "Due" label */
  table.data.data--stacked td.billing-date { width: auto; }
  table.data.data--stacked td.billing-date::before { display: none; }
  /* nothing to show (e.g. "Remove" on a line that isn't saved yet): no label either */
  table.data.data--stacked tbody td:empty { display: none; }
  /* invoice line items: the description gets the full width to type in */
  table.data.data--stacked td:has(> input[name$="-description"]) { grid-column: 1 / -1; }
  table.data.data--stacked input:not([type=checkbox]):not([type=radio]),
  table.data.data--stacked select, table.data.data--stacked textarea { width: 100%; }
  .table-wrap:has(> table.data--stacked) { overflow-x: visible; }

  /* ================================================================ calendar
     The month grid shows how busy each day is; tap a day for its agenda. */
  .cal__day { min-height: 58px; padding: 5px 3px; position: relative; text-align: center; }
  .cal__day > .row { justify-content: center; }
  .cal__day > .row > .btn,
  .cal__day > .cal__chip,
  .cal__day > a.text-xs { display: none !important; } /* "+N more" carries an inline display:block */
  .cal__dow { padding: 8px 2px; font-size: 9.5px; letter-spacing: .06em; }
  .cal__tap { display: block; position: absolute; inset: 0; z-index: 1; border-radius: 0; }
  .cal__tap:active { background: var(--accent-softer); }
  .cal__count {
    position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
    min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px;
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 1;
    color: var(--accent-ink); background: var(--accent-soft);
  }
  .cal__day.is-today .cal__count { color: var(--on-accent); background: var(--accent); }
  .cal__num { width: 24px; height: 24px; font-size: 11.5px; }

  /* ================================================================ pipeline
     Swipe between stages, one column at a time. */
  .kanban {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    gap: 12px; padding: 4px 2px 16px; margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4);
    scroll-padding-left: var(--sp-4);
  }
  .kanban__col { scroll-snap-align: start; }

  /* ================================================================ lists & filters */
  /* Pill switches (Mine / Due today / Overdue …) slide sideways instead of
     squashing their labels onto three lines. */
  .segmented { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented a, .segmented button { flex: 0 0 auto; white-space: nowrap; }

  /* Filter bars: the search box gets its own row, the dropdowns share the next. */
  .filters { padding: var(--sp-3); }
  .filters .search-input { flex: 1 1 100%; width: 100%; min-width: 0; }
  .filters select,
  .filters input:not(.search-input):not([type=hidden]):not([type=checkbox]):not([type=radio]) { flex: 1 1 140px; min-width: 0; }

  /* Tasks: the title and details use the full width; tags drop below them. */
  .task-list .list-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 8px; align-items: start; padding: 12px 14px;
  }
  .task-list .list-row > form { grid-column: 1; grid-row: 1 / span 2; margin-top: -8px; }
  .task-list .list-row__main { grid-column: 2; grid-row: 1; }
  .task-list .list-row__tags { grid-column: 2; grid-row: 2; flex-wrap: wrap; gap: 6px; }
  .task-list .list-row > a.btn { grid-column: 3; grid-row: 1 / span 2; margin-top: -8px; }

  /* The last conversation can scroll clear of the Copilot button. */
  .inbox--list .inbox__scroll { padding-bottom: 76px; }

  /* ================================================================ contacts
     (the spreadsheet-style list keeps sideways scrolling for its columns) */
  .ghl-container .ghl-main-content { padding: 10px 10px 72px; }
  .ghl-container .ghl-toolbar { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .ghl-container .ghl-toolbar-left { flex: 1 1 100%; }
  .ghl-container .ghl-toolbar-right { flex: 1 1 100%; gap: 12px !important; }
  .ghl-container .ghl-toolbar-right > div { white-space: nowrap; }
  .ghl-container .ghl-toolbar-right .search-form { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .ghl-container .ghl-footer { flex-wrap: wrap; gap: 8px; }

  /* ================================================================ misc */
  .hero__actions, .hero .row--wrap { gap: 8px; }
  .tabs { scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}

/* Plain links inside table cards get a taller touch area without moving
   anything (the extra padding is cancelled by a matching negative margin). */
@media (max-width: 760px) and (pointer: coarse) {
  table.data.data--stacked td a:not([class]) { display: inline-block; max-width: 100%; padding: 6px 0; margin: -6px 0; }
}

/* Tablets and phones: dashboard lists line their details up in fixed
   columns, which don't fit the narrower cards; the details flow onto a
   second line instead of being cut off. */
@media (max-width: 1040px) {
  .list-row__meta[style*="grid-template-columns"] {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px !important;
  }
  .list-row__meta[style*="grid-template-columns"] > * { min-width: 0; max-width: 100%; }
  .list-row__meta[style*="grid-template-columns"] > :empty { display: none; }
  /* pipeline funnel: the stage name gives way before the count is pushed out */
  .funnel-step__label { flex-shrink: 1; min-width: 0; }
  .funnel-step__value { flex-basis: auto; min-width: 2.5em; }
}

/* Very small phones (iPhone SE / mini, compact Android) */
@media (max-width: 380px) {
  .tabbar__item { font-size: 9.5px; }
  .tabbar__item svg { width: 21px; height: 21px; }
  .topbar .topbar__action { display: none; }
  .kanban { grid-auto-columns: 90%; }
}

/* ------------------------------------------------------ profile: app card */
.pwa-card__section + .pwa-card__section { border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); }
.pwa-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.pwa-card__text { min-width: 0; flex: 1 1 260px; }
.pwa-card__text h3 { margin-bottom: 3px; }
.pwa-card .checkline { margin: var(--sp-3) 0 var(--sp-2); }
.pwa-ios-steps { margin-top: var(--sp-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-softer); border: 1px solid var(--line-soft); }
.pwa-ios-steps ol { margin: 6px 0 0; padding-left: 20px; }
.pwa-ios-steps li { margin: 3px 0; }
.pwa-ios-steps svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--accent); }
.pwa-devices { margin-top: var(--sp-2); }
.pwa-devices__item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.pwa-devices__item:last-child { border-bottom: 0; }
.pwa-devices__main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.pwa-devices__name { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Print never shows app chrome. */
@media print {
  .tabbar, .pwa-banner { display: none !important; }
  .main { padding-bottom: 0 !important; }
}