/* KallDoctor desktop layout. Phones and small tablets are untouched: every rule
   here only applies on screens 1000px wide or more. */
@media (min-width: 1000px) {
  body { padding-left: 40px; padding-right: 40px; }
  .wrap { max-width: 1200px; }
  .topbar { padding-top: 28px; padding-bottom: 20px; margin-bottom: 28px; }
  .brand { font-size: 24px; }
  .navbtn, .signout { font-size: 14px; padding: 9px 16px; }

  /* ===== Patient site (kalldoctor.com), signed in ===== */
  #portal-tabs { display: inline-flex; margin-bottom: 26px; }
  #portal-tabs button { flex: none; padding: 10px 20px; font-size: 14.5px; }

  /* Search: form on the left, results as a grid on the right */
  #app-shell #panel-search { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: repeat(8, auto) 1fr; column-gap: 40px; align-content: start; }
  #app-shell #panel-search > * { grid-column: 1; }
  #app-shell #panel-search > #results { grid-column: 2; grid-row: 1 / -1; margin-top: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-content: start; }
  #app-shell #panel-search > #results > .card { margin: 0; transition: border-color .15s, transform .15s; }
  #app-shell #panel-search > #results > .card:hover { border-color: var(--teal); transform: translateY(-2px); }
  #app-shell #panel-search > #results > :not(.card) { grid-column: 1 / -1; margin-top: 0; }

  /* Nearby clinics: map beside the list */
  #app-shell #panel-nearby { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  #app-shell #nearby-map { grid-column: 1; grid-row: 1 / span 2; height: min(68vh, 620px) !important; margin-bottom: 0 !important; }
  #app-shell #nearby-status { grid-column: 2; grid-row: 1; }
  #app-shell #nearby-list { grid-column: 2; grid-row: 2; max-height: min(68vh, 620px); overflow-y: auto; padding-right: 6px; }

  /* My bookings, payments, consultations: cards in a grid */
  #app-shell #panel-bookings, #app-shell #panel-payments, #app-shell #panel-consultations { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-content: start; }
  #app-shell #panel-bookings > .card, #app-shell #panel-payments > .card, #app-shell #panel-consultations > .card { margin: 0; }
  #app-shell #panel-bookings > :not(.card), #app-shell #panel-payments > :not(.card), #app-shell #panel-consultations > :not(.card),
  #app-shell #panel-bookings > .card.empty, #app-shell #panel-payments > .card.empty, #app-shell #panel-consultations > .card.empty { grid-column: 1 / -1; }

  /* ===== Staff portal: bookings dashboard and patient chart ===== */
  #app-shell #search-input { max-width: 440px; }
  #bookings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-content: start; }
  #bookings-list > .card { margin: 0; }
  #bookings-list > :not(.card), #bookings-list > .card.empty { grid-column: 1 / -1; }
  #bookings-list > .day-label { margin: 14px 2px 0; }
  .chart-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
  .patient-head h2 { font-size: 28px; }

  /* ===== Clinic dashboard (portal.kalldoctor.com): menu on the left ===== */
  body > .wrap > #dash-view { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; align-content: start; }
  body > .wrap > #dash-view > .topbar { grid-column: 1 / -1; }
  body > .wrap > #dash-view > .section-tabs { grid-column: 1; grid-row: 2 / span 20; flex-direction: column; gap: 4px; margin: 0; border-bottom: 0; position: sticky; top: 24px; align-self: start; }
  body > .wrap > #dash-view > .section-tabs button { text-align: left; padding: 11px 16px; border: 0; border-radius: 8px; font-size: 15px; color: var(--ink-soft); }
  body > .wrap > #dash-view > .section-tabs button:hover { background: var(--teal-wash); color: var(--ink); }
  body > .wrap > #dash-view > .section-tabs button.active { background: var(--teal); color: #fff; }
  body > .wrap > #dash-view > :not(.topbar):not(.section-tabs) { grid-column: 2; }
  body > .wrap > #dash-view > .panel { padding-top: 0; max-width: 860px; }

  /* ===== Front desk and Clinic tools: menu on the left ===== */
  #desk, #tools { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; align-content: start; }
  #desk > *, #tools > * { grid-column: 2; }
  #desk > .tabs, #tools > .tabs { grid-column: 1; grid-row: 1 / span 20; flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; position: sticky; top: 24px; align-self: start; }
  #desk > .tabs button, #tools > .tabs button { text-align: left; padding: 11px 16px; border: 0; border-radius: 8px; background: none; font-size: 15px; color: var(--ink-soft); }
  #desk > .tabs button:hover, #tools > .tabs button:hover { background: var(--teal-wash); color: var(--ink); }
  #desk > .tabs button.active, #tools > .tabs button.active { background: var(--teal); color: #fff; }

  /* ===== Review applications (admin) ===== */
  .wrap:has(> #lock) { max-width: 960px; }
}

/* Very wide monitors: a little more room */
@media (min-width: 1500px) {
  .wrap { max-width: 1320px; }
}