/* === Global === */
body {
  background-color: #e6f0f5;
  background-image: linear-gradient(to bottom right, #e6f0f5, #cfdde6);
  color: #000;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
}

/* === Typography Classes === */
.copy, .data, .data_light, .it_data, .list, .label, .alert, a, .form-title {
  font-family: verdana, arial, sans-serif;
  color: #000;
  font-size: 9pt;
}
.data { font-weight: bold; }
.data_light, .it_data { font-weight: normal; }
.it_data { font-style: italic; }
.alert { font-weight: bold; color: #f00; }
a { color: #003F13; }
a.smlight {
  font-size: 8pt;
  color: #FFFBBA;
}
.header { font-size: 16pt; font-weight: bold; }
.subheader { font-size: 12pt; font-weight: bold; }
.col-label {
  font-size: 1vw;
  font-style: italic;
  text-decoration: underline;
}
.col-data { font-size: 1.2vw; }

/* === Containers === */
.home-container, .list-container {
  display: flex;
  flex-direction: column;
  margin: auto;
}
.home-container { max-width: 400px; }
.list-container { max-width: 100%; }

.view-chart-container {
  width: 96%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1em;
  overflow-x: auto;
  background: #e9f1f7;
  zoom: 1;
}

/* === Home View === */
.home-item {
  width: 100%;
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
  padding: 1%;
  margin: 2%;
}

.right { align-self: flex-end; }
.top-link { padding: 15px 0; }

/* === Forms === */
.form-container {
  margin: auto;
}
.form-label { text-align: right; }

.form-title {
  text-align: end;
  margin: auto;
}

/* === Buttons === */
.update-chart-button,
.transpose-chart-button {
  padding: 0.5em 1em;
  background-color: #006699;
  color: white;
  border-radius: 5px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  margin: 0.5em 0;
}
.update-chart-button:hover,
.transpose-chart-button:hover {
  background-color: #004c75;
}
.update-chart-button { width: 20%; }
.transpose-chart-button { width: 30px; padding: 3px; }

/* === Error Handling === */
.errmsg {
  display: none;
  color: red;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  margin-bottom: 1em;
}
.error { border: 2px red solid; }

/* === Tables === */
table { width: 100%; border-collapse: collapse; }
td { padding: 4px; }

/* === Inputs === */
input[type="text"], input[type="number"] {
  width: 100%;
  font-size: 1em;
  box-sizing: border-box;
}

/* === Label & Bar Inputs === */
.label-input-cell {
  background: none;
  border: none;
  padding-right: 0.5em;
  width: 12%;
  vertical-align: middle;
}

.label-input {
  width: 100%;
  border: none;
  background: transparent;
  font-style: italic;
  font-size: 0.95em;
  text-align: right;
}

.bar-input {
  text-align: center;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  padding: 0.25em;
  box-sizing: border-box;
}

/* === Chart Meta === */
.chart-meta .meta-row.top {
  display: flex;
  align-items: baseline;
  gap: 1em;
  margin-bottom: 0.5em;
}

.chart-meta .meta-title a {
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  color: #1a4a6d;
  margin-top: -1vw;
}

.chart-meta .meta-key {
  font-size: 1.4em;
  font-weight: bold;
  color: #1a4a6d;
  margin-top: -1vw;
}

.chart-meta .meta-author {
  margin-left: 2.4em;
  font-size: 1.1em;
  color: #111;
}

.chart-meta .meta-details {
  margin-left: 2.4em;
  font-size: 0.9em;
  color: #666;
}

/* === Tune Title Block (if used separately) === */
.tune-title {
  font-size: 2.4em;
  font-weight: bold;
  margin: 0.75em 0 0.25em 0;
}

.tune-title .key {
  font-size: 0.5em;
  font-weight: normal;
  margin-left: 0.5em;
  color: #333;
}

/* === Media Queries === */
@media only screen and (max-width: 767px) {
  .form-container, .form-container table { width: 100%; }
  .form-label, th.subheader { font-size: 20px; }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .form-container, .form-container table { width: 85%; }
  .form-title { width: 100%; }
}

@media only screen and (min-width: 1024px) {
  .form-container, .form-container table { width: 500px; }
  .form-title { width: 800px; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  .form-container, .form-container table { width: 100%; }
  .form-label { font-size: 50px; }
  .form-input { font-size: 30px; }
  th.subheader { font-size: 50px; }
  .form-title a { font-size: 30px; width: 100%; }
}



.label-input-cell {
  background: none;
  border: none;
  padding: 0.5em 1em;
  width: 10%;
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
}

.label-input {
  width: 100%;
  border: none;
  background: transparent;
  font-style: italic;
  font-size: 1em;
  text-align: right;
  color: #000;
  padding: 0;
  margin: 0;
  outline: none;
}

.label-input::placeholder {
  color: #aaa;
  font-style: italic;
}


.label-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #999;
  background: transparent;
  font-style: italic;
  font-size: 1em;
  text-align: right;
  color: #000;
  padding: 0.2em 0;
  margin: 0;
  outline: none;
}

.label-input::placeholder {
  color: #bbb;
  font-style: italic;
}


.bar-cell {
  background-color: #f5f8fa; /* only for 8x8 bar cells */
  padding: 0.5em;
  text-align: center;
}

.label-cell {
  background-color: transparent; /* or subtle gray if preferred */
  padding: 0.5em 1em;
  vertical-align: middle;
  text-align: right;
  width: 12%;
}

table {
  background-color: #f5f8fa;
}

.bar-cell {
  position: relative;
  background-color: #f5f8fa;
  padding: 0.5em;
  vertical-align: top;
}
.bar-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.bar-num {
  position: absolute;
  top: 0.2em;
  left: 0.3em;
  font-size: 0.75em;
  color: #333;
}

.bar-input {
  width: 100%;
  padding: 0.8em 0.4em 0.4em 1.4em; /* leave space for number */
  font-weight: bold;
  box-sizing: border-box;
  text-align: center;
}



.tune-meta-table {
  background-color: transparent !important;
  border: none;
}

.tune-meta-table table {
  background-color: transparent !important;
  border: none;
}

.label-cell {
  background-color: transparent !important;
  border: none;
  padding-right: 0.5em;
  vertical-align: middle;
  width: 12%;
  text-align: right;
}

.label-cell,
.label-cell input {
  background: transparent !important;
  border: none;
  outline: none;
}

.bar-cell {
  background-color: #f5f8fa;
}

.label-cell {
  background-color: transparent;
  border: none;
  padding-right: 0.5em;
  text-align: right;
  vertical-align: middle;
}




.chart-grid-table td.bar-cell {
  background-color: #cccccc;
  padding: 0.4em;
  vertical-align: top;
}

.chart-grid-table td.label-cell {
  background-color: transparent;
  padding: 0.4em;
  vertical-align: middle;
}

.label-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  font-style: italic;
  font-size: 1em;
  text-align: right;
  padding: 0.2em 0;
  color: #000;
}

.label-input::placeholder {
  color: #aaa;
  font-style: italic;
}

.bar-wrapper {
  position: relative;
}

.bar-num {
  position: absolute;
  top: 0.2em;
  left: 0.4em;
  font-size: 0.8em;
  color: #666;
}

.bar-input {
  width: 100%;
  padding: 0.6em 0.4em 0.4em 1.5em;
  font-size: 1em;
  box-sizing: border-box;
}


/* Label cells: first column in each row */
td.label-cell {
  background: transparent !important;
  border: none !important;
  padding: 0.6em 0.5em;
  width: 12%;
  vertical-align: middle;
}

/* Only underline the label input */
.label-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #aaa;
  font-style: italic;
  font-size: 1em;
  text-align: right;
  width: 100%;
  color: #000;
  padding: 0.2em 0;
  margin: 0;
  outline: none;
}

/* Optional: placeholder for empty label */
.label-input::placeholder {
  color: #bbb;
  font-style: italic;
}

/* Bar grid cells: musical bars */
td.bar-cell {
  background-color: #f5f8fa;
  border: 1px solid #ddd;
  padding: 0.4em;
  vertical-align: top;
}

/* Only apply background to grid (bar) cells */
td.bar-cell {
  background-color: #f5f8fa;
}


/* Only the label cells (first column in each row) */
td.label-cell {
  background: transparent !important; /* <- This removes the light background */
  border: none;
  padding: 0.6em 0.5em;
  width: 12%;
  vertical-align: middle;
}


table {
  background-color: transparent !important;
}


td.label-cell {
  background: none;
  padding: 0;
  margin: 0;
}

.label-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  font-style: italic;
  font-size: 1em;
  text-align: right;
  color: #000;
  padding: 0.4em;
  margin: 0;
  outline: none;
  display: block;
  box-sizing: border-box;
}


.label-input {
  width: 100%;s
  height: 100%;
  border: none;
  background: transparent;
  font-style: italic;
  font-size: 1em;
  text-align: left;   /* ← Changed from right to left */
  color: #000;
  padding: 0.4em;
  margin: 0;
  outline: none;
  display: block;
  box-sizing: border-box;
}


body {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #e6f0f5;
  background-image: linear-gradient(to bottom right, #e6f0f5, #cfdde6);
  font-family: 'Poppins', sans-serif;
}

.view-chart-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 1em;
  box-sizing: border-box;
  background: transparent; /* Or remove this line if unnecessary */
}

table {
  width: 100%;
  border-collapse: collapse;
}

.meta-label {
  text-align: right;
  padding-right: 0.5em;
  white-space: nowrap;
}


.app-title {
  font-size: 2em;
  font-weight: bold;
  color: #1a4a6d;
  margin: 0vw;
}

.chart-meta .meta-key {
  font-size: 2em;
  font-weight: bold;
  color: #1a4a6d;
}

.app-title {
  font-size: .3em;  /* Previously likely 3em or larger */
  font-weight: bold;
  margin: 0px;
  margin-top: 0.2vw;
  margin-bottom: -.2vw;
}

.chart-meta .meta-key {
  font-size: 2.4em;
  font-weight: bold;
  color: #1a4a6d;
  margin-left: auto;
  text-align: right;
}


/* === Base Layout === */
body {
  background-color: #dbe9f4;
  font-family: 'Poppins', sans-serif;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
}

body, html {
  height: auto;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  font-family: 'Poppins', sans-serif;
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  overflow-y: auto;  /* restore normal scrolling by default */
}


/* === Home Page === */
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4vh 2vw;
  min-height: 100vh;
}

.home-buttons {
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 400px;
  gap: 2vh;
  margin-top: 4vh;
}

.home-btn,
.home-submit {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.1em;
  letter-spacing: 0.5px;
  display: block;
  text-align: center;
  background-color: #205072;
  color: white;
  padding: 2vh 0;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.home-btn:hover,
.home-submit:hover {
  background-color: #3493b6;
  transform: scale(1.05);
}

.home-form {
  display: flex;
  gap: 1vw;
}

.home-input {
  flex: 1;
  padding: 1vh;
  font-size: 1em;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* === Title and Section Styles === */
.app-title a {
  all: unset;
  font-size: 2.8em;
  font-weight: 600;
  color: #205072;
  text-align: center;
  letter-spacing: 1px;
  display: inline-block;
  transition: all 0.2s ease-in-out;
  margin-left: 1%;
}

.app-title a:hover {
  color: #2e8ba6;
  text-shadow: 0 0 8px rgba(46, 139, 166, 0.4);
  transform: scale(1.02);
}

.section-title,
.form-title {
  font-size: 2vw;
  font-weight: 600;
  color: #205072;
  text-align: center;
  letter-spacing: 1px;
  margin: 4vh 0 2vh 0;
  border-bottom: 2px solid #2e8ba6;
  display: inline-block;
  padding-bottom: 0.5vh;
}

/* === Tables === */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
}

.col-label {
  font-weight: 600;
  background-color: #f0f6fa;
  color: #205072;
  border-bottom: 2px solid #ccc;
  padding: 1vh;
  text-align: left;
}

.col-data {
  background-color: #ffffff;
  padding: 1vh;
  border-bottom: 1px solid #ccd8df;
  color: #333;
}

.col-data a {
  color: #205072;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1em;
  transition: color 0.2s ease;
}

.col-data a:hover {
  color: #10394e;
}

/* === Forms === */
.form-container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  background-color: #f7fafd;
  padding: 2vh 3vw;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

form table {
  width: 100%;
}

.form-label {
  text-align: right;
  padding: 1vh 1vw;
  color: #333;
  font-weight: 500;
  vertical-align: middle;
  white-space: nowrap;
}

.form-input {
  background-color: #eeeeff;
  width: 100%;
  padding: 0.6em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.form-input-50 {
  background-color: #eeeeff;
  width: 50%;
  padding: 0.6em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.form-input-25 {
  background-color: #eeeeff;
  width: 25%;
  padding: 0.6em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

input[type="submit"] {
  background-color: #205072;
  color: white;
  padding: 0.6em 1.5em;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

input[type="submit"]:hover {
  background-color: #2e8ba6;
  transform: scale(1.03);
}

/* === Chart Display === */
.chart-meta {
  max-width: 98%;
  margin: 2vh auto 1vh auto;
  padding: 0 2vw;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}

.meta-row.top .meta-title {
  font-size: 2em;
  font-weight: 700;
  flex-grow: 1;
}

.meta-key {
  font-size: 1.6em;
  font-weight: 600;
  text-align: right;
  min-width: 80px;
}

.meta-row.small {
  font-size: 0.9em;
  justify-content: space-between;
  align-items: flex-start;
}

.meta-author {
  font-size: 1em;
  font-weight: 500;
}

.meta-details {
  text-align: right;
  font-size: 0.8em;
  color: #555;
}

.chart-grid {
  max-width: 98vw;
  overflow-x: auto;
  margin: 2vh auto;
}

.chart-grid table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.label-cell {
  width: 100px;
  font-weight: 600;
  text-align: right;
  vertical-align: top;
  padding: 0.5em;
  background-color: #e6eef2;
  white-space: nowrap;
}

.bar-cell {
  width: 120px;
  height: 80px;
  border: 1px solid #ccc;
  vertical-align: top;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  padding: 4px;
}

.bar-number {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.5em;
  color: #205072;
  font-weight: 400;
}

.bar-content {
  margin-top: 1.4em;
  text-align: center;
  font-weight: bold;
  overflow-wrap: break-word;
  /*font-size: 2.5vw;  /* Responsive size */*/
}

/* Optional: Cap font size on large screens */
@media (min-width: 768px) {
  .bar-content {
    font-size: 1.3vw;
  }
}

@media (min-width: 1200px) {
  .bar-content {
    font-size: 1.1vw;
  }
}


.chart-container {
  max-width: 96vw;
  margin: 0 auto;
  padding: .5vh .5vw;
  overflow-x: auto;
  box-sizing: border-box;
}

.chart-grid {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.chart-grid table {
  width: 100%;
  table-layout: fixed; /* Forces table to respect widths */
  border-collapse: collapse;
}

.bar-cell {
  width: 12.5%; /* 8 bars per row -> 100% / 8 */
  min-width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
  background: #fff;
  padding: 0.3em;
}

.footer {
  text-align: center;
  font-size: 0.6em;
  margin-top: 10px;
}




td.bar-cell {
  width: 12.5%;             /* 8 columns */
  min-width: 80px;
  height: 80px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 0.4em;
  vertical-align: top;
  position: relative;
}

.bar-number {
  position: absolute;
  top: 0.3em;
  left: 0.4em;
  font-size: 0.75em;
  color: #205072;
  font-weight: bold;
}

.bar-content {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  margin-top: 1.5em;
  overflow-wrap: break-word;
}

.chart-grid table {
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  width: 100%;
}

td.bar-cell {
  width: 12.5%;
  min-width: 80px;
  height: 80px;
  background-color: #fff;
  border: 1px solid #333;
  box-sizing: border-box;
  vertical-align: top;
  position: relative;
  padding: 0.5em;
}


.bar-number {
  position: absolute;
  top: 0.3em;
  left: 0.4em;
  font-size: 0.75em;
  color: #666;
  font-weight: normal;
}

.bar-content {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  margin-top: 1.6em;
  overflow-wrap: break-word;
}


.line-adjust-button {
  padding: 0.4em 1em;
  font-size: 1em;
  font-weight: bold;
  background-color: #205072;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.line-adjust-button:hover {
  background-color: #2e8ba6;
  transform: scale(1.03);
}


.bar-cell {
  width: 12.5%;              /* 8 columns = 100/8 */
  height: 8vw;               /* Responsive square-ish cell */
  border: 1px solid #ccc;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  background: #f5f8fa;
  vertical-align: top;

}

.bar-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* center vertically */
  align-items: center;       /* center horizontally */
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;

}

.bar-num {
  position: absolute;
  top: 0.3vw;
  left: 0.5vw;
  font-size: 0.8vw;
  color: #666;
  font-weight: normal;
}

.bar-input {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 1.2vw;        /* Responsive font */
  font-weight: bold;
  text-align: center;
  /*background: transparent;*/

  padding-top: 1.6vw;      /* push below bar-num */
  box-sizing: border-box;
}

.label-cell {
  width: 8vw;
  font-size: 1vw;
  padding: 0.5vw;
  vertical-align: middle;
  text-align: right;
}



.chart-wrapper {
  width: 90%;
  margin: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.bar-box {
  width: 11%; /* About 8 boxes per row */
  height: 90px;  /* Increased height for handwriting */
  border: 1px solid #000;
  padding: 0;
  position: relative;
  background: white;
}

.label {
  font-size: 10px;
  position: absolute;
  top: 4px;
  left: 6px;
  color: #000;
}

.write-in-area {
  height: 100%;
  margin-top: 10px;
}



@media (min-width: 1200px) {
  .bar-input {
    font-size: 1.1vw;
  }
}
@media (max-width: 600px) {
  .bar-input {
    font-size: 3.5vw;
    padding-top: 2vw;
  }
}


/* === Print Overrides === */
@media print {
  body {
    background: none;
    color: #000;
    overflow: visible !Important;
  }

table {
  display: table !important;
  width: 100% !important;
}

td {
  display: table-cell !important;
}


  .bar-content {
    font-size: 15pt !important;
    font-weight: bold !important;
  }

  .chart-meta {
    page-break-inside: avoid;
  }

  .subheader {
    display: none;
  }

.bar-box {
  border: 1px solid #000 !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  background: #fff !important; /* Ensure white background if needed */
}

  .label {
    font-size: 9pt !important;
  }



  .label {
    color: #000 !important;
  }

  body {
    color: #000;
    background: #fff !important;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }


}