/* styles.css - clean layout and tooth diagram */
*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:#f6f7fb;
  margin:20px;
  color:#111;
  display:flex;
  justify-content:center;
}
.form-box{
        max-width: 1100px;
  display:flex;
  gap:30px;
  background:#CFECF7;
  padding:22px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(20,30,50,0.06);
}
.container{
  width:50%;
  
}
.container h6{
  width: 100%;
  background: #27AAE1;
  padding: 5px;
  margin: 10px 0px;
  font-size:16px;
  text-align: center;
  font-weight: 600;
  color:white;
}
img.form_img {
    width: auto;
}

h1{font-size:20px;margin:0 0 12px; text-align:center;}
h2{font-size:16px;margin:18px 0 8px;color:var(--muted)}
h3{font-size:16px; color:black}
.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
label{
  display:block;
  flex:1 1 220px;
  font-size:13px;
}
input[type="text"], input[type="date"], textarea, input {
  width:100%;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid #756d6d;
  font-size:13px;
}
textarea{min-height:90px; resize:vertical; padding:8px 10px;}

.form-actions{margin-top:12px; display:flex; gap:8px;}
.presc{
  font-size: 14px;
  color:#5c5858;
  margin: 5px 0px;
}
.check {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* space between Upper & Lower */
  margin-top: 10px;
  border-bottom: 2px solid black;
  padding-bottom: 5px;
}

.check label {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px; /* space between checkbox and text */
}
.border-line {
  border: none !important;
  border-bottom: 1px solid #756d6d !important;
  outline: none !important;
  border-radius: 0px !important;
  width: 200px !important; /* optional */
}


button{cursor:pointer}
#saveBtn{
  background: #27AAE1;
  border:none;
  color:white;
  padding:10px 14px;
  border-radius:8px;
  font-weight:600;
}
#clearBtn{
  background:transparent;
  border:1px solid #27AAE1;
  padding:10px 12px;
  border-radius:8px;
}

/* ─────────── NUMBER BAR ─────────── */
.teeth-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    font-family: sans-serif;
}

.side {
    width: 20px;
    text-align: center;
    font-weight: bold;
}

.numbers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 470px; /* adjust as needed */
}

.num {
    width: 30px;
    text-align: center;
    font-weight: bold;
}
.teeth-num{
  position: relative;
  margin-top:30px;
}
.divider-1 {
   position: absolute;
  content: "";
  top: -15px;
    left: 50%;
    width: 2px;
    background: #27AAE1;
    height: 70px;
}
.divider-2 {
  position: absolute;
  content: "";
  top: 20px;
  left: 5%;
  width: 470px;
  background: #27AAE1;
  height: 2px;
}
.side-r {
  position: absolute;
  content: "";
  top: 10px;
  left: 0%;
  font-weight: bold;
}
.side-l {
  position: absolute;
  content: "";
  top: 10px;
  left: 97%;
  font-weight: bold;
}


.teeth-number-row .nums{text-align:center;flex:1;}
.teeth-number-row.bottom{justify-content:space-around;margin-top:-6px;}

/* ─────────── LAYOUT ─────────── */
.teeth-diagram-wrapper{
    width:700px;
    margin:30px auto;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:50px;
}





.divider{
    width:2px;
    background:#000;
    height:260px;
}

.arch-block{text-align:center;}
.label-row{
    width:260px;
    margin:auto;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
}
.label-row .mid{font-size:17px;}

/* ─────────── TEETH STYLE ─────────── */
/* Tooth Shape */
.tooth{
    width:32px;height:45px;
    border:2px solid #000;
    background:#fff;
    cursor:pointer;
    position:absolute;
    border-radius:50% 50% 0 0;
    transition:.25s;
}
.tooth {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.tooth.selected,
.tooth.active {
    background-color: #2b7bed;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(43,123,237,0.7);
}




/* Container */
.teeth-wrap{
    width: 600px;
    margin:20px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    flex-direction: column;
}
.bar{
    width:2px;
    height:260px;
    background:#000;
}

.tooth-img {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.tooth-img.selected {
    box-shadow: 0 0 5px #2b7bed;
}




/* labels */
.title-row{
    width:260px;
    /* margin:auto; */
    display:flex;
    justify-content:space-between;
    font-weight:700;
    margin-bottom:10px;
}
.center{font-size:18px;}

/* UPPER PERFECT CURVE */
.arch.upper{
    width: 380px;
    /* height: 215px; */
    position: relative;
    margin-top: 160px;
    margin-bottom: 30px;
    /* margin-left: -150px; */
    }

.arch.upper .tooth:nth-child(1){transform:translate(0px,150px);}
.arch.upper .tooth:nth-child(2){transform:translate(0px,105px);}
.arch.upper .tooth:nth-child(3){transform:translate(0px,60px);}
.arch.upper .tooth:nth-child(4){transform:translate(0px,15px);}
.arch.upper .tooth:nth-child(5){transform:translate(0px,-29px);rotate: 23deg;}
.arch.upper .tooth:nth-child(6){transform: translate(-8px,-70px);rotate: 32deg;}
.arch.upper .tooth:nth-child(7){transform: translate(-25px,-110px);rotate: 44deg;}
.arch.upper .tooth:nth-child(8){transform: translate(-21px,-154px);rotate: 45deg;}
.arch.upper .tooth:nth-child(9){transform: translate(181px,25px);rotate: 310deg;}
.arch.upper .tooth:nth-child(10){transform: translate(187px,53px);rotate: 315deg;}
.arch.upper .tooth:nth-child(11){transform: translate(206px,35px);rotate: 333deg;}
.arch.upper .tooth:nth-child(12){transform: translate(212px,68px);rotate: 336deg;}
.arch.upper .tooth:nth-child(13){transform: translate(233px,18px);/* rotate: 348deg; */}
.arch.upper .tooth:nth-child(14){transform: translate(233px,62px);}
.arch.upper .tooth:nth-child(15){transform: translate(233px,106px);}
.arch.upper .tooth:nth-child(16){transform: translate(233px,150px);} /* LAST IS BOTTOM CORNER */

/* LOWER — REVERSED CURVE */
.arch.lower{    width: 380px;
    /* height: 215px; */
    position: relative;
    margin-top: 150px;
    margin-left: -150px;}
.arch.lower .tooth{border-radius:0 0 50% 50%;}

/* PERFECT MIRROR */
.arch.lower .tooth:nth-child(1){transform: translate(210px,215px);}
.arch.lower .tooth:nth-child(2){transform: translate(210px,171px);}
.arch.lower .tooth:nth-child(3){transform: translate(210px,127px);}
.arch.lower .tooth:nth-child(4){transform: translate(210px,83px);}
.arch.lower .tooth:nth-child(5){transform: translate(178px,110px);rotate: -21deg;}
.arch.lower .tooth:nth-child(6){transform: translate(158px,102px);rotate: -33deg;}
.arch.lower .tooth:nth-child(7){transform: translate(156px,61px);rotate: 326deg;}
.arch.lower .tooth:nth-child(8){transform: translate(144px,47px);rotate: 315deg;}
.arch.lower .tooth:nth-child(9){transform: translate(2px,-107px);rotate: 49deg;}
.arch.lower .tooth:nth-child(10){transform: translate(12px,-61px);rotate: 40deg;}
.arch.lower .tooth:nth-child(11){transform: translate(18px,-14px);rotate: 31deg;}
.arch.lower .tooth:nth-child(12){transform: translate(17px,36px);rotate: 16deg;}
.arch.lower .tooth:nth-child(13){transform: translate(0px,84px);}
.arch.lower .tooth:nth-child(14){transform: translate(0px,127px);}
.arch.lower .tooth:nth-child(15){transform: translate(0px,171px);}
.arch.lower .tooth:nth-child(16){transform: translate(0px,215px);}

.upper-1{transform: translate(-3px, 3px);}
.upper-2{transform: translate(-34px, -28px);}
.upper-3{transform: translate(-61px, -59px);}
.upper-4{transform: translate(-85px, -89px);}
.upper-5{transform: translate(-110px, -112px);}
.upper-6{transform: translate(-128px, -134px);}
.upper-7{transform: translate(-142px, -153px);}
.upper-8{transform: translate(-144px, -163px);}
.upper-9{transform: translate(-144px, -165px);}
.upper-10{transform: translate(-144px, -158px);}
.upper-11{transform: translate(-155px, -141px);}
.upper-12{transform: translate(207px, -154px);}
.upper-13{transform: translate(185px, -132px);}
.upper-14{transform: translate(160px, -100px);}
.upper-15{transform: translate(136px, -66px);}
.upper-16{transform: translate(110px, -36px);}

.lower-1{transform: translate(66px, -246px);}
.lower-2{transform: translate(37px, -216px);}
.lower-3{transform: translate(13px, -186px);}
.lower-4{transform: translate(-12px, -161px);}
.lower-5{transform: translate(-35px, -136px);}
.lower-6{transform: translate(-50px, -116px);}
.lower-7{transform: translate(-58px, -100px);}
.lower-8{transform: translate(-59px, -95px);}
.lower-9{transform: translate(-59px, -95px);}
.lower-10{transform: translate(-60px, -101px);}
.lower-11{transform: translate(-67px, -117px);}
.lower-12{transform: translate(295px, -174px);}
.lower-13{transform: translate(271px, -202px);}
.lower-14{transform: translate(245px, -228px);}
.lower-15{transform: translate(221px, -261px);}
.lower-16{transform: translate(195px, -292px);}

.tooth-img{
  width:30px;
}

.tooth:hover {
    transform: scale(1.15);
    z-index: 50;
    box-shadow: 0 0 10px rgba(43,123,237,0.5);
}




/* info panel */
#toothInfo{ width:260px; min-width:220px; border:1px solid #eee; border-radius:8px; padding:12px; background:#fff; box-shadow:0 6px 18px rgba(20,30,50,0.04); }
#toothInfo h3{ margin:0 0 8px; font-size:15px; }
#toothInfo textarea{ width:100%; min-height:90px; padding:8px; border-radius:6px; border:1px solid #ddd; }
#toothInfo button{ margin-right:8px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; cursor:pointer; }
.selected-list{ font-size:13px; color:#333; }
.selected-list .chip{ display:inline-block; padding:6px 8px; border-radius:18px; background:#f1f4ff; margin:4px 4px 0 0; border:1px solid rgba(43,123,237,0.06); font-weight:600; cursor:pointer; }


/* responsive */
@media (max-width:640px){
  .tooth{width:42px;height:42px}
  .row label{flex-basis:100%}
}