/* Symptom Calendar Table Styles */

.symptom-calendar {
    margin: 2rem 0;
}

.symptom-calendar .table-responsive {
    max-width: 100%;
}

.symptom-calendar table {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.symptom-calendar th,
.symptom-calendar td {
    padding: 0.4rem 0.6rem;
    vertical-align: middle;
}

.symptom-calendar .symptom-name-column {
    min-width: 150px;
    text-align: left;
}

.symptom-calendar .symptom-name {
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}

.symptom-calendar .chart-column {
    font-weight: 600;
    background-color: #f8f9fa;
    text-align: left;
    color: #495057;
}

.symptom-calendar .chart-cell {
    width: 100%;
}

.symptom-calendar .section-header {
    background-color: #e9ecef;
    font-weight: 700;
}

.symptom-calendar .section-header td {
    text-align: left;
    padding: 0.6rem 0.6rem;
}

/* #474: each section names the domain its charts are drawn against, matching
   the doctor report's caption line. Wording comes from CalendarLegend, so the
   two surfaces can't describe the same axis differently. */
.symptom-calendar .scale-caption td {
    text-align: left;
    padding: 0.2rem 0.6rem 0.4rem;
    font-size: 0.75rem;
    font-style: italic;
    color: #6c757d;
}

/*
   The mini-visualizations are inline SVG generated by CalendarSvg, which
   carries its own presentation attributes (stroke/fill) so the SAME markup
   renders in the QuestPDF doctor report. The rules below are layout/sizing
   only — colours live in the SVG, not here.
*/

/* Numeric line sparkline (#193) */
.spark-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* #472: 510px wide, not 340. The shared viewBox went 280 → 420 units to buy
   room per day, so the on-screen width has to grow by the same 1.5× or every
   number and word in the chart would render a third smaller than it does today
   — the drawn size is width ÷ viewBox units, and that ratio (510/420 = 340/280
   = 1.214 px per unit) is what has to hold still.

   HEIGHTS ARE A FLOOR, NOT A FIT (PR #506 review). preserveAspectRatio="meet"
   scales by the SMALLER of the width- and height-implied ratios, so a height
   below 510 × boxHeight / 420 makes the HEIGHT bind and that row draws
   narrower than the rows above it — silently undoing the day-for-day alignment
   #471 depends on. Each height here therefore sits just above its floor:

       .spark-svg  420×34 → floor 41.29px, set 42
       .strip-svg  420×20 → floor 24.29px, set 25
       .axis-svg   420×14 → floor 17.00px, set 18

   The axis was 17px on the first cut of #472 — exactly ON its floor, correct
   by luck rather than by margin. The cost of the slack is a fraction of a pixel
   of letterboxing, which is invisible; the cost of being under it is a chart
   that no longer lines up.

   #474: the y-axis numbers are 8 viewBox units; at the original 260-unit width
   that rendered as 8px text, which is below what anyone actually reads.
   Below that width the max-width caps the ELEMENT while the height stays fixed, so
   the box stops matching the viewBox ratio. The drawing doesn't distort —
   preserveAspectRatio="xMidYMid meet" scales it down and letterboxes instead —
   and since charts and strips cap against effectively the same width (a chart
   sits in .spark-cell, which fills the same td a strip renders straight into),
   both shrink by the same factor and stay aligned (PR #486 review).
   The strips below are pinned to the SAME WIDTH (not the same height), which is
   what keeps day N in the same place across row types — the alignment
   CalendarSvg's shared geometry exists for (#418). Width is the axis that has to
   match; heights differ by design, since a strip is shorter than a chart. An
   earlier version of this comment claimed the alignment held while the axis
   gutter was quietly breaking it (PR #486 review), so: the invariant is width
   here, plus one constant plot origin inside CalendarSvg. */
.spark-svg {
    width: 510px;
    max-width: 60%;
    height: 42px;
    flex: 0 0 auto;
    overflow: visible;
}

.spark-label {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
}

/* Medication adherence (#194), presence, and streak (#195) strips */
.strip-svg {
    width: 510px;
    max-width: 60%;
    height: 25px;
    overflow: visible;
}

/* #471 shared date axis. Pinned to the SAME width as the rows above it —
   that is the invariant that puts a tick under its own week gridline; the
   height is free to differ, as it does for strips. */
.axis-svg {
    width: 510px;
    max-width: 60%;
    height: 18px;
    flex: 0 0 auto;
    overflow: visible;
}

.date-axis td {
    border-top: 0;
    padding-top: 0;
}

/* Legend (#418) — collapsed reference for every mark in the table above. */
.calendar-legend {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.calendar-legend > summary {
    cursor: pointer;
    font-weight: 600;
    color: #495057;
    padding: 0.35rem 0;
}

.calendar-legend-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.calendar-legend-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

/* Fixed sample column so the descriptions line up regardless of glyph kind.
   Matched to the real rows' width, not shrunk to fit: a legend that draws each
   mark smaller than you'll meet it isn't explaining the mark you'll see — and
   the streak milestone numeral in particular stops being readable. */
.calendar-legend-sample {
    flex: 0 0 510px;
    display: flex;
    align-items: center;
}

/* The axis sample belongs on this list too (PR #499 review): without it the
   date axis inherits .axis-svg's max-width: 60% and draws ~204px wide against
   the other samples' width — so the legend's own ticks would sit out of line
   with the legend's own rows, which is the drift #416's shared-primitive rule
   exists to prevent. */
.calendar-legend-sample .spark-svg,
.calendar-legend-sample .strip-svg,
.calendar-legend-sample .axis-svg {
    width: 510px;
    max-width: 510px;
}

.calendar-legend-desc {
    color: #495057;
}

/* Print Styles */
@media print {
    .symptom-calendar {
        page-break-inside: avoid;
    }

    .symptom-calendar table {
        font-size: 0.8rem;
    }

    /* Heights move WITH the width here, floors recomputed at 570px (PR #506
       review). Overriding width alone left each row type binding on its own
       fixed height instead — 1.235, 1.250 and 1.286 px per unit respectively —
       so printing the monthly view from a browser drew the three row types at
       three different scales and day N stopped lining up down the page. That
       predates #472 (it ran 1.294/1.300/1.286 before), but widening the
       viewport tripled the spread, and it is the same alignment invariant
       #471 rests on. Floors at 570px: 46.14 / 27.14 / 19.00. */
    .spark-svg,
    .strip-svg,
    .axis-svg {
        width: 570px;
        max-width: 570px;
    }

    .spark-svg { height: 47px; }
    .strip-svg { height: 28px; }
    .axis-svg { height: 20px; }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .symptom-calendar th,
    .symptom-calendar td {
        font-size: 0.8rem;
        padding: 0.35rem 0.4rem;
    }

    .symptom-name-column {
        min-width: 110px;
    }

    .spark-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .calendar-legend-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .calendar-legend-sample {
        flex-basis: auto;
    }

    .spark-svg,
    .strip-svg,
    .axis-svg {
        width: 100%;
        max-width: 100%;
    }

    /* The legend overrides above are more specific than the rule right here, so
       without a matching-specificity reset the samples keep their desktop width
       and push the page sideways on a phone (PR #506 review). Pre-existing at
       340px; #472 widening them to 510 is what made it plainly wrong. */
    .calendar-legend-sample .spark-svg,
    .calendar-legend-sample .strip-svg,
    .calendar-legend-sample .axis-svg {
        width: 100%;
        max-width: 100%;
    }
}