/* Table basics */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  table-layout: fixed;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.8s ease forwards;
}

td {
  border: 1px solid #999;
  padding: 6px;
  vertical-align: middle;
  text-align: left;
}

/* Header cell colors (soft pastel palette) */
.c1 { background: #ffd6e6; }
.c2 { background: #ffcccc; }
.c3 { background: #cce5ff; }
.c4 { background: #ccffcc; }
.c5 { background: #fff7b3; }
.c6 { background: #ffe0e0; }
.c7 { background: #e6ccff; }

/* Highlight colors */
.highlight-pink { background: #ffd6e6; color: #000; }
.highlight-blue { background: #cce5ff; color: #000; }
.highlight-green { background: #ccffcc; color: #000; }
.highlight-yellow { background: #fff7b3; color: #000; }
.highlight-red { background: #ffcccc; color: #000; }

/* Dropdown Styling */
.level-select {
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 4px;
  outline: none;
  cursor: pointer;
  width: auto;
  color: #000;
  background-color: transparent;
  transition: all 0.3s ease;
}
/* Default */
.theme-default .c3 .level-select { background-color: #cce5ff; color: #000; }
.theme-default .c5 .level-select { background-color: #fff7b3; color: #000; }
.theme-default .c6 .level-select { background-color: #ffe0e0; color: #000; }

/* Theme 1 */
.theme1 .c3 .level-select { background-color: #80bfff; color: #002244; }
.theme1 .c5 .level-select { background-color: #4da6ff; color: #002244; }
.theme1 .c6 .level-select { background-color: #3399ff; color: #fff; }

/* Theme 2 */
.theme2 .c3 .level-select { background-color: #ff9966; color: #663300; }
.theme2 .c5 .level-select { background-color: #ff7733; color: #fff; }
.theme2 .c6 .level-select { background-color: #ff661a; color: #fff; }

/* Theme 3 */
.theme3 .c3 .level-select { background-color: #9cd998; color: #003300; }
.theme3 .c5 .level-select { background-color: #65bf5a; color: #fff; }
.theme3 .c6 .level-select { background-color: #4db146; color: #fff; }

/* Theme 4 */
.theme4 .c3 .level-select { background-color: #cc99ff; color: #330066; }
.theme4 .c5 .level-select { background-color: #b366ff; color: #fff; }
.theme4 .c6 .level-select { background-color: #a64dff; color: #fff; }

/* Theme 5 */
.theme5 .c3 .level-select { background-color: #ffcc99; color: #660022; }
.theme5 .c5 .level-select { background-color: #ffb366; color: #fff; }
.theme5 .c6 .level-select { background-color: #ffa64d; color: #fff; }

.theme6 .c3 .level-select { background-color: #99e6ff; color: #660022; }
.theme6 .c5 .level-select { background-color: #33ccff; color: #fff; }
.theme6 .c6 .level-select { background-color: #00bfff; color: #fff; }

.theme7 .c3 .level-select { background-color: #b3ffd9; color: ##99e6ff; }
.theme7 .c5 .level-select { background-color: #80ffbf; color: #fff; }
.theme7 .c6 .level-select { background-color: #66ffb3; color: #fff; }

.theme8 .c3 .level-select { background-color: #ffb3c9; color: #660022; }
.theme8 .c5 .level-select { background-color: #ff80a8; color: #fff; }
.theme8 .c6 .level-select { background-color: #ff6699; color: #fff; }

.theme9 .c3 .level-select { background-color: #ffd966; color: #660022; }
.theme9 .c5 .level-select { background-color: #ffbf00; color: #fff; }
.theme9 .c6 .level-select { background-color: #e6ac00; color: #fff; }

.theme10 .c3 .level-select { background-color: #b3b3ff; color: #660022; }
.theme10 .c5 .level-select { background-color: #8080ff; color: #fff; }
.theme10 .c6 .level-select { background-color: #6666ff; color: #fff; }

/* … repeat for theme6–10 */


/* Inputs */
.input-no-border {
  display: inline-block;
  border: none;
  outline: none;
  font-weight: bold;
  color: #000;
  width: auto;
  margin-left: 6px;
  text-align: center;
  border-radius: 4px;
  padding: 2px 4px;
  background-color: transparent;
  transition: all 0.3s ease;
}
.c4 .input-no-border { width: 50px; }
.input-no-border:focus { background-color: rgba(255,255,255,0.5); }
.level-select:hover { transform: scale(1.05); }

/* Sections styling */
.section-title td {
  background: #333;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
.stage-col { width: 15%; }
.procedure { width: 50%; }
.interaction-col { width: 15%; text-align: center; }
.time-col { width: 10%; text-align: center; }

/* Colored text */
.red-text { color: #d94f4f; font-weight: bold; }
.green-text { color: #4fbf4f; font-weight: bold; }
.yellow-text { color: #ffd633; font-weight: bold; }

/* Fade-in animation */
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Resizable table */
.resizable-table { resize: both; overflow: auto; display: block; max-width: 100%; min-width: 300px; border-collapse: collapse; width: 100%; }
.resizable-table th, .resizable-table td { border: 1px solid #333; padding: 8px; position: relative; }
.resizer { position: absolute; right: 0; top: 0; width: 5px; cursor: col-resize; user-select: none; height: 100%; }

/* Procedure textareas */
.procedure-textarea { width: 100%; height: 200px; border: 1px solid #ccc; resize: vertical; font-family: Arial, sans-serif; font-size: 14px; padding: 8px; box-sizing: border-box; }
.procedure-textarea.small { height: 35px; }

/* Competencies */
.competency-group { display: flex; gap: 10px; margin-top: 5px; }
.competency-group-inline { display: inline-flex; gap: 8px; vertical-align: middle; }
.competency-option { background-color: #cce0f5; border-radius: 4px; padding: 4px 8px; font-size: 12px; cursor: pointer; transition: background-color 0.2s ease-in-out; user-select: none; }
.competency-option input { display: none; }
.competency-option.selected { background-color: #6699cc; font-weight: bold; color: white; text-decoration: underline; }

/* -------- Default Theme -------- */
.theme-default .c1 { background: #ffd6e6; }
.theme-default .c2 { background: #ffcccc; }
.theme-default .c3 { background: #cce5ff; }
.theme-default .c4 { background: #ccffcc; }
.theme-default .c5 { background: #fff7b3; }
.theme-default .c6 { background: #ffe0e0; }
.theme-default .c7 { background: #e6ccff; }
.theme-default .highlight-pink { background: #ffd6e6; }
.theme-default .highlight-blue { background: #cce5ff; }
.theme-default .highlight-green { background: #ccffcc; }
.theme-default .highlight-yellow { background: #fff7b3; }
.theme-default .highlight-red { background: #ffcccc; }

/* -------- Theme 1: Soft Blues -------- */
.theme1 .c1 { background: #b3d9ff; }
.theme1 .c2 { background: #99ccff; }
.theme1 .c3 { background: #80bfff; }
.theme1 .c4 { background: #66b2ff; }
.theme1 .c5 { background: #4da6ff; }
.theme1 .c6 { background: #3399ff; }
.theme1 .c7 { background: #1a8cff; }
.theme1 .highlight-pink { background: #b3d9ff; }
.theme1 .highlight-blue { background: #80bfff; }
.theme1 .highlight-green { background: #66b2ff; }
.theme1 .highlight-yellow { background: #4da6ff; }
.theme1 .highlight-red { background: #99ccff; }

/* -------- Theme 2: Warm Sunrise -------- */
.theme2 .c1 { background: #ffd1b3; }
.theme2 .c2 { background: #ffbb80; }
.theme2 .c3 { background: #ff9966; }
.theme2 .c4 { background: #ff884d; }
.theme2 .c5 { background: #ff7733; }
.theme2 .c6 { background: #ff661a; }
.theme2 .c7 { background: #ff551a; }
.theme2 .highlight-pink { background: #ffd1b3; }
.theme2 .highlight-blue { background: #ff9966; }
.theme2 .highlight-green { background: #ff884d; }
.theme2 .highlight-yellow { background: #ff7733; }
.theme2 .highlight-red { background: #ffbb80; }

/* -------- Theme 3: Calm Greens -------- */
.theme3 .c1 { background: #d4f4dd; }
.theme3 .c2 { background: #b8e6be; }
.theme3 .c3 { background: #9cd998; }
.theme3 .c4 { background: #81cc79; }
.theme3 .c5 { background: #65bf5a; }
.theme3 .c6 { background: #4db146; }
.theme3 .c7 { background: #399839; }
.theme3 .highlight-pink { background: #d4f4dd; }
.theme3 .highlight-blue { background: #9cd998; }
.theme3 .highlight-green { background: #81cc79; }
.theme3 .highlight-yellow { background: #65bf5a; }
.theme3 .highlight-red { background: #b8e6be; }

/* -------- Theme 4: Lavender Dream -------- */
.theme4 .c1 { background: #e6ccff; }
.theme4 .c2 { background: #d9b3ff; }
.theme4 .c3 { background: #cc99ff; }
.theme4 .c4 { background: #bf80ff; }
.theme4 .c5 { background: #b366ff; }
.theme4 .c6 { background: #a64dff; }
.theme4 .c7 { background: #9933ff; }
.theme4 .highlight-pink { background: #e6ccff; }
.theme4 .highlight-blue { background: #cc99ff; }
.theme4 .highlight-green { background: #bf80ff; }
.theme4 .highlight-yellow { background: #b366ff; }
.theme4 .highlight-red { background: #d9b3ff; }

/* -------- Theme 5: Peachy Pastel -------- */
.theme5 .c1 { background: #ffe6cc; }
.theme5 .c2 { background: #ffd9b3; }
.theme5 .c3 { background: #ffcc99; }
.theme5 .c4 { background: #ffbf80; }
.theme5 .c5 { background: #ffb366; }
.theme5 .c6 { background: #ffa64d; }
.theme5 .c7 { background: #ff9933; }
.theme5 .highlight-pink { background: #ffe6cc; }
.theme5 .highlight-blue { background: #ffcc99; }
.theme5 .highlight-green { background: #ffbf80; }
.theme5 .highlight-yellow { background: #ffb366; }
.theme5 .highlight-red { background: #ffd9b3; }

/* -------- Theme 6: Ocean Breeze -------- */
.theme6 .c1 { background: #d6f5f5; }
.theme6 .c2 { background: #b3ecff; }
.theme6 .c3 { background: #99e6ff; }
.theme6 .c4 { background: #66d9ff; }
.theme6 .c5 { background: #33ccff; }
.theme6 .c6 { background: #00bfff; }
.theme6 .c7 { background: #0099cc; }
.theme6 .highlight-pink { background: #d6f5f5; }
.theme6 .highlight-blue { background: #99e6ff; }
.theme6 .highlight-green { background: #66d9ff; }
.theme6 .highlight-yellow { background: #33ccff; }
.theme6 .highlight-red { background: #b3ecff; }

/* -------- Theme 7: Minty Fresh -------- */
.theme7 .c1 { background: #e0fff5; }
.theme7 .c2 { background: #ccffe6; }
.theme7 .c3 { background: #b3ffd9; }
.theme7 .c4 { background: #99ffcc; }
.theme7 .c5 { background: #80ffbf; }
.theme7 .c6 { background: #66ffb3; }
.theme7 .c7 { background: #4dffa6; }
.theme7 .highlight-pink { background: #e0fff5; }
.theme7 .highlight-blue { background: #b3ffd9; }
.theme7 .highlight-green { background: #99ffcc; }
.theme7 .highlight-yellow { background: #80ffbf; }
.theme7 .highlight-red { background: #ccffe6; }

/* -------- Theme 8: Rose Garden -------- */
.theme8 .c1 { background: #ffe6f0; }
.theme8 .c2 { background: #ffccd9; }
.theme8 .c3 { background: #ffb3c9; }
.theme8 .c4 { background: #ff99b8; }
.theme8 .c5 { background: #ff80a8; }
.theme8 .c6 { background: #ff6699; }
.theme8 .c7 { background: #ff4d88; }
.theme8 .highlight-pink { background: #ffe6f0; }
.theme8 .highlight-blue { background: #ffb3c9; }
.theme8 .highlight-green { background: #ff99b8; }
.theme8 .highlight-yellow { background: #ff80a8; }
.theme8 .highlight-red { background: #ffccd9; }

/* -------- Theme 9: Golden Glow -------- */
.theme9 .c1 { background: #fff2cc; }
.theme9 .c2 { background: #ffe699; }
.theme9 .c3 { background: #ffd966; }
.theme9 .c4 { background: #ffcc33; }
.theme9 .c5 { background: #ffbf00; }
.theme9 .c6 { background: #e6ac00; }
.theme9 .c7 { background: #cc9900; }
.theme9 .highlight-pink { background: #fff2cc; }
.theme9 .highlight-blue { background: #ffd966; }
.theme9 .highlight-green { background: #ffcc33; }
.theme9 .highlight-yellow { background: #ffbf00; }
.theme9 .highlight-red { background: #ffe699; }

/* -------- Theme 10: Twilight -------- */
.theme10 .c1 { background: #e6e6ff; }
.theme10 .c2 { background: #ccccff; }
.theme10 .c3 { background: #b3b3ff; }
.theme10 .c4 { background: #9999ff; }
.theme10 .c5 { background: #8080ff; }
.theme10 .c6 { background: #6666ff; }
.theme10 .c7 { background: #4d4dff; }
.theme10 .highlight-pink { background: #e6e6ff; }
.theme10 .highlight-blue { background: #b3b3ff; }
.theme10 .highlight-green { background: #9999ff; }
.theme10 .highlight-yellow { background: #8080ff; }
.theme10 .highlight-red { background: #ccccff; }

/* Print/PDF */
@media print {
  @page { margin: 0; size: A4 portrait; }
  body { margin: 0; padding: 0; }
  #table-container { width: 100%; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; }
  table { width: 100%; border-collapse: collapse; }
  textarea, input, select { border: none !important; resize: none !important; outline: none !important; }
}
@media print {
  #themeControls { display: none !important; }
}
/* ===== Theme 8 – Golden Glow ===== */
.theme8 table {
  background-color: #fff9e6; /* very soft golden */
}
.theme8 .section-title td {
  background-color: #ffd966; /* stronger golden */
  color: #5c4300;
}
.theme8 textarea,
.theme8 input,
.theme8 select {
  background-color: #fff2cc;
  border: 1px solid #e6b800;
  color: #3d2b00;
}

/* ===== Theme 9 – Minty Fresh ===== */
.theme9 table {
  background-color: #eafff5; /* light mint */
}
.theme9 .section-title td {
  background-color: #99f2d6; /* medium mint */
  color: #004d33;
}
.theme9 textarea,
.theme9 input,
.theme9 select {
  background-color: #ccffee;
  border: 1px solid #33cc99;
  color: #003322;
}

/* ===== Theme 5 – Peachy Pastel (improved to match big table & controls) ===== */
.theme5 table {
  background-color: #fff5f7; /* soft peach */
}
.theme5 .section-title td {
  background-color: #ffcce0;
  color: #660022;
}
.theme5 textarea,
.theme5 input,
.theme5 select {
  background-color: #ffe6ee;
  border: 1px solid #ff99bb;
  color: #440011;
}

/* ===== Theme 11 – Twilight (Dark Mode) ===== */
.theme11 table {
  background-color: #2a2a3d; /* deep gray */
}
.theme11 .section-title td {
  background-color: #5c4d7d; /* muted purple */
  color: #f0eaff;
}
.theme11 textarea,
.theme11 input,
.theme11 select {
  background-color: #3a3a4d; /* dark slate */
  border: 1px solid #7a6da8;
  color: #f5f5f5;
}
@media print {
  .ql-toolbar {
    display: none !important;
  }
}

@media print {
  .ql-editor {
    border: none !important;
    padding: 0 !important;
    font-size: 12pt; /* Optional: make text more readable */
  }
}
#editor {
  resize: vertical;
  overflow: auto;
  min-height: 150px;
  max-height: 800px;
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
@media print {
  #editor {
    font-size: 12px !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    resize: none !important;
    height: auto !important;
    max-height: none !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    width: 100% !important;
  }

  .ql-toolbar {
    display: none !important; /* Hide toolbar when printing */
  }
}


.ql-increase-size::before {
  content: 'A';
  font-weight: bold;
  font-size: 18px;
  color: #222;
}

.ql-decrease-size::before {
  content: 'a';
  font-weight: bold;
  font-size: 14px;
  color: #222;
}
<style>
  .input-no-border {
    width: 90%;
    border: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: inherit;
    outline: none; /* removes focus highlight */
  }
</style>