.hyperspan
{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:1;
}
.bluetext
{
    color: blue;
    font-size: medium;
}
.cyantext
{
    color:green;
    font-weight: bold;
    font-size: medium;
}
.redtext
{
    color: red;
    font-size: medium;
}
.icon-heart {
    color: red;
    fill: #cb1717;
  }

li.borderless {
    border-top: 0 none;
    border-bottom: 0 none;
    border-left: 0 none;
    border-right: 0 none;
    font-size: medium;
}
#modalHRAForm .modal-dialog.modal-lg {
    width: 80%;
    max-width: 80%;
  }
#modalHRAForm iframe {
    border: 0;
    height: 80vh;
  }

#modalHRAForm .hrabtn .btn{
    width: fit-content;
  }
  .hrabtn .row {
    justify-content: center;
  }
#overview .card {
  font-size: medium;
  font-family: 'Poppins', Arial, sans-serif !important;
}
#overview .btn.btn-default {
  font-size: large;
  color: white;
  /* background-color: #ffc107; */
  border-color: #3c414e;
  border-width:inherit ;
  font-weight: bold;
  background: #3c414e;
  line-height: 1;
    /* opacity: 0.1; */
}
#overview .card .card-title {
  font-size: clamp(16px, 2.5vw, 22px);
  text-align: left;
  font-weight: bold;
  font-family: 'Poppins';
}
#overview .card .welcome-title {
  font-size: clamp(20px, 4vw, 36px);
  font-weight: bolder;
  font-style: normal;
  white-space: normal; /* allow wrapping */
  overflow: visible;
  text-overflow: unset;
}

@media (max-width: 576px) {
  .welcome-title {
    font-size: 1.25rem;
  }
}
#overview .card .dash-title {
  font-size: clamp(17px, calc(4vw - 3px), 29px);
  font-weight: bolder;
}
#overview .card .dash-sub-title {
  font-size: clamp(17px, calc(4vw - 3px), 29px);
  font-weight: bolder;
}
#overview .card .card-subtitle {
  font-size: clamp(16px, 2.5vw, 22px);
}


#overview .card .bg-class1 {
  background-color: #5a95f5; /* Replace this with your desired color */
}
#overview .card .bg-class2 {
  background-color: #72b5f8; /* Replace this with your desired color */
}
.home-tab .tab-content {
  font-family: 'Poppins';
    font-size: 18px;
}

#heartRateForm {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-wrapper {
  display: flex;
  justify-content: center; /* centers the whole form box */
  width: 100%;
}

.aligned-form {
  display: grid;
  grid-template-columns: max-content 100px; /* label | input */
  gap: 10px 20px;
  align-items: center;
}

/* "Low - High" above the input box only */
.input-header {
  grid-column: 2 / 3;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  font-family: 'Poppins', Arial, sans-serif;
  color: #010101;
  margin-bottom: 0.3rem;
}

/* Label cells auto-width */
.label-cell {
  grid-column: 1 / 2;
  text-align: left;
  font-weight: bold;
  color: #010101;
  white-space: nowrap;
}

/* Input boxes */
.input-cell {
  grid-column: 2 / 3;
  max-width: 100px;
  width: 100%;
  background-color: #9195a1;
  color: #010101;
}

@media (max-width: 440px) {
  .aligned-form {
    grid-template-columns: 1fr; /* collapse to 1 column */
    justify-items: stretch; /* stretch content to full width */
  }

  .input-header {
    grid-column: unset; /* center on the only column */
    text-align: right;
    margin-bottom: 0.5rem;
  }

  .label-cell {
    text-align: left; /* already fixed by you */
    padding-top: 0.5rem;
  }

  .input-cell {
    width: 100%; /* stretch input */
    max-width: 100px;
    grid-column: unset;
    justify-self: end;
  }
}






#heart-rate-form .form-control {
  width: 100%;
  max-width: 100px;
  display: block;
  background-color: #9195a1;
  color: #010101;
}

#heartRate::placeholder,
#perceivedExertion::placeholder {
  color: #010101;
}


#myform .litetab{
  text-align: left;
  display: inline-block;
  width: 25%;
  background-color: forestgreen;
}
#myform .modtab{
  text-align: center;
  display: inline-block;
  width: 25%;
  background-color: yellow;
}
#myform .heatab{
  text-align: right;
  display: inline-block;
  width: 25%;
  background-color: orangered;
}
#myform .workouttable, #myform #rewardstable{
  text-align: left;
  font-family: 'Poppins', arial, sans-serif;
  font-size: 18px;
}

/* Applies to all responsive tables */
@media (max-width: 830px) {
  .table-responsive {
    overflow-x: hidden;
  }

  .table-responsive table,
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .table-responsive thead {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  .table-responsive tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem;
  }

  .table-responsive td {
    position: relative;
    padding-left: 50%;
    padding-right: 10px !important;
    padding-top: 20px !important;
    padding-bottom: 5px !important;
    text-align: left;
    border: none;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
  
    /* Add these for long strings */
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .table-responsive td::before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    padding-left: 10px;
    padding-right: 10px; /* ✅ Add this for spacing */
    font-weight: bold;
    white-space: nowrap;
    text-overflow: initial;
    overflow: hidden;
  }
}






/* Base desktop styles */
#myform .logworkout-desc,
#myform .logworkout-label,
#myform .logworkout-tr {
  font-family: 'Poppins', Arial, sans-serif;
}

#myform .logworkout-desc {
  font-size: 16px;
}

#myform .logworkout-label,
#myform .logworkout-tr {
  font-size: 22px;
}

#myform .logworkout-td {
  width: 25%;
}

/* Table container for horizontal scroll if needed */
.table-container {
  overflow-x: auto;
}

.workouttable {
  width: 100%;
  border-collapse: collapse;
}

.workouttable th,
.workouttable td {
  padding: 8px;
  text-align: left;
}

/* ✅ Mobile styles: stacked rows */
@media (max-width: 820px) {
  .workouttable {
    display: block;
    width: 100%;
  }

  .workouttable thead {
    display: none; /* Hide headers */
  }

  .workouttable tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    padding: 0.5rem;
    background: white;
  }

  .workouttable td {
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
  }

  .workouttable td::before {
    content: attr(data-label);
    font-weight: bold;
    flex-basis: 50%;
    text-align: left;
  }

  #myform .logworkout-td {
    width: 100%;
  }
}