/* ==========================================================================
   E-Doctor :: Mobile-first / touch / PWA-chrome layer
   Loaded after style.css so it can extend/override it for phones & tablets.
   Covers: safe-area insets, touch target sizing, tap feedback, the fixed
   bottom navigation bar, bottom-sheet modals, the auto-converted mobile
   table/card view, and the install-app banner. Desktop layout in style.css
   is untouched — everything here is scoped to small screens or to
   components (bottom nav, install banner) that simply don't render on
   desktop.
   ========================================================================== */

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

/* ---- Touch fundamentals -------------------------------------------------- */
html {
  -webkit-tap-highlight-color: transparent;
}
body {
  touch-action: manipulation; /* removes the ~300ms tap delay on old mobile browsers */
}
a, button, .btn, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Comfortable tap targets (Apple HIG / Material both recommend ~44-48px)
   applied to primary controls, deliberately skipping compact/icon buttons
   used inside dense admin tables so those rows don't blow out. */
.btn:not(.btn-sm):not(.btn-icon) { min-height: 44px; }
.ed-sidebar .nav-link { min-height: 44px; }
.form-control, .form-select { min-height: 44px; font-size: 16px; } /* 16px stops iOS auto-zoom on focus */
textarea.form-control { min-height: 44px; }
.form-check-input { width: 1.25em; height: 1.25em; }

/* Press feedback in place of :hover, which touchscreens never trigger */
.btn:active { transform: scale(.96); }
.ed-card:active, .product-card:active, .service-card:active, .stat-card:active,
.doctor-slide-card:active, .portal-card:active {
  transform: scale(.98);
}
.category-pill:active { transform: scale(.94); }

/* ---- Safe-area awareness (notches / home indicators) ---------------------- */
.ed-navbar { padding-top: max(.75rem, var(--ed-safe-top)) !important; }
.ed-topbar { padding-top: max(.75rem, var(--ed-safe-top)); }

/* ==========================================================================
   Bottom navigation bar (client / doctor / admin dashboards + public site)
   ========================================================================== */
.ed-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1060; /* above the sidebar (1050) and its backdrop (1049) so
                    "Menu" stays tappable — including to close — while open */
  display: none; /* shown below the lg breakpoint via .d-lg-none (Bootstrap) */
  background: #fff;
  box-shadow: 0 -6px 20px rgba(30, 41, 59, .10);
  padding: .35rem max(.25rem, var(--ed-safe-right)) calc(.35rem + var(--ed-safe-bottom)) max(.25rem, var(--ed-safe-left));
  border-top: 1px solid #eef1f7;
}
@media (max-width: 991.98px) {
  .ed-bottom-nav.d-lg-none { display: flex; }
}
.ed-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .3rem .2rem;
  border: none;
  background: transparent;
  color: var(--ed-muted);
  text-decoration: none;
  font-size: .66rem;
  font-weight: 600;
  border-radius: 12px;
  transition: color .15s ease, background .15s ease;
  min-height: 48px;
}
.ed-bottom-nav-item:active { background: var(--ed-bg); }
.ed-bottom-nav-icon { position: relative; font-size: 1.25rem; line-height: 1; }
.ed-bottom-nav-item.active,
.ed-bottom-nav-item.active .ed-bottom-nav-icon { color: var(--ed-blue); }
.ed-bottom-nav-item.active { background: rgba(47,109,176,.09); }
.ed-bottom-nav-dot {
  position: absolute; top: -3px; right: -6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ed-danger); border: 2px solid #fff;
}
.ed-bottom-nav-menu { cursor: pointer; }

/* Keep page content (and the fixed dashboard topbar) clear of the bar */
@media (max-width: 991.98px) {
  .ed-content { padding-bottom: calc(1.5rem + var(--ed-bottom-nav-h) + var(--ed-safe-bottom)); }
  body:has(.ed-bottom-nav) footer { padding-bottom: calc(1rem + var(--ed-bottom-nav-h) + var(--ed-safe-bottom)); }
  /* Fallback for browsers without :has() support: give the public footer
     breathing room unconditionally on mobile — a few extra px of padding
     above a footer is harmless even where the bottom nav is absent. */
  footer { padding-bottom: calc(1rem + var(--ed-bottom-nav-h) + var(--ed-safe-bottom)); }
}

/* Sidebar off-canvas backdrop (tap outside to close) */
.ed-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 1049;
}
.ed-sidebar-backdrop.show { display: block; }
@media (min-width: 992px) {
  .ed-sidebar-backdrop { display: none !important; }
}
.ed-sidebar { z-index: 1050; }

/* ==========================================================================
   Bottom-sheet modals on phones — Bootstrap modals slide up from the
   bottom edge instead of popping up centered, which feels native on touch
   devices and keeps content reachable with a thumb.
   ========================================================================== */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0 auto;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
  }
  .modal.fade .modal-dialog { transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); }
  .modal.show .modal-dialog { transform: translateY(0); }
  .modal-content {
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    padding-bottom: var(--ed-safe-bottom);
    border: none;
  }
  .modal-content::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    border-radius: 999px;
    background: #dfe1e3;
    margin: .6rem auto 0;
  }
  .modal-header { border-bottom: 1px solid #e9eaec; }
}

/* ==========================================================================
   Auto mobile table -> card list (assets/js/mobile_ux.js tags <table> with
   .ed-mobile-table and stamps data-label from the thead onto each <td>)
   ========================================================================== */
@media (max-width: 767.98px) {
  table.ed-mobile-table thead { display: none; }
  table.ed-mobile-table, table.ed-mobile-table tbody,
  table.ed-mobile-table tr, table.ed-mobile-table td { display: block; width: 100%; }
  table.ed-mobile-table tr {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--ed-shadow-sm);
    margin-bottom: .75rem;
    padding: .35rem .25rem;
  }
  table.ed-mobile-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .85rem;
    border: none !important;
    text-align: right;
    font-size: .88rem;
  }
  table.ed-mobile-table td:empty { display: none; }
  table.ed-mobile-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ed-muted);
    text-align: left;
    flex-shrink: 0;
  }
  table.ed-mobile-table td[data-label=""]::before,
  table.ed-mobile-table td:not([data-label])::before { content: none; }
}

/* ==========================================================================
   Install-app banner (assets/js/pwa.js)
   ========================================================================== */
.ed-install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--ed-safe-bottom));
  z-index: 1080;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  animation: edInstallSlideUp .35s cubic-bezier(.32,.72,0,1);
}
body:has(.ed-bottom-nav) .ed-install-banner { bottom: calc(var(--ed-bottom-nav-h) + 14px + var(--ed-safe-bottom)); }
@keyframes edInstallSlideUp {
  from { transform: translateY(120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.ed-install-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ed-gradient); color: #fff; font-size: 1.15rem;
}
.ed-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ed-install-text strong { font-size: .85rem; }
.ed-install-text span { font-size: .74rem; color: var(--ed-muted); }
.ed-install-go { white-space: nowrap; }
.ed-install-close {
  border: none; background: transparent; color: var(--ed-muted);
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.ed-install-close:active { background: var(--ed-bg); }
@media (min-width: 992px) {
  .ed-install-banner { left: auto; width: 360px; right: 24px; bottom: 24px; }
}

/* ==========================================================================
   Touch-swipe affordance for the homepage sliders — a subtle "grab" cursor
   and disabling text-selection while dragging (JS drives the actual swipe).
   ========================================================================== */
.ed-slider-viewport { touch-action: pan-y; cursor: grab; }
.ed-slider-viewport:active { cursor: grabbing; }
.ed-slider-track { user-select: none; }

/* ==========================================================================
   Small-phone polish
   ========================================================================== */
@media (max-width: 575.98px) {
  .ed-content { padding: 1rem; }
  .chat-composer { padding-bottom: max(.75rem, var(--ed-safe-bottom)); }
  h1 { font-size: 1.6rem; }
  .ed-hero { padding: 40px 0 70px; }
}