/* Printable medication chart, used only by /guides/cat-medication-chart and /tr/rehber/kedi-ilac-takip-cizelgesi. */

.med-chart {
  margin: 48px 0;
}

.med-chart-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.guide .med-chart-head h2 {
  margin: 0;
}

.med-chart-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.med-chart-print:hover {
  background: var(--text-secondary);
}

.med-chart-print:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.med-chart-print svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.med-chart-sheet {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.guide .med-chart-title {
  margin: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}

.med-chart-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0 0 20px;
}

.med-chart-fields div {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  min-width: 0;
}

.med-chart-fields dt {
  flex: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.med-chart-fields dd {
  flex: 1;
  min-width: 48px;
  height: 1.4em;
  margin: 0;
  border-bottom: 1px solid var(--muted);
}

/* The table scrolls inside its own box on phones; the page never scrolls sideways. */
.med-chart-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.med-chart-scroll:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.med-chart table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--text);
}

.med-chart th,
.med-chart td {
  border: 1px solid var(--border);
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
}

.med-chart thead th {
  background: var(--surface-muted);
  font-weight: 700;
  line-height: 1.25;
}

.med-chart th small {
  display: block;
  font-weight: 500;
  color: var(--muted);
}

/* Hide the outer edge of the grid; the scroll box draws it. */
.med-chart tr > :first-child {
  border-left: 0;
}
.med-chart tr > :last-child {
  border-right: 0;
}
.med-chart thead tr:first-child > * {
  border-top: 0;
}
.med-chart tbody tr:last-child > * {
  border-bottom: 0;
}

.med-chart td {
  height: 46px;
}

.med-chart .col-med {
  width: 22%;
}
.med-chart .col-dose {
  width: 16%;
}
.med-chart .col-time {
  width: 10%;
}
.med-chart .col-by {
  width: 10%;
}

.med-chart td.tick::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--faint);
  border-radius: 4px;
  vertical-align: middle;
}

.guide .med-chart-foot {
  margin: 14px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 720px) {
  .med-chart-sheet {
    padding: 18px 16px;
  }
  .med-chart-fields {
    grid-template-columns: 1fr;
  }
}

/* Print only the chart: black on white, full width, landscape on A4 or Letter. */
@media print {
  @page {
    size: landscape;
    margin: 12mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  site-header,
  site-footer,
  main > :not(.guide),
  .guide > :not(.med-chart),
  .med-chart-head {
    display: none !important;
  }

  .guide {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .med-chart {
    margin: 0;
  }

  .med-chart-sheet {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .guide .med-chart-title {
    font-size: 16pt;
    color: #000;
  }

  .med-chart-fields dt {
    color: #000;
  }

  .med-chart-fields dd {
    border-bottom-color: #000;
  }

  .med-chart-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .med-chart table {
    min-width: 0;
    font-size: 10pt;
    color: #000;
    page-break-inside: avoid;
  }

  .med-chart th,
  .med-chart td,
  .med-chart tr > :first-child,
  .med-chart tr > :last-child,
  .med-chart thead tr:first-child > *,
  .med-chart tbody tr:last-child > * {
    border: 1px solid #000;
  }

  .med-chart thead th {
    background: #fff;
    color: #000;
  }

  .med-chart th small {
    color: #000;
  }

  .med-chart td {
    height: 13mm;
  }

  .med-chart td.tick::after {
    border-color: #000;
  }

  .guide .med-chart-foot {
    color: #000;
  }
}