/*
 * MACLINIC — tablet / touch layer (loaded right after app.css).
 *
 * Doctors work mainly on an iPad / Android tablet (768–1180px, portrait and
 * landscape, touch + on-screen keyboard + stylus). This file only changes
 * sizing / layout / interaction — never colours outside the design tokens —
 * so light + dark themes keep working.
 *
 * "Touch" = any tablet-width viewport (768–1199, the sidebar-rail range) or a
 * coarse pointer at any width (touch-screen desktops, phones).
 */

/* ---------- 1. Viewport: dynamic height (on-screen keyboard / browser bars) ---------- */
@supports (min-height: 100dvh) {
  .app-shell, .app-main, .auth, .center-page { min-height: 100dvh; }
}
.app-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* ---------- 2. Touch targets >= 44px, no iOS zoom-on-focus (inputs >= 16px) ---------- */
@media (max-width: 1199.98px), (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm, .btn-xs { min-height: 40px; }
  .icon-btn, .icon-btn.sm { width: 44px; height: 44px; }
  .row-actions { gap: 8px; align-items: center; }
  /* a destructive icon never sits flush against another action */
  .row-actions .danger { margin-left: 4px; }
  .page-link { min-width: 44px; height: 44px; }
  .pagination { gap: 6px; }

  .form-control, .form-select, .topbar-search input { font-size: 16px; }
  .form-control, .form-select { min-height: 44px; }
  .form-control-sm, .form-select-sm { min-height: 40px; font-size: 16px; }
  .data-table > thead > tr.filters .form-control,
  .data-table > thead > tr.filters .form-select { min-height: 44px; font-size: 16px; }
  textarea.form-control { min-height: 120px; }
  .form-check-input { width: 1.35em; height: 1.35em; }
  .select2-container--krajee-bs5 .select2-selection--single,
  .select2-container--default .select2-selection--single,
  .select2-container--bootstrap .select2-selection--single { height: 44px !important; padding-top: 9px !important; font-size: 16px; }
  .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; }
  .select2-results__option { padding: 12px 14px; font-size: 1rem; }
  .select2-search--dropdown .select2-search__field { font-size: 16px !important; min-height: 40px; }

  .nav-tabs .nav-link { min-height: 48px; padding: 10px 14px; }
  .dropdown-item { min-height: 44px; }
  .breadcrumb a { display: inline-block; padding: 6px 0; }
  .topbar .user-btn { min-height: 44px; }

  .chip { min-height: 44px; padding: 0 14px; font-size: .92rem; }
  .quick-chips { gap: 8px; }
  .quick-chips .chip { min-height: 44px; font-size: .92rem; }

  .modal-footer .btn { min-width: 112px; }

  /* jQuery UI autocomplete (drug / method pickers): finger-size rows */
  .ui-autocomplete { font-size: 1rem; max-height: min(320px, 45dvh); -webkit-overflow-scrolling: touch; }
  .ui-autocomplete .ui-menu-item-wrapper { padding: 12px 14px; min-height: 44px; line-height: 1.4; }

  /* FullCalendar buttons */
  .mc-calendar .fc-button { min-height: 44px; padding: 0 14px; }
  .mc-calendar .fc-daygrid-day-number, .mc-calendar .fc-col-header-cell-cushion { padding: 6px 8px; }

  /* sticky save bar: card forms keep their actions reachable while scrolling */
  .card-body > .form-actions {
    position: sticky; bottom: 0; z-index: 5;
    margin: 8px calc(-1 * var(--bs-card-spacer-x)) calc(-1 * var(--bs-card-spacer-y));
    padding: 12px var(--bs-card-spacer-x) max(12px, env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 -8px 16px -12px rgba(11, 31, 75, .35);
  }
  .card-body > .form-actions .btn { min-height: 48px; min-width: 132px; }
  /* while the on-screen keyboard is up (html.kb-open, touch.js) the bar would sit
     on top of / behind the keyboard: let it scroll with the form instead */
  html.kb-open .card-body > .form-actions { position: static; box-shadow: none; }
}

/* ---------- 3. Sidebar rail on tablets: labels under the icons (no hover-only info) ---------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .sidebar .nav-item { min-height: 48px; }
  html:not(.sidebar-expanded) .sidebar .nav-item { flex-direction: column; gap: 2px; min-height: 58px; padding: 6px 4px; }
  html:not(.sidebar-expanded) .sidebar .nav-item .nav-label {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    max-width: 100%; font-size: .66rem; line-height: 1.25; text-align: center;
    overflow: hidden; white-space: normal; overflow-wrap: anywhere;
  }
  html:not(.sidebar-expanded) .sidebar .nav-item .ms { font-size: 22px; }
  html:not(.sidebar-expanded) .sidebar .nav-badge { position: absolute; top: 4px; right: 12px; min-width: 8px; height: 8px; padding: 0; font-size: 0; }
  html.sidebar-expanded .sidebar .nav-item { min-height: 48px; }
  .topbar { padding-left: 12px; padding-right: max(16px, env(safe-area-inset-right)); }
  [data-sidebar-toggle] { width: 48px; height: 48px; }
}

/* ---------- 4. Data grids: the row's main action never scrolls out of reach ---------- */
@media (min-width: 768px) {
  .grid-scroll .data-table > thead > tr > th:last-child.col-actions,
  .grid-scroll .data-table > thead > tr > td:last-child.col-actions,
  .grid-scroll .data-table > tbody > tr > td:last-child.col-actions {
    position: sticky; right: 0; z-index: 1;
    background: var(--surface);
    box-shadow: -10px 0 12px -12px rgba(11, 31, 75, .45);
  }
  .grid-scroll .data-table > thead > tr > th:last-child.col-actions { background: var(--bg); }
  .grid-scroll .data-table > thead > tr.filters > td:last-child { position: sticky; right: 0; background: var(--bg); }
}
/* rows that open something on tap (data-row-href, touch.js) */
tr[data-row-href] { cursor: pointer; }
tr[data-row-href]:active > td { background: color-mix(in srgb, var(--brand-600) 8%, transparent); }

/* ---------- 5. Exam room (doctor/visit/view) ---------- */
/* sticky bar: compact patient line (name, age, VN, allergy) + tabs */
.exam-sticky {
  position: sticky; top: var(--topbar-h); z-index: 6;
  margin: calc(-1 * var(--bs-card-spacer-y)) calc(-1 * var(--bs-card-spacer-x)) 0;
  padding: 10px var(--bs-card-spacer-x) 0;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.exam-sticky.is-stuck { border-radius: 0; box-shadow: 0 10px 16px -14px rgba(11, 31, 75, .45); }
.exam-mini {
  display: flex; align-items: center; gap: 6px 14px; min-height: 36px; min-width: 0;
  color: var(--ink-600); font-size: .86rem; text-decoration: none !important;
}
.exam-mini b { color: var(--ink-900); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.exam-mini .num { white-space: nowrap; }
.exam-mini .exam-allergy {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto;
  margin-left: auto; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--level-1) 12%, transparent); color: var(--bad-ink, var(--level-1));
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exam-mini .exam-allergy .ms { font-size: 18px; font-variation-settings: 'FILL' 1; flex: none; }
.exam-mini .exam-allergy span { overflow: hidden; text-overflow: ellipsis; }
.exam-mini .exam-mini-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--heading); white-space: nowrap; }
.exam-mini .exam-mini-title .ms { color: var(--brand-600); font-size: 20px; }
.exam-mini .exam-mini-who { display: none; align-items: center; gap: 6px 14px; min-width: 0; }
/* same row height either way, so nothing jumps when the bar sticks */
.exam-sticky.is-stuck .exam-mini .exam-mini-title { display: none; }
.exam-sticky.is-stuck .exam-mini .exam-mini-who { display: inline-flex; }
.exam-sticky .nav-tabs { margin-bottom: 0; }
html.kb-open .exam-sticky .exam-mini { display: none; }
@media (max-width: 1199.98px), (pointer: coarse) {
  /* tabs fill the bar so each is an easy target and none hide off-screen */
  .exam-sticky .nav-tabs .nav-item { flex: 1 1 auto; }
  .exam-sticky .nav-tabs .nav-link { justify-content: center; width: 100%; }
}
/* textareas: comfortable to read / write with keyboard or Pencil */
.exam-form textarea.form-control { font-size: 16px; line-height: 1.6; resize: vertical; }
.exam-form .tab-pane { scroll-margin-top: calc(var(--topbar-h) + 110px); }
.exam-form .form-control:focus { scroll-margin-top: calc(var(--topbar-h) + 110px); scroll-margin-bottom: 96px; }

/* ---------- 6. Prescription editor (unclead MultipleInput inside .rx-editor) ---------- */
.rx-editor .multiple-input-list .form-control-static {
  display: flex; align-items: center; min-height: 44px; margin: 0;
  font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-900);
}
.rx-editor .multiple-input-list__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; }
.rx-editor .js-input-plus { padding: 0 16px; }
.rx-editor .js-input-remove { padding: 0 10px; }
/* wide (>=1024, desktop + landscape tablets): one-line table, the drug name gets the room */
@media (min-width: 1024px) {
  .rx-editor .multiple-input-list th.list-cell__product_item { width: 34%; }
  .rx-editor .multiple-input-list th.list-cell__sale { width: 72px; }
  .rx-editor .multiple-input-list th.list-cell__amount { width: 96px; }
  .rx-editor .multiple-input-list th.list-cell__treatment_method { width: 22%; }
  .rx-editor .multiple-input-list th.list-cell__button { width: 56px; }
  .rx-editor .multiple-input-list td.list-cell__sale { padding-top: 6px !important; }
  .rx-editor .multiple-input-list > tbody > tr > td { vertical-align: top; }
}
/* portrait tablets + phones (< 1024): each item is a card — drug name on its own line */
@media (max-width: 1023.98px) {
  .rx-editor .multiple-input-list, .rx-editor .multiple-input-list > tbody,
  .rx-editor .multiple-input-list > tfoot, .rx-editor .multiple-input-list > tfoot > tr,
  .rx-editor .multiple-input-list > tfoot > tr > td { display: block; width: 100% !important; }
  .rx-editor .multiple-input-list > thead { display: none; }
  .rx-editor .multiple-input-list > tbody > tr {
    display: grid;
    grid-template-columns: 84px minmax(96px, 128px) minmax(0, 1fr) minmax(0, 1fr) 48px;
    grid-template-areas: "item item item item btn" "sale amount method remark remark";
    gap: 8px 10px; align-items: end;
    padding: 12px; margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  }
  .rx-editor .multiple-input-list > tbody > tr > td { display: block; width: auto !important; padding: 0 !important; border: 0; min-width: 0; }
  .rx-editor .list-cell__product_item { grid-area: item; }
  .rx-editor .list-cell__sale { grid-area: sale; }
  .rx-editor .list-cell__amount { grid-area: amount; }
  .rx-editor .list-cell__treatment_method { grid-area: method; }
  .rx-editor .list-cell__remark { grid-area: remark; }
  .rx-editor .list-cell__button { grid-area: btn; align-self: end; text-align: right; }
  .rx-editor .multiple-input-list > tbody > tr > td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: .78rem; font-weight: 500; color: var(--ink-600);
  }
  .rx-editor .list-cell__button::before { display: none !important; }
  .rx-editor .list-cell__sale .form-control-static { min-height: 44px; }
  .rx-editor .multiple-input-list > tfoot > tr > td { padding: 4px 0 0 !important; border: 0; text-align: left; }
  .rx-editor .js-input-plus { width: 100%; }
}
@media (max-width: 575.98px) {
  .rx-editor .multiple-input-list > tbody > tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px;
    grid-template-areas: "item item btn" "sale amount amount" "method method method" "remark remark remark";
  }
}

/* ---------- 7. Calendar inside narrow (portrait) columns: time above title, no letter-by-letter wrap ---------- */
@media (max-width: 1023.98px) {
  .mc-calendar-wrap .fc-daygrid-event .fc-event-main-frame { flex-direction: column; align-items: stretch; gap: 0; }
  .mc-calendar-wrap .fc-daygrid-event .fc-event-title { overflow-wrap: break-word; word-break: normal; font-size: .78rem; }
  .mc-calendar .fc-daygrid-event { padding: 3px 5px; }
  .mc-calendar .fc-toolbar-title { font-size: 1.05rem; }
}

@media print {
  .exam-sticky { position: static; box-shadow: none; }
  .exam-mini { display: none !important; }
}