/* ============================================================
   KLİNİK — mobil ve tablet iyileştirmeleri
   Ana tasarım dosyasından sonra yüklenmelidir.
   ============================================================ */

html {
  min-width: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

.dash-cols > * {
  min-width: 0;
}

img,
video {
  max-width: 100%;
}

.report-mobile-list {
  display: none;
}

@media (max-width: 720px) {
  .report-desktop-table {
    display: none;
  }

  .report-mobile-list {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .report-list-card {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .report-mobile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 14px;
    border: 1px solid var(--stroke-soft);
    border-radius: 14px;
    background: var(--surface-lowest);
    box-shadow: 0 2px 10px rgba(23, 35, 49, .05);
  }

  .report-mobile-patient {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--on-surface);
    cursor: pointer;
    text-align: left;
  }

  .report-mobile-patient b {
    display: block;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .report-mobile-patient small {
    display: block;
    margin-top: 3px;
    color: var(--outline);
    font: 9.5px var(--font-mono);
  }

  .report-mobile-date {
    align-self: start;
    padding-top: 2px;
    color: var(--outline);
    font: 10px var(--font-mono);
    white-space: nowrap;
  }

  .report-mobile-topic {
    min-width: 0;
  }

  .report-mobile-topic .chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .report-mobile-topic small {
    display: block;
    margin-top: 6px;
    color: var(--outline);
    font-size: 10px;
  }

  .report-mobile-status {
    justify-self: end;
  }

  .report-mobile-actions {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 3px;
  }

  .report-mobile-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0;
  }

  .page-head:has(#rapor-ara) .search {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0 !important;
  }

  .page-head:has(#rapor-ara) #btn-rapor-yeni {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 1000px) {
  /* Bu kural daha önce yalnızca Panel sayfasının içine ekleniyordu.
     Hasta dosyası ve Ayarlar doğrudan açıldığında iki dar sütun kalıyordu. */
  .dash-cols {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body {
    min-height: 100vh;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
  }

  .main,
  .content,
  .card,
  .card-body,
  .page-head,
  .row {
    min-width: 0;
  }

  .content {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .topbar {
    gap: 10px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .topbar .search {
    min-width: 0;
    max-width: none;
  }

  .topbar .search input {
    min-width: 0;
    font-size: 16px;
  }

  .topbar .who {
    flex: 0 0 auto;
  }

  .page-head {
    align-items: flex-start;
  }

  .page-head .grow {
    flex: 1 1 220px;
    min-width: 0;
  }

  .page-head .muted,
  .page-head h1 {
    overflow-wrap: anywhere;
  }

  /* iOS, 16px altındaki alanlara odaklanınca sayfayı yakınlaştırır. */
  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  textarea {
    min-height: 96px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
  }

  .check {
    gap: 12px;
    line-height: 1.45;
  }

  .btn,
  .nav-item,
  .tab,
  .tool-btn {
    touch-action: manipulation;
  }

  .btn {
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .btn-sm,
  .btn-icon {
    min-height: 40px;
  }

  .page-head > .btn:not(.btn-icon),
  .page-head > a.btn {
    flex: 1 1 auto;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat {
    min-width: 0;
    padding: 11px 12px;
  }

  .stat .v {
    flex-wrap: wrap;
    font-size: 20px;
  }

  .card .card-head,
  .card .card-body {
    min-width: 0;
  }

  .card .card-head {
    flex-wrap: wrap;
  }

  .card .card-head h3 {
    min-width: 150px;
  }

  /* Uzun sekme dizilerinin kaydırılabildiğini hissettir ve aktif alanı koru. */
  .tabs {
    max-width: 100%;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Üst çubuğun altında kalmaması için harita araçlarını doğru konuma sabitle. */
  .map-toolbar {
    top: 60px;
    max-width: 100%;
  }

  .wa-kutu {
    max-height: calc(100dvh - 250px);
    padding: 9px;
  }

  .wa-balon {
    max-width: 88%;
  }

  .wa-img {
    max-width: min(280px, 100%);
  }

  .modal-bg {
    min-height: 100dvh;
  }

  .modal,
  .modal.wide {
    max-height: calc(100dvh - env(safe-area-inset-top));
  }

  .modal-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-head,
  .modal-foot {
    flex: 0 0 auto;
  }

  .bottom-nav {
    min-height: 64px;
  }

  .bottom-nav .nav-item {
    min-width: 0;
    min-height: 52px;
    padding: 6px 5px;
  }

  /* Kurulum bildirimi alt menünün üstünde görünür. */
  .pwa-banner {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 10px;
  }

  /* Dokunmatik cihazda hover olmadığı için silme düğmesi daima erişilebilir. */
  @media (hover: none), (pointer: coarse) {
    .photo .del {
      display: inline-flex;
      width: 36px;
      height: 36px;
    }
  }

  .cal-ay,
  .cal-ay-baslik {
    gap: 3px;
  }

  .cal-ay-hucre {
    padding: 4px 3px;
  }
}

@media (max-width: 700px) {
  /* Hasta listesini yatay bir masaüstü tablosu yerine okunabilir kartlara çevir.
     İlk başlığında .nowrap bulunan tek tablo hasta listesidir. */
  table:has(> thead > tr > th:first-child.nowrap) {
    display: block;
    width: 100%;
    min-width: 0;
  }

  table:has(> thead > tr > th:first-child.nowrap) thead {
    display: none;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody {
    display: block;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "patient arrow"
      "file kvkk"
      "phone kvkk"
      "birth kvkk";
    gap: 5px 12px;
    width: 100%;
    padding: 13px 14px;
    border-bottom: 1px solid var(--stroke-soft);
    background: var(--surface-lowest);
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(1) {
    grid-area: file;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(2) {
    grid-area: patient;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(2) .row {
    flex-wrap: nowrap;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(3) {
    grid-area: phone;
    overflow-wrap: anywhere;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(3)::before {
    content: "Tel: ";
    color: var(--outline);
    font-family: var(--font-body);
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(4) {
    grid-area: birth;
    color: var(--on-surface-variant);
    font-size: 12px;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(4)::before {
    content: "Doğum: ";
    color: var(--outline);
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(5) {
    grid-area: kvkk;
    align-self: center;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(6) {
    display: none;
  }

  table:has(> thead > tr > th:first-child.nowrap) tbody td:nth-child(7) {
    grid-area: arrow;
    align-self: center;
    color: var(--primary);
  }
}

@media (max-width: 560px) {
  .content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar .who {
    display: none;
  }

  .page-head {
    gap: 9px;
  }

  .page-head > .grow {
    flex-basis: calc(100% - 100px);
  }

  .page-head > .btn:not(.btn-icon),
  .page-head > a.btn {
    flex-basis: calc(50% - 5px);
  }

  .card {
    border-radius: var(--r-md);
  }

  .card .card-head,
  .card .card-body {
    padding-left: 13px;
    padding-right: 13px;
  }

  th,
  td {
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal-head,
  .modal-body,
  .modal-foot {
    padding-left: 14px;
    padding-right: 14px;
  }

  .wa-balon {
    max-width: 94%;
  }

  .pwa-banner {
    left: 8px;
    right: 8px;
  }
}

@media (max-width: 360px) {
  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bottom-nav .nav-item {
    font-size: 9px;
  }

  .bottom-nav .nav-item svg {
    width: 19px;
    height: 19px;
  }
}