/* Parodontologický kříž (perio-chart.js).
   Grafický kříž (pg-*): bílá plocha, čárkované obrysy kořenů, mřížka 0 až 16 mm
   od krčku, purpurové nulové čáry a okluzní prstence s hodnotami.
   Tabulka (pc-*): rychlé zadávání po řádcích jako na papírovém formuláři. */

.perio-chart {
    --pc-ppd: #1d4ed8;
    --pc-rec: #dc2626;
    --pc-bop: #e03131;
    --pc-pl: #1c7ed6;
    --pc-pus: #f2b705;
    --pc-fur: #6741d9;
    --pc-cej: #c45bb4;
    --pc-axis: #b7bdf3;
    --pc-band-1: #ffe066;
    --pc-band-2: #ffa94d;
    --pc-band-3: #ff6b6b;
    --pc-outline: #6b6f7a;
}

/* --- lišta nad křížem --------------------------------------------------- */
.perio-chart .pc-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: .5rem 1rem; margin-bottom: .5rem;
}
.perio-chart .pc-toolbar-spacer { flex: 1 1 auto; }
.perio-chart .pc-modes { display: inline-flex; border: 1px solid #c9ccd3; border-radius: 3px; overflow: hidden; }
.perio-chart .pc-mode {
    border: 0; background: #fff; padding: .4rem .9rem; font-size: .875rem; color: #212529; cursor: pointer;
}
.perio-chart .pc-mode + .pc-mode { border-left: 1px solid #c9ccd3; }
.perio-chart .pc-mode.is-active { background: #e2e3e6; font-weight: 500; }
.perio-chart .pc-mode:focus-visible { outline: 2px solid #1c58d0; outline-offset: -2px; }
.perio-chart .pc-history { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .8125rem; }
.perio-chart .pc-history[hidden], .perio-chart .pc-compare[hidden] { display: none; }
.perio-chart .pc-history-label { color: #6c757d; }
.perio-chart .pc-history select { min-width: min(15rem, 60vw); max-width: 100%; }
.perio-chart .pc-compare, .perio-chart .pc-auto { font-size: .8125rem; }
.perio-chart .pc-menu-btn {
    width: 34px; height: 34px; border: 0; border-radius: 2px; background: #e9eaed; color: #212529;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer;
}
.perio-chart .pc-menu-btn:hover { background: #dcdde1; }
.perio-chart .pc-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem;
    padding: .45rem .75rem; border-radius: 4px; background: #fff8e1; border: 1px solid #ffe08a; font-size: .875rem;
}
.perio-chart .pc-banner[hidden] { display: none; }

/* --- grafický kříž ------------------------------------------------------ */
.perio-chart .pg-frame {
    border: 1px dotted #b9bcc4; background: #fff; padding: 2px 0; overflow-x: auto;
}
.perio-chart .pg-svg {
    display: block; width: 100%; min-width: 760px; height: auto;
    font-family: inherit; user-select: none; -webkit-user-select: none;
}
.perio-chart .pg-grid { stroke: #dcdde2; stroke-width: .6; }
.perio-chart .pg-scale { font-size: 7px; fill: #3d4048; }
.perio-chart .pg-cej { stroke: var(--pc-cej); stroke-width: 1.1; opacity: .85; }
.perio-chart .pg-axis { stroke: var(--pc-axis); stroke-width: .9; }
.perio-chart .pg-num { font-size: 12px; font-weight: 700; fill: #111; }
.perio-chart .pg-col { cursor: pointer; outline: none; }
.perio-chart .pg-hit { fill: transparent; }
.perio-chart .pg-col:hover .pg-hit { fill: rgba(28, 126, 214, .045); }
.perio-chart .pg-col.is-active .pg-hit { fill: rgba(28, 126, 214, .08); }
.perio-chart .pg-bracket { fill: none; stroke: #e03131; stroke-width: 1.6; opacity: 0; }
.perio-chart .pg-col:hover .pg-bracket,
.perio-chart .pg-col:focus-visible .pg-bracket,
.perio-chart .pg-col.is-active .pg-bracket { opacity: 1; }
.perio-chart .pg-col:focus-visible .pg-hit { fill: rgba(28, 126, 214, .08); }
.perio-chart .pg-root {
    fill: none; stroke: var(--pc-outline); stroke-width: .9; stroke-dasharray: 3.2 2.2; stroke-linecap: round;
}
.perio-chart .pg-implant { fill: #eef0f3; stroke: #5c626e; stroke-width: .9; }
.perio-chart .pg-implant-thread { stroke: #5c626e; stroke-width: .7; }
.perio-chart .pg-col.is-missing .pg-num { fill: #a3a8b3; }
.perio-chart .pg-missing-bg { fill: #eef0f3; }

.perio-chart .pg-ring-outer { fill: #fff; stroke: #4a4d55; stroke-width: .9; }
.perio-chart .pg-ring-inner { fill: #fff; stroke: #4a4d55; stroke-width: .8; }
.perio-chart .pg-ring.is-missing .pg-ring-outer { fill: #e3e5e9; stroke: #b2b6bf; }
.perio-chart .pg-ring.is-missing .pg-ring-inner { fill: #eceef1; stroke: #c3c7cf; }
.perio-chart .pg-bridge { fill: #868e96; }
.perio-chart .pg-val { font-size: 9.5px; font-weight: 600; fill: #1d2330; font-variant-numeric: tabular-nums; }
.perio-chart .pg-val-bg.pg-band-1 { fill: var(--pc-band-1); }
.perio-chart .pg-val-bg.pg-band-2 { fill: var(--pc-band-2); }
.perio-chart .pg-val-bg.pg-band-3 { fill: var(--pc-band-3); }
.perio-chart .pg-pl { fill: var(--pc-pl); }
.perio-chart .pg-pbi { font-size: 9px; font-weight: 700; fill: #c92a2a; }
.perio-chart .pg-mob { font-size: 8.5px; font-weight: 700; fill: #5f3dc4; letter-spacing: -.2px; }

.perio-chart .pg-pocket { stroke: none; }
.perio-chart .pg-pocket.pg-band-1 { fill: var(--pc-band-1); opacity: .8; }
.perio-chart .pg-pocket.pg-band-2 { fill: var(--pc-band-2); opacity: .85; }
.perio-chart .pg-pocket.pg-band-3 { fill: var(--pc-band-3); opacity: .85; }
.perio-chart .pg-line-margin { fill: none; stroke: #d6336c; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.perio-chart .pg-line-bottom { fill: none; stroke: #1c7ed6; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.perio-chart .pg-prev { fill: none; stroke: #8f96a3; stroke-width: 1.1; stroke-dasharray: 2.5 2; opacity: .75; }
.perio-chart .pg-bop { fill: var(--pc-bop); stroke: #fff; stroke-width: .6; }
.perio-chart .pg-pus { fill: var(--pc-pus); stroke: #8a6100; stroke-width: .6; }
.perio-chart .pg-furc-outline { fill: #fff; stroke: var(--pc-fur); stroke-width: 1; stroke-linejoin: round; }
.perio-chart .pg-furc-fill, .perio-chart .pg-furc-3 .pg-furc-outline { fill: var(--pc-fur); }

/* --- souhrn a legenda ----------------------------------------------------- */
.perio-chart .pc-stats { display: block; margin: .6rem 0 .5rem; }
.perio-chart .pc-indices {
    display: flex; flex-wrap: wrap; gap: .25rem 2rem; font-weight: 600; font-size: .9375rem;
    margin-bottom: .45rem; font-variant-numeric: tabular-nums; white-space: pre;
}
.perio-chart .pc-stats-grid { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.perio-chart .pc-stat-label { font-size: .75rem; color: #6c757d; }
.perio-chart .pc-stat-value { font-weight: 650; font-size: 1rem; }
.perio-chart .pc-stat-prev { font-size: .72rem; color: #8f96a3; }
.perio-chart .pc-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8125rem; color: #495057; }
.perio-chart .pc-legend .chip {
    display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; vertical-align: -2px; border: 1px solid transparent;
}
.perio-chart .chip-cej { height: 2px !important; border-radius: 0 !important; vertical-align: 3px !important; background: var(--pc-cej); }
.perio-chart .chip-margin { height: 2px !important; border-radius: 0 !important; vertical-align: 3px !important; background: #d6336c; }
.perio-chart .chip-bottom { height: 2px !important; border-radius: 0 !important; vertical-align: 3px !important; background: #1c7ed6; }
.perio-chart .chip-prev { height: 0 !important; border-radius: 0 !important; vertical-align: 3px !important; border-top: 2px dashed #8f96a3 !important; }
.perio-chart .chip-band-1 { background: var(--pc-band-1); }
.perio-chart .chip-band-2 { background: var(--pc-band-2); }
.perio-chart .chip-band-3 { background: var(--pc-band-3); }
.perio-chart .chip-bop { background: var(--pc-bop); border-radius: 50% !important; }
.perio-chart .chip-pus { background: var(--pc-pus); border-color: #8a6100 !important; border-radius: 50% !important; }
.perio-chart .chip-pl { background: var(--pc-pl); height: .3rem !important; vertical-align: 2px !important; }
.perio-chart .chip-furc { background: linear-gradient(135deg, #fff 50%, var(--pc-fur) 50%); border-color: var(--pc-fur) !important; }
.perio-chart .chip-text { font-size: .8rem; }
.perio-chart .chip-pbi { color: #c92a2a; }
.perio-chart .chip-mob { color: #5f3dc4; }
.perio-chart .pc-legend-prev { display: none; }
.perio-chart[data-mode="graph"] .pc-legend-prev { display: inline; }
.perio-chart[data-mode="table"] .pc-help { display: none; }
.perio-chart .pc-help-table { display: none; }
.perio-chart[data-mode="table"] .pc-help-table { display: block; }
.perio-chart .pc-save { margin-top: .75rem; }
.perio-chart .pc-save[hidden] { display: none; }
.perio-chart .pc-save form { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.perio-chart .pc-dirty { font-size: .8125rem; color: #b35c00; font-weight: 500; }
.perio-chart .pc-dirty[hidden] { display: none; }
.perio-chart .pc-print-head { display: none; }

/* --- okno zubu („Lokalizace: 16“) ------------------------------------------ */
.pg-dialog {
    border: 0; padding: 0; border-radius: 6px; width: min(640px, calc(100vw - 32px));
    box-shadow: 0 18px 48px rgba(16, 24, 40, .28); color: #1d2330;
}
.pg-dialog::backdrop { background: rgba(20, 24, 33, .45); }
.pg-dlg-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem .5rem; }
.pg-dlg-title { font-size: 1.15rem; font-weight: 600; margin: 0; }
.pg-dlg-tabs { display: flex; gap: .25rem; padding: 0 1.1rem; border-bottom: 1px solid #e3e5ea; }
.pg-dlg-tab {
    border: 0; background: transparent; padding: .5rem .8rem; font-size: .9rem; color: #495057;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.pg-dlg-tab.is-active { color: #1d2330; font-weight: 600; border-bottom-color: #e03131; }
.pg-dlg-tab:focus-visible { outline: 2px solid #1c58d0; outline-offset: -2px; }
.pg-dlg-body { padding: .9rem 1.1rem; min-height: 452px; }
.pg-dlg-pane[hidden] { display: none; }
.pg-dlg-foot {
    display: flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-top: 1px solid #e3e5ea; background: #f8f9fa;
    border-radius: 0 0 6px 6px;
}
.pg-dlg-spacer { flex: 1 1 auto; }
.pg-dlg-help { font-size: .78rem; color: #6c757d; margin: .75rem 0 0; }
.pg-field { display: grid; grid-template-columns: 11.5rem 1fr; align-items: center; gap: .25rem .75rem; margin-bottom: .7rem; }
.pg-field-label { font-size: .875rem; font-weight: 500; }
.pg-field-hint { grid-column: 2; font-size: .75rem; color: #6c757d; }
.pg-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid #c9ccd3; border-radius: 4px; overflow: hidden; width: max-content; }
.pg-seg-btn {
    min-width: 2.3rem; border: 0; background: #fff; padding: .3rem .6rem; font-size: .875rem; cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.pg-seg-btn + .pg-seg-btn { border-left: 1px solid #c9ccd3; }
.pg-seg-btn.is-on { background: #343a40; color: #fff; font-weight: 600; }
.pg-seg-btn:disabled { color: #adb5bd; cursor: default; }
.pg-seg-btn.is-on:disabled { background: #868e96; color: #fff; }
.pg-seg-btn:focus-visible { outline: 2px solid #1c58d0; outline-offset: -2px; position: relative; z-index: 1; }
.pg-check { display: flex; align-items: center; gap: .4rem; font-size: .875rem; margin: -.2rem 0 .8rem 12.25rem; }
.pg-meas { border-collapse: collapse; width: 100%; font-size: .85rem; table-layout: fixed; }
.pg-meas th, .pg-meas td { border: 1px solid #e3e5ea; text-align: center; padding: 0; height: 30px; }
.pg-meas thead th { background: #f8f9fa; font-weight: 500; font-size: .78rem; color: #495057; height: 24px; }
.pg-meas .pg-meas-side { font-weight: 600; color: #1d2330; }
.pg-meas .pg-meas-label { text-align: left; padding: 0 .5rem; font-weight: 500; width: 6.5rem; background: #f8f9fa; }
.pg-meas thead th:first-child { width: 6.5rem; }
.pg-meas .pg-meas-split { border-right: 2px solid #adb5bd; }
.pg-meas thead tr:first-child th:nth-child(2) { border-right: 2px solid #adb5bd; }
.pg-meas thead tr:last-child th:nth-child(4) { border-right: 2px solid #adb5bd; }
.pg-mm {
    width: 100%; height: 30px; border: 0; background: transparent; text-align: center; font-size: .95rem;
    font-weight: 600; font-variant-numeric: tabular-nums; padding: 0;
}
.pg-mm:focus { outline: 2px solid #1c58d0; outline-offset: -2px; background: #e7f0ff; }
.pg-mm:disabled { background: #f1f3f5; }
.pg-meas td.pg-band-1 { background: #fff3bf; }
.pg-meas td.pg-band-2 { background: #ffd8a8; }
.pg-meas td.pg-band-3 { background: #ffc9c9; }
.pg-tgl { width: 100%; height: 30px; border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; }
.pg-tgl::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; border: 1px solid #c3c7cf; background: #fff;
}
.pg-tgl-bop.is-on::after { background: var(--pc-bop, #e03131); border-color: #c92a2a; }
.pg-tgl-pus.is-on::after { background: var(--pc-pus, #f2b705); border-color: #8a6100; }
.pg-tgl-pl.is-on::after { background: var(--pc-pl, #1c7ed6); border-color: #1864ab; border-radius: 2px; height: 6px; margin-top: -3px; }
.pg-tgl:disabled { cursor: default; background: #f1f3f5; }
.pg-tgl:focus-visible { outline: 2px solid #1c58d0; outline-offset: -2px; }
.pg-furc-fields { margin-top: .9rem; }
.pg-furc-fields .pg-field { margin-bottom: .45rem; }
.pg-dialog .pg-seg-btn, .pg-dialog .pg-tgl, .pg-dialog .pg-mm { --pc-bop: #e03131; --pc-pus: #f2b705; --pc-pl: #1c7ed6; }
@media (max-width: 575.98px) {
    .pg-field { grid-template-columns: 1fr; }
    .pg-field-hint { grid-column: 1; }
    .pg-check { margin-left: 0; }
    .pg-dlg-foot { flex-wrap: wrap; }
}

/* --- tabulka --------------------------------------------------------------- */
.perio-chart .pc-jaw { margin-bottom: 1rem; }
.perio-chart .pc-jaw-title { font-weight: 650; margin-bottom: .25rem; }
.perio-chart .pc-scroll { overflow-x: auto; }
.perio-chart .pc-grid { table-layout: fixed; width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; }
.perio-chart .pc-col-label { width: 112px; }
.perio-chart .pc-grid td, .perio-chart .pc-grid th { padding: 0; border: 1px solid #eef0f4; text-align: center; height: 22px; }
.perio-chart .pc-label { text-align: left !important; padding: 0 6px !important; font-weight: 500; color: #5a6478; white-space: nowrap; background: #fafbfc; }
.perio-chart .pc-row-head td { padding: 2px 0; background: #fafbfc; }
.perio-chart .pc-tooth-num {
    display: block; width: 100%; border: 0; background: transparent; font-weight: 700; font-size: 12px; padding: 0; cursor: pointer;
}
.perio-chart .pc-tooth-num:hover { text-decoration: underline; }
.perio-chart .pc-state, .perio-chart .pc-grade {
    width: 100%; max-width: 64px; font-size: 11px; padding: 0 2px; border: 1px solid #dfe3ea; border-radius: 4px; background: #fff;
}
.perio-chart .pc-site:nth-child(3n + 1) { border-right-color: #cfd5df; }
.perio-chart .pc-grid tr > *:nth-child(25) { border-right: 2px solid #98a1b3; }
.perio-chart .pc-row-head > td:nth-child(9),
.perio-chart .pc-row-mob > td:nth-child(9),
.perio-chart .pc-row-pbi > td:nth-child(9),
.perio-chart .pc-row-bridge > td:nth-child(9) { border-right: 2px solid #98a1b3; }
.perio-chart .pc-mm {
    width: 100%; height: 22px; border: 0; background: transparent; text-align: center;
    font-size: 12px; padding: 0; font-variant-numeric: tabular-nums;
}
.perio-chart .pc-mm:focus { outline: 2px solid #1c58d0; outline-offset: -2px; background: #e5edff; }
.perio-chart .pc-mm-ppd { color: var(--pc-ppd); font-weight: 600; }
.perio-chart .pc-mm-rec { color: var(--pc-rec); }
.perio-chart .pc-site.is-warn { background: #fff3bf; }
.perio-chart .pc-site.is-orange { background: #ffd8a8; }
.perio-chart .pc-site.is-deep { background: #ffc9c9; }
.perio-chart .pc-toggle {
    width: 100%; height: 20px; border: 0; background: transparent; padding: 0; cursor: pointer; position: relative;
}
.perio-chart .pc-toggle::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border-radius: 50%; border: 1px solid #cfd5df; background: #fff;
}
.perio-chart .pc-toggle-bop.is-on::after { background: var(--pc-bop); border-color: var(--pc-bop); }
.perio-chart .pc-toggle-pus.is-on::after { background: var(--pc-pus); border-color: #8a6100; }
.perio-chart .pc-toggle-pl.is-on::after { background: var(--pc-pl); border-color: var(--pc-pl); border-radius: 2px; }
.perio-chart .pc-toggle:focus-visible { outline: 2px solid #1c58d0; outline-offset: -2px; }
.perio-chart .pc-furc-cell.is-none { background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 3px, #f1f3f7 3px, #f1f3f7 6px); }
.perio-chart .pc-furc {
    width: 100%; height: 20px; border: 1px dashed #c4b5fd; background: #fff; border-radius: 3px;
    color: var(--pc-fur); font-weight: 700; font-size: 11px; padding: 0; cursor: pointer;
}
.perio-chart .pc-furc.is-on { background: #ede9fe; border-style: solid; border-color: var(--pc-fur); }
.perio-chart .pc-furc-legacy { color: var(--pc-fur); font-size: 10px; opacity: .7; }
.perio-chart .pc-grid .is-missing { background: #f1f3f7; }
.perio-chart .is-missing .pc-mm, .perio-chart .is-missing .pc-toggle, .perio-chart .is-missing .pc-furc { visibility: hidden; }
.perio-chart .pc-bridge { transform: scale(1.05); }
.perio-chart .pc-side-row .pc-label-side { font-size: 11px; color: #98a1b3; }
.perio-chart .pc-side-cell { height: 8px !important; background: #f6f7f9; }

/* --- tisk (⋮ > Tisk): kopie kříže pod <body>, bez ovládání ---------------- */
.pc-print-root { display: none; }
@media print {
    body.pc-printing { background: #fff !important; }
    body.pc-printing > *:not(.pc-print-root) { display: none !important; }
    body.pc-printing > .pc-print-root { display: block !important; margin: 0; padding: 0; }
    .pc-print-root .perio-chart .pc-print-head {
        display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: 11pt; margin-bottom: 6pt;
    }
    .pc-print-root .perio-chart .pc-toolbar,
    .pc-print-root .perio-chart .pc-banner,
    .pc-print-root .perio-chart .pc-save,
    .pc-print-root .perio-chart .pc-help,
    .pc-print-root .perio-chart .pc-help-table,
    .pc-print-root .perio-chart .pc-last,
    .pc-print-root .perio-chart .pg-bracket { display: none !important; }
    .pc-print-root .perio-chart .pg-frame { overflow: visible; border-color: #999; }
    .pc-print-root .perio-chart .pg-svg { min-width: 0; }
    .pc-print-root .perio-chart .pg-hit { fill: transparent !important; }
    .pc-print-root .perio-chart .pc-scroll { overflow: visible; }
    .pc-print-root .perio-chart .pc-grid { min-width: 0; font-size: 8px; }
    .pc-print-root .perio-chart .pc-grid select { appearance: none; -webkit-appearance: none; border: 0; }
    .pc-print-root, .pc-print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}