/* ReSiRai - arch odontogram.
   The arch geometry (gum, palate, mouth and tooth placement) is the original layout.
   The teeth themselves are painted in dental-graphic.css, which every view shares. */

.real-odontogram {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #dbe5f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #fafdff, #f4f8fc);
    box-shadow: inset 0 1px 0 #fff;
}

.real-odontogram svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 360px;
}

/* Gum, palate and mouth */
.jaw-gum {
    fill: url(#gum);
    stroke: #bd6d65;
    stroke-width: 3;
    filter: drop-shadow(0 5px 7px rgba(99, 45, 40, .18));
}

.jaw-palate {
    fill: #e9a094;
    stroke: #ca776d;
    stroke-width: 2;
}

.jaw-mouth {
    fill: #b85e58;
    opacity: .45;
}

.jaw-label {
    font: 700 18px Tahoma, Arial, sans-serif;
    fill: #8a4d48;
    text-anchor: middle;
}

/* Clickable teeth */
.arch-tooth { cursor: pointer; }

.arch-tooth-number {
    font: 700 15px Arial, sans-serif;
    fill: #26384c;
    text-anchor: middle;
    pointer-events: none;
}

.arch-tooth.selected .arch-tooth-number { fill: #0069cf; }

/* The grouped rows are hidden while the arch is showing. */
.teeth-view-arch .teeth-chart-body > .teeth-chart-group { display: none; }
.teeth-integrated-arch { display: none; }
.teeth-view-arch .teeth-integrated-arch { display: block; }
.teeth-view-linear .teeth-integrated-arch,
.teeth-view-anatomical .teeth-integrated-arch { display: none; }

@media (max-width: 700px) {
    .real-odontogram { padding: 4px; overflow: auto; }
    .real-odontogram svg { min-width: 650px; min-height: 0; }
}