/* Odontogram v5 (js/odontogram.js) — 2026-09-24. Renkler uygulama tema değişkenlerinden gelir;
   klinik işaret renkleri (çürük kırmızı, dolgu mavi…) iki temada da işlevsel olarak korunur. */
.odo { width: 100%; max-width: 1560px; margin: 0 auto; color: var(--ink); font-size: 13px; line-height: 1.5; }
.odo * { box-sizing: border-box; }
.odo button, .odo input, .odo select { font: inherit; }
.odo h2 { font-family: var(--font-head, inherit); font-size: 21px; letter-spacing: -.4px; margin: 0; font-weight: 650; }
.odo h3 { font-size: 14px; margin: 0; font-weight: 650; }
.odo .o-muted { color: var(--muted); font-size: 11.5px; }
.odo .o-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.odo .o-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 2px 12px; }
.odo .o-pill { font-size: 10.5px; padding: 3px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--brand-2); white-space: nowrap; }
.odo .o-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; background: var(--surface); }
.odo .o-seg button { border: 0; background: transparent; padding: 6px 11px; color: var(--ink-2); cursor: pointer; font-size: 12.5px; }
.odo .o-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.odo .o-tgl { border: 1px solid var(--line-2); background: var(--surface); border-radius: 9px; padding: 6px 10px; color: var(--ink); cursor: pointer; font-size: 12px; }
.odo .o-tgl:hover { background: var(--surface-2); }
.odo .o-tgl[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--brand); color: var(--ink); font-weight: 600; }
.odo .o-tgl:disabled { opacity: .5; cursor: default; }
.odo button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.odo .o-voice { margin: 0 0 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.odo .o-voice-main { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.odo .o-mic.live { animation: odoPulse 1.2s ease-in-out infinite; }
@keyframes odoPulse { 50% { box-shadow: 0 0 0 6px rgba(14,148,136,.18); } }
.odo .o-command { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px; color: var(--ink); background: var(--surface-2); }
.odo .o-examples { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.odo .o-example { border: 0; background: var(--surface-2); border-radius: 6px; color: var(--ink-2); font-size: 11.5px; padding: 4px 8px; cursor: pointer; }
.odo .o-example:hover { background: var(--accent-soft); }
.odo .o-feedback { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.odo .o-feedback:empty { display: none; }
.odo .o-feedback.o-error { color: var(--danger); }
.odo .o-draft { background: var(--accent-soft); border: 1px solid var(--line-2); padding: 10px; border-radius: 9px; margin-top: 9px; }
.odo .o-draft-item { margin-bottom: 7px; font-size: 12.5px; }

.odo .o-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.odo .o-left { min-width: 0; }
.odo .o-chart, .odo .o-inspector, .odo .o-log { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.odo .o-charttop { padding: 12px; border-bottom: 1px solid var(--line); }
.odo .o-statussel { width: auto; padding: 4px 8px; font-size: 12px; }
.odo .o-tools { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.odo .o-toolhint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.odo .o-arches { padding: 12px 8px; }
.odo .o-jawtitle { display: flex; justify-content: space-between; margin: 1px 5px 8px; color: var(--muted); font-size: 10.5px; letter-spacing: .04em; }
.odo .o-jaw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.odo .o-quadrant { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 2px; min-width: 0; }
.odo .o-tooth { min-width: 0; position: relative; border-radius: 8px; padding: 2px 0; }
.odo .o-tooth[data-selected="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.odo .o-tooth[data-pending="true"] { background: rgba(214,138,4,.12); box-shadow: inset 0 0 0 1px #d68a04; }
.odo .o-toothpick { border: 0; background: transparent; padding: 0; width: 100%; display: flex; flex-direction: column; align-items: center; color: var(--ink-2); font-size: 11px; cursor: pointer; }
.odo .o-toothpick svg { width: 100%; height: 100px; max-width: 47px; overflow: visible; }
.odo .o-toothpick span { padding: 2px 0; font-weight: 600; }
.odo .o-mini { display: block; width: 100%; height: 32px; overflow: visible; }
.odo .o-mini path { cursor: pointer; }
.odo .o-midline { margin: 12px 4px; border-top: 1px solid var(--line); }
.odo .o-bridgeband { height: 10px; width: 100%; border-top: 3px solid #b49146; position: absolute; top: 30px; pointer-events: none; }
.odo .o-bridgeband small { font-size: 8px; background: #fff8e8; color: #8c6c2f; padding: 0 2px; border-radius: 2px; }
.odo .o-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 11px 13px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }
.odo .o-legend span { display: inline-flex; gap: 4px; align-items: center; }
.odo .o-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.odo .o-inspector { padding: 15px; align-self: start; min-width: 0; position: sticky; top: 0; }
.odo .o-selected { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.odo .o-n { font-size: 24px; font-weight: 650; letter-spacing: -.8px; }
.odo .o-anatomy { height: 170px; display: flex; justify-content: center; background: radial-gradient(ellipse, var(--accent-soft), transparent 72%); margin: 6px 0; }
.odo .o-anatomy svg { height: 170px; width: 130px; overflow: visible; }
.odo .o-rootpath, .odo .o-anatomy .o-canalpath { cursor: pointer; }
.odo .o-subhead { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; margin: 10px 0 7px; }
.odo .o-detailtabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 9px; gap: 12px; flex-wrap: wrap; }
.odo .o-detailtabs button { border: 0; border-bottom: 2px solid transparent; padding: 7px 0; background: transparent; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.odo .o-detailtabs button[aria-pressed="true"] { border-bottom-color: var(--brand); color: var(--ink); font-weight: 600; }
.odo .o-surfacepicker { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin: 8px auto; width: 230px; max-width: 100%; }
.odo .o-surfacepicker button { min-height: 38px; padding: 5px; font-size: 12px; }
.odo .o-surfacepicker small { display: block; font-size: 9.5px; color: var(--muted); font-weight: 400; }
.odo .o-partchips { display: flex; gap: 5px; flex-wrap: wrap; }
.odo .o-field { display: block; margin: 10px 0 3px; font-size: 11.5px; color: var(--muted); }
.odo .o-inspector select, .odo .o-inspector input { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 8px; background: var(--surface); color: var(--ink); }
.odo .o-formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.odo .o-apply { width: 100%; margin-top: 12px; }
.odo .o-livehint { font-size: 11.5px; margin: 8px 0; color: var(--muted); }
.odo .o-localrecords { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px; font-size: 12px; }
.odo .o-localrecords div { margin: 5px 0; }
.odo .o-bridgeedit { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.odo .o-bridgeedit label { font-size: 11.5px; flex: 1; min-width: 70px; }
.odo .o-bridgeedit select { padding: 5px; font-size: 11px; }

.odo .o-log { margin-top: 12px; padding: 12px; }
.odo .o-loghead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.odo .o-record { display: grid; grid-template-columns: 52px 1fr auto; align-items: start; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.odo .o-record:last-child { border: 0; }
.odo .o-rtooth { font-size: 13px; }
.odo .o-racts { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.odo .o-racts button { border: 0; background: transparent; color: var(--muted); font-size: 11.5px; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.odo .o-racts button:hover { background: var(--surface-2); color: var(--ink); }
.odo .o-lot { margin-top: 4px; font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 3px 7px; display: inline-block; }
.odo .o-lot-miss { color: #a86a00; background: rgba(214,138,4,.12); }
.odo .o-st { font-size: 10.5px; padding: 1px 7px; border-radius: 10px; margin-left: 4px; background: var(--surface-2); color: var(--ink-2); }
.odo .o-st-planned { background: rgba(214,138,4,.14); color: #a86a00; }
.odo .o-st-progress { background: rgba(43,138,194,.14); color: #2274a8; }
.odo .o-st-completed { background: rgba(22,160,129,.14); color: #0f8f72; }

/* tam ekran katmanında şema kendi içinde kayar */
.chart-fs-body > #chart-host { flex: 1; min-width: 0; overflow: auto; }

@media (max-width: 900px) {
  .odo .o-main { grid-template-columns: 1fr; }
  .odo .o-inspector { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .odo .o-inspector > .o-selected, .odo .o-inspector > .o-detailtabs, .odo .o-inspector > .o-editor, .odo .o-inspector > .o-localrecords { grid-column: 2; }
  .odo .o-inspector > .o-selected { grid-row: 1; }
  .odo .o-anatomy { grid-column: 1; grid-row: 1 / 5; height: 230px; align-self: center; }
  .odo .o-anatomy svg { height: 230px; width: 160px; }
}
@media (max-width: 520px) {
  .odo .o-jaw { grid-template-columns: 1fr; gap: 13px; }
  .odo .o-quadrant { gap: 4px; }
  .odo .o-inspector { display: block; }
  .odo .o-anatomy { height: 170px; }
  .odo .o-anatomy svg { height: 170px; }
  .odo .o-command { min-width: 100%; font-size: 16px; }
  .odo .o-record { grid-template-columns: 44px 1fr; }
  .odo .o-racts { grid-column: 2; justify-content: flex-start; }
  .odo .o-toothpick svg { height: 92px; }
  .odo .o-mini { height: 36px; }
}
html[data-theme="dark"] .odo .o-st-planned { color: #e0b25c; }
html[data-theme="dark"] .odo .o-st-progress { color: #8cc3e6; }
html[data-theme="dark"] .odo .o-st-completed { color: #7fd1b8; }
@media print { .odo .o-tooth { break-inside: avoid; } }