/* Kříž dentální hygieny (patients/_hygiene_chart.latte, hygiene-chart.js) */

.hc {
    --hc-line: #c9ced4;
    --hc-line-strong: #9aa1a9;
    --hc-num: #a3a9b0;
    --hc-crown-fill: #f8c9de;
    --hc-crown-line: #d02f86;
    --hc-implant-fill: #b9bdc3;
    --hc-implant-line: #8b9198;
    --hc-muted: #6c757d;
    --hc-color: #1f2328;
}

/* Horní lišta: Kříž | Historie a výstupy pro pacienta */
.hc-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}
.hc-switch { display: inline-flex; border: 1px solid #ced4da; border-radius: 4px; overflow: hidden; }
.hc-switch button {
    border: 0;
    background: #fff;
    padding: .4rem .9rem;
    font: inherit;
    color: #212529;
    cursor: pointer;
}
.hc-switch button + button { border-left: 1px solid #ced4da; }
.hc-switch button.active { background: #e9ecef; font-weight: 600; }
.hc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hc-btn-plain {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
    font-weight: 400;
}
.hc-btn-plain:hover { background: #f1f3f5; color: #212529; }
.hc-recall { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .25rem 0 0; font-size: .8125rem; color: var(--hc-muted); }
.hc-recall input { width: 9.5rem; }

/* Bílá plocha s krokovačem a křížem */
.hc-card {
    position: relative;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    padding: .75rem 1rem 1rem;
}
.hc-stepper-row { display: flex; align-items: flex-start; gap: .5rem; }
.hc-stepper {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.hc-stepper::before {
    content: "";
    position: absolute;
    left: 2.2rem;
    right: 2.2rem;
    top: 15px;
    border-top: 2px dashed #d5d9de;
}
.hc-stepper li { position: relative; flex: 1; text-align: center; }
.hc-stepper button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    border: 0;
    background: none;
    padding: 0 .25rem;
    font: inherit;
    color: #8c939b;
    cursor: pointer;
}
.hc-dot {
    width: 14px;
    height: 14px;
    margin: 9px 0;
    border-radius: 50%;
    background: #c4c9cf;
    box-shadow: 0 0 0 4px #fff;
    transition: all .15s ease;
}
.hc-stepper button:hover .hc-dot { background: #9aa1a9; }
.hc-stepper button.active { color: var(--hc-step-color); font-weight: 700; }
.hc-stepper button.active .hc-dot {
    width: 32px;
    height: 32px;
    margin: 0;
    background: var(--hc-step-color);
}
.hc-step-label { font-size: .9375rem; line-height: 1.1; }
.hc-fullscreen {
    border: 0;
    background: none;
    color: #6c757d;
    font-size: 1.35rem;
    line-height: 1;
    padding: .25rem;
    cursor: pointer;
}
.hc-fullscreen:hover { color: #212529; }

.hc-stage { position: relative; margin-top: .25rem; }
.hc-svg { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; user-select: none; }
.hc-svg text { font-family: inherit; text-anchor: middle; }
.hc-svg [tabindex]:focus { outline: none; }
.hc-svg [tabindex]:focus-visible > rect,
.hc-svg [tabindex]:focus-visible > circle,
.hc-svg path[tabindex]:focus-visible,
.hc-svg polygon[tabindex]:focus-visible { stroke: #206bc4; stroke-width: 2.5; }

/* Zuby podle stavu */
.hc-outline { fill: #fff; stroke: var(--hc-line); stroke-width: 1.6; }
.hc-groove { fill: none; stroke: #e1e4e8; stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
.hc-missing .hc-outline { fill: transparent; stroke: #cfd3d8; stroke-dasharray: 2 4; stroke-linecap: round; }
.hc-crown .hc-outline { fill: var(--hc-crown-fill); stroke: var(--hc-crown-line); }
.hc-pontic .hc-outline { fill: transparent; stroke: var(--hc-crown-line); stroke-dasharray: 2 4; stroke-linecap: round; stroke-width: 1.8; }
.hc-implant .hc-outline { fill: var(--hc-implant-fill); stroke: var(--hc-implant-line); }
.hc-step-status.hc-editable .hc-outline { cursor: pointer; }
.hc-step-status.hc-editable .hc-tooth:hover .hc-outline { stroke: #6c757d; }
.hc-step-cpi.hc-editable .hc-tooth:not(.hc-off) .hc-outline { cursor: pointer; }
.hc-step-cpi .hc-tooth:not(.hc-off):hover .hc-outline { stroke: var(--hc-color); }
.hc-step-pi .hc-off, .hc-step-bop .hc-off, .hc-step-cpi .hc-off { opacity: .8; }

/* PI a BOP: čtyři výseče */
.hc-wedge { fill: #fff; fill-opacity: 0; }
.hc-editable .hc-wedge:not(.disabled) { cursor: pointer; }
.hc-editable .hc-wedge:not(.disabled):not(.on):hover { fill: var(--hc-color); fill-opacity: .18; }
.hc-wedge.on { fill-opacity: 1; }
.hc-wedge.disabled { fill: #eef0f2; fill-opacity: 1; }
.hc-divider { fill: none; stroke: #dde1e5; stroke-width: 1; pointer-events: none; }
.hc-outline-top { fill: none; stroke: var(--hc-line); stroke-width: 1.6; pointer-events: none; }
.hc-crown .hc-outline-top { stroke: var(--hc-crown-line); }
.hc-implant .hc-outline-top { stroke: var(--hc-implant-line); }
.hc-crown .hc-divider { stroke: #e9a9c8; }
.hc-implant .hc-divider { stroke: #9ca2a9; }
.hc-num { fill: var(--hc-num); font-size: 15px; }

/* CPI */
.hc-cpi-num { fill: #6b3a28; font-size: 17px; font-weight: 700; }
.hc-cpi-num.dark { fill: #fff; }
.hc-sextant circle { fill: #fff; stroke: #d9b7aa; stroke-width: 1.5; stroke-dasharray: 3 3; }
.hc-sextant circle.on { stroke: #b8573e; stroke-dasharray: none; }
.hc-sextant-text { font-size: 14px; font-weight: 700; fill: #6b3a28; pointer-events: none; }
.hc-sextant-text.dark { fill: #fff; }
.hc-sextant-text.empty { font-size: 10px; font-weight: 400; fill: #b0958b; }
.hc-sextant-grid { font-size: 14px; fill: #6b3a28; font-weight: 600; }
.hc-grid-line { stroke: #e2cfc8; }

/* Mezizubní prostory: papily, aproximální plochy, pomůcky */
.hc-space { cursor: default; }
.hc-editable .hc-space { cursor: pointer; }
.hc-papilla { fill: #fff; stroke: #e0a39b; stroke-width: 1.5; }
.hc-papilla.empty { stroke: #d5d9de; stroke-dasharray: 2 3; }
.hc-editable .hc-space:hover .hc-papilla { stroke: #d1301f; }
.hc-papilla-text { font-size: 13px; font-weight: 700; fill: #8a1c10; pointer-events: none; }
.hc-papilla-text.dark { fill: #fff; }
.hc-approx { fill: #fff; stroke: #e7b3cf; stroke-width: 1.5; }
.hc-editable .hc-space:hover .hc-approx:not(.on) { fill: #f8e1ee; }
.hc-hit { fill: transparent; }
.hc-ring { fill: #fff; stroke: #d5d9de; stroke-width: 2; }
.hc-ring.on { stroke-width: 5; }
.hc-ring.floss { stroke: #1aa3b8; stroke-dasharray: 3 2; stroke-width: 3; }
.hc-editable .hc-space-aids:hover .hc-ring:not(.on),
.hc-space-aids.open .hc-ring:not(.on) { stroke: #1aa3b8; }
.hc-space-aids.open .hc-ring { filter: drop-shadow(0 0 3px rgba(26, 163, 184, .8)); }
.hc-floss-dot { fill: #1aa3b8; pointer-events: none; }

/* Střed kříže */
.hc-center-title { font-size: 26px; font-weight: 700; }
.hc-ring-track { fill: none; stroke: #eef0f2; stroke-width: 10; }
.hc-ring-value { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .2s ease; }
.hc-ring-text { font-size: 30px; font-weight: 700; }
.hc-hint { font-size: 15px; fill: #868e96; }
.hc-hint.small { font-size: 12px; }
.hc-hint.aids { font-size: 17px; fill: #1a8a9c; }
.hc-btn rect { fill: #fff; stroke: #ced4da; stroke-width: 1.2; }
.hc-btn text { font-size: 14px; fill: #343a40; pointer-events: none; }
.hc-btn:not(.disabled) { cursor: pointer; }
.hc-btn:not(.disabled):hover rect { fill: #f1f3f5; stroke: #adb5bd; }
.hc-btn.disabled rect { fill: #f8f9fa; stroke: #e5e7ea; }
.hc-btn.disabled text { fill: #b5bbc1; }
.hc-seg { cursor: pointer; }
.hc-seg rect { fill: #fff; stroke: #ced4da; stroke-width: 1.2; }
.hc-seg text { font-size: 14px; fill: #495057; pointer-events: none; }
.hc-seg.on text { fill: #fff; font-weight: 700; }
.hc-seg:not(.on):hover rect { fill: #f1f3f5; }
.hc-link { cursor: pointer; }
.hc-link text { font-size: 14px; fill: #206bc4; text-decoration: underline; pointer-events: none; }
.hc-link:hover text { fill: #1a569d; }
.hc-svg:not(.hc-editable) .hc-btn,
.hc-svg:not(.hc-editable) .hc-seg,
.hc-svg:not(.hc-editable) .hc-link { display: none; }

/* Výběr pomůcky */
.hc-picker {
    position: absolute;
    z-index: 20;
    width: min(40rem, calc(100% - 8px));
    max-height: 34rem;
    overflow: auto;
    background: #fff;
    border: 1px solid #d5d9de;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    font-size: .875rem;
}
.hc-picker-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    background: #fff;
    border-bottom: 1px solid #eef0f2;
}
.hc-picker-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0 1rem;
    padding: .25rem .75rem .5rem;
}
.hc-picker-group { margin-top: .5rem; }
.hc-picker-title { font-size: .75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .25rem; }
.hc-picker-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.hc-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .45rem .15rem .25rem;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #fff;
    font-size: .8125rem;
    color: #343a40;
    cursor: pointer;
}
.hc-chip:hover { border-color: #1aa3b8; }
.hc-chip.active { border-color: #1aa3b8; background: #e3f5f8; font-weight: 600; }
.hc-chip-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); flex: none; }
.hc-picker-extra label { display: inline-flex; align-items: center; gap: .3rem; margin-right: .75rem; cursor: pointer; }
.hc-picker-extra input { width: 1rem; height: 1rem; accent-color: #1aa3b8; }
.hc-picker-extra {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .5rem .75rem;
    background: #fff;
    border-top: 1px solid #eef0f2;
}

/* Pod křížem */
.hc-aids-list { max-width: 1000px; margin: .25rem auto 0; }
.hc-aids { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .875rem; }
.hc-aids li { display: block; }
.hc-aids-dot { display: inline-block; width: 16px; height: 16px; margin-right: .5rem; vertical-align: -3px; border-radius: 50%; border: 4px solid #ced4da; }
.hc-aids-dot.floss { border: 2px dashed #1aa3b8; }
.hc-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.4rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: #495057;
}
.hc-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.hc-legend svg { width: 24px; height: 18px; }
.lg-missing { fill: none; stroke: #c4c9cf; stroke-width: 1.5; stroke-dasharray: 2 3; }
.lg-crown { fill: #f8c9de; stroke: #d02f86; stroke-width: 1.5; }
.lg-pontic { fill: none; stroke: #d02f86; stroke-width: 1.5; stroke-dasharray: 2 3; }
.lg-implant { fill: #b9bdc3; stroke: #8b9198; stroke-width: 1.5; }
.lg-present { fill: #fff; stroke: #b6bcc3; stroke-width: 1.5; }
.hc-note { max-width: 1000px; margin: .75rem auto 0; }
.hc-note summary { cursor: pointer; color: #495057; font-weight: 600; font-size: .9375rem; }
.hc-note textarea { margin-top: .5rem; }
.hc-save { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.hc-dirty { color: #d63939; font-size: .875rem; font-weight: 600; }

/* Celá obrazovka */
.hc-card.hc-full {
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow: auto;
    border: 0;
    border-radius: 0;
    padding: 1rem 2rem;
}
.hc-card.hc-full .hc-svg { max-width: none; max-height: calc(100vh - 9rem); width: auto; }
.hc-card:fullscreen { background: #fff; }

/* Historie */
.hc-info { background: #d9eef6; border-color: #c4e3ee; color: #1e5a73; }
.hc-history { display: block; width: 100%; height: auto; }
.hc-history text { font-family: inherit; }
.hc-gridline { stroke: #e9ecef; }
.hc-axis { stroke: #343a40; }
.hc-axis-label { font-size: 12px; fill: #495057; text-anchor: middle; }
.hc-axis-label.sel { font-weight: 700; fill: #212529; }
.hc-series-line { fill: none; stroke-width: 2; }
.hc-point { cursor: pointer; }
.hc-point:hover { stroke-width: 3; stroke: #212529 !important; }
.hc-selected-line { stroke: #adb5bd; stroke-dasharray: 4 3; }
.hc-history-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.75rem;
    margin: .5rem 0;
    padding: 0;
    list-style: none;
    font-size: 1.05rem;
    color: #343a40;
}
.hc-history-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.hc-history-legend svg { width: 40px; height: 14px; }
.hc-compare { max-width: 640px; margin: .5rem auto 0; }
.hc-trend-lepsi { color: #2f9e44; font-weight: 600; }
.hc-trend-horsi { color: #d63939; font-weight: 600; }

@media (max-width: 575.98px) {
    .hc-card { padding: .5rem; }
    /* Na telefonu by byly zuby moc malé na klikání: kříž se posouvá do strany. */
    .hc-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hc-svg { min-width: 640px; }
    .hc-step-label { font-size: .75rem; }
    .hc-stepper button.active .hc-dot { width: 24px; height: 24px; margin: 4px 0; }
    .hc-stepper::before { left: 1rem; right: 1rem; }
    .hc-recall span { display: none; }
}

@media print {
    .hc-top, .hc-save, .hc-fullscreen { display: none !important; }
}