/* MediTours — patient dashboard shared styles */
.app{
  display: grid; grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 72px);
  background: var(--paper);
}
.app-side{
  background: #fff; border-right: 1px solid var(--line);
  padding: 28px 18px; position: sticky; top: 72px; align-self: start;
  height: calc(100vh - 72px); overflow-y: auto;
}
.me{
  display:flex; align-items:center; gap: 12px;
  padding: 12px; border-radius: 14px; background: var(--paper);
  margin-bottom: 24px;
}
.me .av{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Geist',sans-serif; font-weight: 700;
}
.me .nm{ font-family:'Geist',sans-serif; font-weight: 700; font-size: 14px; }
.me .em{ font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.nav-h{
  font-family:'Geist',sans-serif; font-weight:600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  padding: 8px 12px; margin-top: 12px;
}
.nav-i{
  display:flex; align-items:center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  font-family:'Geist',sans-serif; font-weight: 500; font-size: 14px;
  color: var(--ink-2); cursor:pointer; transition: all .12s;
  text-decoration: none;
}
.nav-i:hover{ background: var(--paper); color: var(--ink); }
.nav-i.active{ background: var(--ink); color: #fff; }
.nav-i .badge{
  margin-left: auto; padding: 2px 8px; border-radius: 99px;
  background: var(--blue); color:#fff; font-size: 10px; font-family:'Geist',sans-serif; font-weight: 700;
}
.nav-i.active .badge{ background: var(--teal); color: var(--ink); }

/* Round icon button for top-nav (messages / notifications) */
.icon-btn{
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color: var(--ink-2);
  cursor: pointer; transition: all .12s; text-decoration: none;
}
.icon-btn:hover{ background: var(--paper); border-color: var(--ink-4); color: var(--ink); }
.icon-btn.active{ background: var(--ink); border-color: var(--ink); color: #fff; }
.icon-btn .dot-badge{
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: var(--blue); color:#fff;
  font-family:'Geist',sans-serif; font-weight: 700; font-size: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border: 2px solid #fff;
}
.icon-btn.active .dot-badge{ background: var(--teal); color: var(--ink); border-color: var(--ink); }

/* Messages text link with badge in top nav */
.nav-msgs{ display: inline-flex; align-items: center; gap: 7px; }
.nav-pill{
  background: var(--blue); color: #fff;
  font-family: 'Geist', sans-serif; font-weight: 700; font-size: 10px;
  padding: 2px 7px; border-radius: 99px; line-height: 1;
}
.nav-msgs.active .nav-pill{ background: var(--teal); color: var(--ink); }

.app-main{ padding: 32px 40px; max-width: 1180px; }

/* Anonymous / public view: no patient sidebar → collapse to a single column.
   Applied by dashboard-shell.js when no session exists on a public page. */
.app.app--no-side{ grid-template-columns: 1fr; }
.app.app--no-side > .app-side{ display: none; }
.app.app--no-side > .app-main{ max-width: 1180px; margin: 0 auto; }
.greeting{ display:flex; justify-content:space-between; align-items:flex-end; gap: 12px; flex-wrap:wrap; }
.greeting h1{
  font-family:'Geist',sans-serif; font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); letter-spacing:-0.025em; line-height: 1.05;
  margin: 0;
}
.greeting .sub{ color: var(--ink-2); font-size: 15px; margin-top: 6px; }

/* widgets */
.widget{
  background:#fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px;
  margin-bottom: 16px;
}
.widget h3{
  font-family:'Geist',sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing:-0.005em; margin: 0 0 14px;
  display:flex; justify-content: space-between; align-items: center;
}
.widget h3 a{ color: var(--blue); font-size: 13px; font-weight: 600; }

/* Page sub-header */
.page-h{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.page-h h1{
  font-family:'Geist',sans-serif; font-weight: 700;
  font-size: clamp(26px, 3vw, 36px); letter-spacing:-0.025em; line-height: 1.05; margin: 0;
}
.page-h .sub{ font-size: 14.5px; color: var(--ink-2); margin: 6px 0 0; }

/* Tab bar (sub) */
.subtabs{ display:flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.subtabs button{
  background:transparent; border:0; padding: 12px 18px;
  font-family:'Geist',sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink-2); cursor:pointer; border-bottom: 2px solid transparent;
}
.subtabs button.active{ color: var(--blue); border-bottom-color: var(--blue); }
.subtabs .count{ margin-left: 6px; color: var(--ink-3); font-weight: 500; font-size: 12px; }

/* common */
.row-card{
  background:#fff; border:1px solid var(--line); border-radius: 16px;
  padding: 18px 22px; margin-bottom: 10px;
  transition: all .15s;
}
.row-card:hover{ border-color: var(--ink-4); box-shadow: 0 14px 30px -20px rgba(15,79,191,0.18); }

.empty-state{
  background:#fff; border:1px dashed var(--line); border-radius: 22px;
  padding: 48px 32px; text-align:center;
}
.empty-state h3{ font-family:'Geist',sans-serif; font-weight: 700; font-size: 18px; margin: 12px 0 6px; }
.empty-state p{ font-size: 14px; color: var(--ink-2); margin: 0 0 18px; max-width: 360px; margin-left:auto; margin-right:auto; line-height: 1.55; }

@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; min-width: 0; }
  .app-side{
    position: relative; top: 0; height: auto;
    order: 2; /* push sidebar below main content on mobile */
  }
  /* Patient pages: the hamburger menu carries the sidebar's links, so hide the
     stacked desktop sidebar on mobile. (Doctor pages do the same via .dr-layout.) */
  .pt-layout .app-side{ display: none; }
  /* Let the single grid column shrink to the viewport — a grid item's default
     min-width:auto was forcing the page wider than the screen (zoom-out bug). */
  .app-main{
    padding: 20px 16px;
    order: 1;
    min-width: 0;
  }
  /* Safety net: clip any stray fixed/over-wide element (e.g. the message modal)
     so the page never grows past the device width. clip (not hidden) keeps
     position:sticky working. */
  html, body{ overflow-x: clip; }
  /* Identity lives in the hamburger menu on mobile → hide the top-nav avatar. */
  .pt-layout .nav-cta .me{ display: none; }
  .widget{ margin-bottom: 14px; }

  /* Patient dashboard */
  .kpi-row{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-grid{ grid-template-columns: 1fr; }
  .next-card{ padding: 24px 20px; }
  .appt{ grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 10px; padding: 14px 16px; }
  .appt-st{ grid-column: 2; }
  .appt-action{ grid-column: 1 / -1; display: flex; gap: 8px; }
  .appt-action .btn{ flex: 1; }
  .greeting{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .escrow-card{ gap: 12px; }

  /* Doctor dashboard */
  .kpi .v{ font-size: 22px; }
}

@media (max-width: 480px){
  .kpi-row{ grid-template-columns: 1fr; }
  .appt-date{ display: none; }
  .appt{ grid-template-columns: 1fr; }
  .appt-st{ grid-column: 1; }
}

/* ── Doctor mobile nav ─────────────────────────────────────────────────────── */

/* "for doctors" tag — hidden on mobile, visible on desktop */
.dr-wordmark-tag{ font-family:'Geist',sans-serif; font-weight:500; font-size:12px;
  color:var(--ink-3); margin-left:4px; letter-spacing:0.05em; text-transform:uppercase; }

/* Doctor info row inside the hamburger dropdown */
.dr-ham-info{
  display: none; /* shown via .nav-links.open override below */
  align-items: center; gap: 12px;
  padding: 14px 24px 14px; border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.dr-ham-av{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg,#0F4FBF,#00B5B1);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.dr-ham-nm{ font-family:'Geist',sans-serif; font-weight:700; font-size:15px; }
.dr-ham-em{ font-size:12px; color:var(--ink-3); margin-top:2px; }

/* Extra nav items — desktop hidden, visible only in mobile hamburger */
.dr-nav-m{ display: none; }

/* Bottom tab bar — hidden on desktop */
.dr-bottom-nav{ display: none; }
.dr-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--ink-3); text-decoration:none;
  font-size:10px; font-family:'Geist',sans-serif; font-weight:600; letter-spacing:0.02em;
  background:transparent; border:none; cursor:pointer; padding:0; transition:color .12s;
}
.dr-tab svg{ width:22px; height:22px; }
.dr-tab.active{ color:var(--blue); }

@media (max-width: 900px){
  /* ── Doctor layout overrides ── */

  /* Hide desktop sidebar — bottom bar handles navigation */
  .dr-layout .app-side{ display: none; }

  /* Pad main so last element never hides behind the tab bar.
     !important overrides pages that set inline style="padding:28px 36px" */
  .dr-layout .app-main{ padding-bottom: 76px !important; }

  /* Unclutter the top nav: hide bell + doctor avatar on mobile */
  .dr-layout .dr-nav-bell,
  .dr-layout .dr-nav-me{ display: none; }

  /* "for doctors" → too wide on mobile, show just "MediTours" */
  .dr-wordmark-tag{ display: none; }

  /* Doctor info + extra items appear when hamburger is open */
  .nav-links.open .dr-ham-info{ display: flex !important; }
  .nav-links.open .dr-nav-m{ display: block; }

  /* Bottom tab bar */
  .dr-bottom-nav{
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 58px;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 24px -8px rgba(0,0,0,0.08);
    z-index: 300;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Push cookie-consent banner above the bottom tab bar so it stays visible */
  .dr-layout #mt-cookie-banner{
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }
}