/* ---------------------------
  Modern responsive UI
---------------------------- */
:root{
  --bg: #0b1020;
  --bg2: #121a33;
  --card: rgba(255,255,255,.07);
  --card2: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --r: 18px;
  --r2: 14px;
  --gap: 16px;

  --primary: #6ea8ff;
  --primary2: #7c5cff;
  --good: #2ee59d;
  --warn: #ffcc66;
  --bad: #ff5c7a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1000px 700px at 20% 10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 650px at 80% 20%, rgba(110,168,255,.30), transparent 55%),
    radial-gradient(900px 700px at 60% 90%, rgba(255,92,122,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:inherit}

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(6,10,20,.55);
  backdrop-filter: blur(10px);
}
.brand{
  display:flex; gap:12px; align-items:center;
  text-decoration:none;
}
.brand__mark{
  width:40px; height:40px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--primary2), var(--primary));
  box-shadow: 0 14px 32px rgba(110,168,255,.20);
}
.brand__text strong{display:block; letter-spacing:-.3px}
.brand__text small{display:block; color:var(--muted); margin-top:2px}

.container{
  width:min(1200px, 100%);
  margin: 18px auto 30px;
  padding: 0 18px;
}

.view{display:block}
.view[hidden]{display:none !important}

/* Funnel / wizard step header */
.funnel{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
}
.funnel__track{
  flex: 1 1 260px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.funnel__bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, var(--primary2), var(--primary));
}
.funnel__steps{
  display:flex;
  gap:10px;
  align-items:center;
  flex: 0 0 auto;
}
.fstep{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
  font-size: 12.5px;
  font-weight: 750;
}
.fstep__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
}
.fstep--active{
  border-color: rgba(110,168,255,.25);
  background: rgba(110,168,255,.12);
  color: rgba(255,255,255,.92);
}
.fstep--active .fstep__dot{ background: rgba(110,168,255,.95) }
.fstep--done{
  border-color: rgba(46,229,157,.22);
  background: rgba(46,229,157,.10);
  color: rgba(255,255,255,.88);
}
.fstep--done .fstep__dot{ background: rgba(46,229,157,.95) }
.view__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 14px;
  margin: 18px 0 14px;
}
.view__head h1{margin:0; font-size: clamp(22px, 2.4vw, 30px); letter-spacing:-.4px}
.view__head p{margin:6px 0 0}
.view__actions{display:flex; gap:10px; flex-wrap:wrap}

.card{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card--flat{
  background: rgba(10,14,28,.55);
  box-shadow: none;
}

.muted{color:var(--muted)}
.small{font-size: 12.5px}

.btn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 650;
  cursor:pointer;
  transition:.16s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.24)}
.btn:active{transform: translateY(0px)}
.btn--primary{
  border:0;
  background: linear-gradient(135deg, var(--primary2), var(--primary));
  box-shadow: 0 14px 35px rgba(110,168,255,.22);
}
.btn--secondary{
  background: rgba(255,255,255,.05);
}
.btn--ghost{
  border-color: rgba(255,255,255,.10);
  background: transparent;
}
.btn--sm{padding: 8px 10px; border-radius: 12px; font-size: 13px}

.iconBtn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  width: 36px; height: 36px;
  border-radius: 12px;
  cursor:pointer;
}
.iconBtn:hover{border-color: rgba(255,255,255,.24)}

.grid{display:grid; gap: var(--gap)}
.grid--2{grid-template-columns: 1fr 1fr}
@media (max-width: 820px){
  .grid--2{grid-template-columns: 1fr}
  .view__head{align-items:flex-start; flex-direction:column}
}

.form .field{display:flex; flex-direction:column; gap:8px}
.field label{font-size: 13px; color: rgba(255,255,255,.80)}
input, select, textarea{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  outline:none;
}
textarea{resize: vertical}
input:focus, select:focus, textarea:focus{
  border-color: rgba(110,168,255,.45);
  box-shadow: 0 0 0 4px rgba(110,168,255,.14);
}

.form__actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top: 14px; flex-wrap:wrap;
}

.divider{
  height:1px; background: rgba(255,255,255,.12);
  margin: 16px 0;
}

.empty{
  display:flex; gap:14px; align-items:flex-start;
  padding: 10px;
}
.empty__icon{font-size: 26px}
.empty__text strong{display:block; margin-bottom:4px}

.docs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .docs{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 620px){
  .docs{grid-template-columns: 1fr;}
}

.docItem{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 14px;
  display:flex; flex-direction:column; gap: 8px;
}
.docItem__title{font-weight: 800; letter-spacing:-.2px}
.docItem__meta{display:flex; gap:10px; flex-wrap:wrap; color: var(--muted); font-size: 12.5px}
.docItem__actions{display:flex; gap:10px; margin-top: 4px; flex-wrap:wrap}

.stepper{display:flex; gap:8px; flex-wrap:wrap}
.step{
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
}
.step--active{
  background: rgba(110,168,255,.14);
  border-color: rgba(110,168,255,.25);
  color: rgba(255,255,255,.92);
}
.step--done{
  background: rgba(46,229,157,.10);
  border-color: rgba(46,229,157,.22);
  color: rgba(255,255,255,.88);
}

.workspace{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .workspace{grid-template-columns: 1fr}
}

.panel{
  border:1px solid var(--border);
  background: rgba(10,14,28,.55);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__head{
  display:flex; justify-content:space-between; align-items:center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.panel__head h2{margin:0; font-size: 16px; letter-spacing:-.2px}
.panel__tools{display:flex; gap:8px; flex-wrap:wrap}
.panel__footer{
  display:flex; justify-content:space-between; gap:10px; padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.panel--chart{padding-bottom: 10px}

.chartWrap{padding: 12px 14px}
.chartLegend{display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
}
.dot{width:10px;height:10px;border-radius:999px; display:inline-block}
.dot--sel{background: rgba(110,168,255,.95)}
.dot--diag{background: rgba(255,204,102,.95)}
.dot--treat{background: rgba(46,229,157,.95)}

.toothChart{
  width:100%;
  display:grid;
  place-items:center;
}
.toothSvg{
  width: 100%;
  max-width: 720px;
  height: auto;
}

/* ---------------------------
   Imported SVG (CodePen style)
   - #Spots [data-key] are clickable teeth
   - classes applied from JS:
     .is-selected, .has-diag, .has-treat
---------------------------- */
.toothSvg #Spots [data-key]{
  cursor: pointer;
  transition: .14s ease;
  fill: rgba(255,255,255,.07);
  stroke: rgba(255,255,255,.22);
  stroke-width: 1.25;
}
.toothSvg #Spots [data-key]:hover{
  fill: rgba(255,255,255,.11);
  stroke: rgba(255,255,255,.30);
}
.toothSvg #Spots [data-key].is-selected{
  fill: rgba(110,168,255,.22);
  stroke: rgba(110,168,255,.68);
}
.toothSvg #Spots [data-key].has-diag{
  stroke: rgba(255,204,102,.78);
}
.toothSvg #Spots [data-key].has-treat{ stroke: rgba(46,229,157,.90); }

/* Tooth numbers generated by JS */
.toothSvg #ToothNumbers text{
  fill: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0,0,0,.22);
  stroke-width: 3px;
}

.tooth{
  cursor:pointer;
  transition: .14s ease;
}
.tooth .toothShape{
  fill: rgba(255,255,255,.07);
  stroke: rgba(255,255,255,.20);
  stroke-width: 1.2;
}
.tooth:hover .toothShape{
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.28);
}
.tooth text{
  fill: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 750;
  user-select:none;
}
.tooth--selected .toothShape{
  fill: rgba(110,168,255,.20);
  stroke: rgba(110,168,255,.55);
}
.tooth--hasDiag .toothShape{
  stroke: rgba(255,204,102,.70);
}
.tooth--hasTreat .toothShape{
  stroke: rgba(46,229,157,.70);
}

.sectionTitle{
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.list{display:flex; flex-direction:column; gap:10px}
.item{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px;
}
.item__top{
  display:flex; justify-content:space-between; gap: 10px; align-items:flex-start;
}
.item__title{font-weight: 800; letter-spacing:-.2px}
.item__meta{color: var(--muted); font-size: 12.5px; margin-top: 2px}
.item__chips{display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px}
.chip{
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.76);
}
.item__actions{display:flex; gap:8px}
.linkBtn{
  border: 0;
  background: transparent;
  color: rgba(110,168,255,.95);
  cursor:pointer;
  font-weight: 700;
  padding: 0;
}
.linkBtn:hover{text-decoration:underline}

.docActions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin: 10px 0 14px;
}

.docCard{padding: 0}
.doc{padding: 22px}

/* printable document */
.docHeader{
  display:flex; justify-content:space-between; align-items:flex-start; gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.docHeader__left h2{margin:0; font-size: 18px}
.docHeader__left .muted{color: rgba(0,0,0,.60)}
.docHeader__right{text-align:right}
.docLogo{
  width: 140px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: white;
}
.docGrid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 620px){
  .docGrid{grid-template-columns: 1fr}
}
.docBlock{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.02);
}
.docBlock h3{margin:0 0 8px; font-size: 14px}
.docTable{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.docTable th, .docTable td{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 8px 6px;
  text-align:left;
  vertical-align: top;
  font-size: 12.5px;
}
.docTable th{font-size: 12px; color: rgba(0,0,0,.65)}
.docFooter{
  margin-top: 14px;
  color: rgba(0,0,0,.60);
  font-size: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.10);
}

/* dialog */
.dialog{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,14,28,.92);
  color: var(--text);
  border-radius: 18px;
  width: min(560px, calc(100% - 28px));
  box-shadow: var(--shadow);
}
.dialog::backdrop{background: rgba(0,0,0,.55)}
.dialog__body{padding: 16px}
.dialog__head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 10px}
.dialog__head h2{margin:0; font-size: 16px}
.dialog__actions{display:flex; justify-content:flex-end; gap:10px; margin-top: 12px; flex-wrap:wrap}

.footer{
  padding: 22px 18px;
  text-align:center;
}

/* print */
@media print{
  body{background:white}
  .topbar, .footer, .docActions{display:none !important}
  .container{width: 100%; margin: 0; padding: 0}
  .card{border:0; box-shadow:none; background:white}
  .doc{padding: 0}
}


/* --- Adult tooth SVG (imported) --- */
.toothChartWrap{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.toothSvgAdult{
  width: 100%;
  height: auto;
  display:block;
}
.toothSvgAdult #Spots [data-key]{
  cursor: pointer;
  stroke: rgba(255,255,255,0.22);
  stroke-width: 1.5;
  transition: fill .15s ease, stroke .15s ease, opacity .15s ease;
}
.toothSvgAdult #Spots [data-key]:hover{
  fill: rgba(255,255,255,0.15) !important;
}
.toothSvgAdult #Spots [data-key].is-selected{
  fill: rgba(255,255,255,0.28) !important;
  stroke: rgba(255,255,255,0.65);
}
.toothSvgAdult #Spots [data-key].has-diag{
  stroke-dasharray: 4 3;
}
.toothSvgAdult #Spots [data-key].has-treat{ stroke: rgba(46,229,157,.90); }


/* Fix select dropdown readability */
select{color: var(--text);}
select option{color:#111; background:#fff;}

#toothLabels text{fill: rgba(255,255,255,.86);}




/* Document: colored treatment rows + legend */
.legend{
  display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 0;
}
.legend__item{
  display:flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  font-size: 12px;
}
.legend__swatch{width:10px;height:10px;border-radius:999px; display:inline-block}

@media print{ *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Document: treatment color dot */
.tDot{
  display:inline-block;
  width:10px; height:10px;
  border-radius:999px;
  border: 1px solid rgba(0,0,0,.18);
}

/* Imported SVG tooth states */
#Spots [data-key]{
  cursor: pointer;
  transition: .12s ease;
  fill: rgba(255,255,255,.08);
  stroke: rgba(255,255,255,.18);
  stroke-width: 1.2;
}
#Spots [data-key]:hover{
  fill: rgba(255,255,255,.12);
  stroke: rgba(255,255,255,.26);
}
#Spots [data-key].is-selected{
  fill: rgba(110,168,255,.26);
  stroke: rgba(110,168,255,.65);
}

/* Diagnosis: yellow dotted stroke only */
#viewDiagnosis #Spots [data-key].has-diag{
  fill: rgba(255,255,255,.08);
  stroke: rgba(255,204,102,.95);
  stroke-dasharray: 6 4;
  stroke-width: 2.2;
}

/* Treatment: colored fill + thicker yellow stroke if diagnosed */
#viewTreatment #Spots [data-key].has-diag{
  stroke: rgba(255,204,102,.95);
  stroke-width: 3;
}
#viewTreatment #Spots [data-key].has-treat{ stroke: rgba(46,229,157,.90); }

/* Treatment-type coloring */
#viewTreatment #Spots [data-key].treat-filling{ fill:#ff6b6b; }
#viewTreatment #Spots [data-key].treat-root{ fill:#ffd166; }
#viewTreatment #Spots [data-key].treat-crown{ fill:#4dabf7; }
#viewTreatment #Spots [data-key].treat-extraction{ fill:#f06595; }
#viewTreatment #Spots [data-key].treat-implant{ fill:#63e6be; }
#viewTreatment #Spots [data-key].treat-cleaning{ fill:#69db7c; }
#viewTreatment #Spots [data-key].treat-ortho{ fill:#b197fc; }
#viewTreatment #Spots [data-key].treat-whitening{ fill:#74c0fc; }
#viewTreatment #Spots [data-key].treat-other{ fill:#ced4da; }

/* Print background fix */
@media print{
  body{
    background:
      radial-gradient(1000px 700px at 20% 10%, rgba(124,92,255,.35), transparent 60%),
      radial-gradient(900px 650px at 80% 20%, rgba(110,168,255,.30), transparent 55%),
      radial-gradient(900px 700px at 60% 90%, rgba(255,92,122,.18), transparent 60%),
      linear-gradient(180deg, #0b1020, #121a33);
  }
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Document tables header visibility */
.docTable th{
  color: rgba(255,255,255,.92) !important;
  background: rgba(0,0,0,.25);
}


/* Imported SVG tooth states (CodePen style) */
#Spots [data-key]{
  cursor: pointer;
  transition: .12s ease;
  fill: rgba(255,255,255,.08);
  stroke: rgba(255,255,255,.18);
  stroke-width: 1.2;
}
#Spots [data-key]:hover{
  fill: rgba(255,255,255,.12);
  stroke: rgba(255,255,255,.26);
}
#Spots [data-key].is-selected{
  fill: rgba(110,168,255,.26);
  stroke: rgba(110,168,255,.65);
}

/* Diagnosis presence: keep your dotted yellow outline */
#Spots [data-key].has-diag{
  stroke: rgba(255,204,102,.95);
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  fill: rgba(255,204,102,.10);
}

/* Treatment presence (stroke only; fill comes from treat-* colors) */
#Spots [data-key].has-treat{
  stroke: rgba(46,229,157,.90);
}

/* Treatment-type coloring (ONLY meaningful on treatment chart because JS adds these classes there) */
#Spots [data-key].treat-filling{ fill: #ff6b6b; }
#Spots [data-key].treat-root{ fill: #ffd166; }
#Spots [data-key].treat-crown{ fill: #4dabf7; }
#Spots [data-key].treat-extraction{ fill: #f06595; }
#Spots [data-key].treat-implant{ fill: #63e6be; }
#Spots [data-key].treat-cleaning{ fill: #69db7c; }
#Spots [data-key].treat-ortho{ fill: #b197fc; }
#Spots [data-key].treat-whitening{ fill: #74c0fc; }
#Spots [data-key].treat-other{ fill: #ced4da; }

/* If diagnosis also exists on a treated tooth, make yellow outline thicker for visibility */
#Spots [data-key].has-diag.has-treat{
  stroke-width: 2.6;
}

/* Keep selection emphasis even with treatment colors */
#Spots [data-key].is-selected{
  filter: drop-shadow(0 0 4px rgba(110,168,255,.25));
}





/* Document view: keep app gradient background */
#viewDocument .docCard{
  background: var(--bg-gradient, linear-gradient(135deg, #0b1020, #121a33));
}
#viewDocument .doc{
  color: rgba(255,255,255,.92);
}
#viewDocument .doc .muted{ color: rgba(255,255,255,.65); }
#viewDocument .docTable th{ color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); }
#viewDocument .docTable td{ color: rgba(255,255,255,.92); }

@media print{
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Hide app header / navigation in print */
  header, .appHeader, .topBar, .navBar{ display:none !important; }
  /* Expand document to full width */
  #viewDocument{ padding: 0; }
}


/* ---- Document layout improvements (screen) ---- */
#viewDocument .card.docCard{
  padding: 16px;
}
#viewDocument .doc{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
}
/* add some breathing room so gradient card doesn't touch edges on small screens */
@media (max-width: 820px){
  #viewDocument .doc{ padding: 14px; }
  #viewDocument .card.docCard{ padding: 12px; }
}

/* Prevent awkward splits in print/PDF */
@media print{
  /* Hide the "3) Belge" header area + stepper text in print */
  #viewDocument .view__head,
  #viewDocument .stepper,
  #viewDocument .docActions{
    display:none !important;
  }

  /* Keep content inside gradient card with margins */
  body{ margin: 0; }
  #viewDocument .card.docCard{ padding: 0 !important; }
  #viewDocument .doc{
    max-width: none;
    margin: 0;
    padding: 12mm 10mm; /* left/right breathing room */
  }

  /* Avoid table and block splitting across pages */
  .docBlock, .docGrid, table, thead, tbody, tr, td, th{
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Allow long tables to break if needed, but avoid splitting a single row */
  table{ break-inside: auto; page-break-inside: auto; }
  tr{ break-inside: avoid; page-break-inside: avoid; }

  /* Keep gradient background in print (requires Background graphics enabled) */
  .card, .panel, #viewDocument .docCard{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Keep 'Tedaviler' from orphaning on print: start on a new page */
@media print{
  .docTreatSection{
    break-before: page;
    page-break-before: always;
  }
  h2, h3{
    break-after: avoid;
    page-break-after: avoid;
  }
}

/* ---- Selector form alignment (Diagnosis / Treatment) ---- */
.formGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
@media (min-width: 720px){
  .formGrid.twoCol{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}
.formGrid .field{ margin: 0; }
.formGrid label{ display:block; margin-bottom: 6px; }
.formGrid select, .formGrid input, .formGrid textarea{ width:100%; }

/* ---- Review plan drag-drop ---- */
.planList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.planItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.planItem[draggable="true"]{ cursor: grab; }
.planItem:active{ cursor: grabbing; }

.planLeft{
  display:flex; align-items:center; gap:10px; min-width: 0;
}
.planDot{
  width:10px; height:10px; border-radius:999px;
  border: 1px solid rgba(255,255,255,.22);
  flex: 0 0 auto;
}
.planTitle{
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.planMeta{
  color: rgba(255,255,255,.65);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}

.planActions{
  display:flex; gap:8px; flex:0 0 auto;
}
.iconBtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  border-radius: 10px;
  padding: 6px 8px;
  cursor:pointer;
}
.iconBtn:hover{ border-color: rgba(255,255,255,.22); }

.planVisit{
  border-style: dashed;
  background: rgba(124,92,255,.10);
}
.planHandle{
  opacity:.7;
  font-size: 14px;
}

.docTotalRow td{
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 10px;
}

/* Document: visit separator row inside treatment table */
.docVisitRow td{
  padding: 10px 10px;
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: none;
  background: rgba(124,92,255,.14);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* UI language selector */
.uiLang{ display:flex; align-items:center; margin-left:10px; }
.uiLang select{
  height:34px; padding:0 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}

/* Document cover/back image pages */
.printPage{ width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; margin:0; padding:0; }
.printPage img{ width:100%; height:auto; display:block; }
@media print{ .printBreakAfter{ break-after: page; page-break-after: always; } }

/* Document: compact patient info row */
.docPatientRow{
  display:flex; flex-wrap:wrap; gap: 10px 14px; align-items:center;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  margin: 8px 0 12px;
}
.docPatientRow .kv{ display:flex; gap:6px; align-items:baseline; }
.docPatientRow .k{ color: rgba(255,255,255,.65); font-size: 12px; }
.docPatientRow .v{ color: rgba(255,255,255,.92); font-weight: 700; }

/* Global background behavior */
body{
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

@media print{
  @page{ margin: 0; }
  html, body{ margin:0 !important; padding:0 !important; }
  .printDocWrap{ padding: 12mm 12mm; }
  .printPage{ width:210mm; height:297mm; min-height:297mm; }
  .printPage img{ width:210mm; height:297mm; object-fit: cover; }
  .printPage{ break-inside: avoid; page-break-inside: avoid; }
  .docTreatSection{ break-before: auto !important; page-break-before: auto !important; }
  .docBlock, .docGrid, .docTable{ break-inside: avoid; page-break-inside: avoid; }
  .docTable{ font-size: 11px; }
  h2,h3{ margin: 10px 0 6px !important; }
}
body{ background-repeat:no-repeat; background-attachment:fixed; background-size:cover; }
.docPatientRow{ flex-direction: row; }
.docPatientRow .kv{ white-space: nowrap; }


/* Print: full-bleed cover/back (A4) + avoid blank page */
@media print{
  @page{ margin: 0; }
  html, body{ margin:0 !important; padding:0 !important; }
  .printPage{ width:210mm; height:297mm; min-height:297mm; margin:0; padding:0; }
  .printPage img{ width:210mm; height:297mm; object-fit: cover; display:block; }
  .printBreakAfter{ break-after: page; page-break-after: always; }
  .printDocWrap{ padding: 12mm 12mm; }
  .printDocWrap *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* keep diagnosis+treatment together as much as possible */
  .docSection, .docGrid, .docBlock, .docTable{ break-inside: avoid; page-break-inside: avoid; }
  .docTable{ font-size: 11px; }
  h2,h3{ margin: 8px 0 6px !important; }
}
/* Background behavior */
body{ background-repeat:no-repeat; background-attachment:fixed; background-size:cover; }

/* --- Full-bleed cover/back for print --- */
@media print{
  @page{ size: A4; margin: 0; }
  html, body{ margin:0 !important; padding:0 !important; }
  .printPage{ width:210mm; height:297mm; margin:0; padding:0; position:relative; overflow:hidden; }
  .printPage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .printBreakAfter{ break-after: page; page-break-after: always; }
  .printDocWrap{ padding: 12mm 12mm; }
  .docSection, .docGrid, .docBlock, .docTable{ break-inside: avoid; page-break-inside: avoid; }
  .docTable{ font-size: 11px; }
  h2,h3{ margin: 8px 0 6px !important; }
}

.docMetaLine{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; color: rgba(255,255,255,.78); font-size: 12px; }
.docMetaLine span{ white-space: nowrap; }

@media print{
  .printPage img{ transform: scale(1.02); transform-origin: center; }
}

.docStack{ display:flex; flex-direction:column; gap:14px; }
.docMapSmall svg{ width:240px; max-width:240px; height:auto; }
@media print{
  .printDocWrap.printBreakAfter{ break-after: page; page-break-after: always; }
  .docMapSmall svg{ width:210px; max-width:210px; }
}

/* --- Print full bleed & no overflow --- */
@media print{
  @page{ size:A4; margin:0; }
  html, body{ margin:0 !important; padding:0 !important; }
  .printPage{ width:210mm; height:297mm; margin:0; padding:0; position:relative; overflow:hidden; }
  .printPage img{ position:absolute; inset:-3mm; width:216mm; height:303mm; object-fit:cover; display:block; }
  .coverPage img{ inset:-4mm; width:218mm; height:305mm; }
  .backPage img{ inset:-4mm; width:218mm; height:305mm; }
  .printDocWrap{ width:210mm; min-height:297mm; margin:0; padding:12mm 12mm; box-sizing:border-box; }
  .printBreakAfter{ break-after: page; page-break-after: always; }
  .docSection, .docStack, .docTable{ break-inside:avoid; page-break-inside:avoid; }
  .docStack{ display:flex; flex-direction:column; gap:12px; }
  .docMapSmall svg{ width:210px !important; max-width:210px !important; height:auto !important; }
  .docTable{ font-size:11px; }
  .infoPage{ background: radial-gradient(1200px 700px at 20% 15%, rgba(124,58,237,.35), rgba(10,16,32,.98) 55%), linear-gradient(135deg, #071023, #0b1220 55%, #111b33); color:#fff; }
  .infoPage h2{ margin:0 0 10px 0; font-size:18px; }
  .infoPage h3{ margin:14px 0 6px 0; font-size:14px; }
  .infoPage p, .infoPage li{ font-size:12px; line-height:1.45; color:rgba(255,255,255,.9); }
  .infoPage ul{ margin:8px 0 0 18px; padding:0; }
}

/* --- Override: exact A4 cover/back images (no overscan) --- */
@media print{
  @page{ size:A4; margin:0; }
  html, body{ margin:0 !important; padding:0 !important; }
  .printPage{ width:210mm; height:297mm; margin:0; padding:0; position:relative; overflow:hidden; }
  .printPage img{
    position:absolute;
    inset:0 !important;
    width:210mm !important;
    height:297mm !important;
    object-fit:cover !important;
    transform:none !important;
  }
  .coverPage img, .backPage img{
    inset:0 !important;
    width:210mm !important;
    height:297mm !important;
  }
  .infoPage{
    background:#fff !important;
    color:#111 !important;
  }
  .infoPage h2{ font-size:20px !important; color:#111 !important; }
  .infoPage h3{ font-size:15px !important; color:#111 !important; }
  .infoPage p, .infoPage li{ font-size:13px !important; color:#111 !important; }
}
.docMapSmall{ display:flex; justify-content:center; align-items:center; }
.docMapSmall svg{ margin:0 auto; display:block; }

/* Info page should look like diagnosis/treatment pages (no white), but slightly larger text */
@media print{
  .infoPage{
    background: radial-gradient(1200px 700px at 20% 15%, rgba(124,58,237,.35), rgba(10,16,32,.98) 55%),
                linear-gradient(135deg, #071023, #0b1220 55%, #111b33) !important;
    color:#fff !important;
  }
  .infoPage h2{ font-size:20px !important; color:#fff !important; }
  .infoPage h3{ font-size:15px !important; color:#fff !important; }
  .infoPage p, .infoPage li{ font-size:13px !important; color:rgba(255,255,255,.92) !important; }
}

.docClinicName{ margin-top:6px; font-weight:700; font-size:12px; color:rgba(255,255,255,.9); text-align:right; }

.docLogoSlot{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}

/* Document logo: constrained size + white backdrop */
.docLogoSlot img{
  max-height:44px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  background:#ffffff;
  padding:6px 10px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.docClinicName{
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  color:rgba(255,255,255,.9);
  text-align:right;
  max-width:240px;
}

@media print{
  .infoPage{
    background: linear-gradient(180deg, #071023 0%, #0b1220 55%, #111b33 100%) !important;
    color:#fff !important;
  }
  .infoPage h2{ font-size:20px !important; color:#fff !important; }
  .infoPage h3{ font-size:15px !important; color:#fff !important; }
  .infoPage p, .infoPage li{ font-size:13px !important; color:rgba(255,255,255,.92) !important; }
}

/* Print: remove extra padding/margins that can look like 'kenar boşluğu' */
@media print{
  .doc{ padding:0 !important; margin:0 !important; }
  .card, .docCard{ padding:0 !important; margin:0 !important; border-radius:0 !important; box-shadow:none !important; }
  .container{ margin:0 !important; padding:0 !important; max-width:none !important; }
  /* keep document page padding controlled only by .printDocWrap */
  .printDocWrap{ padding:10mm 10mm !important; } /* slightly tighter */
}