/* app/assets/stylesheets/application.css */

/*
 *= require_self
 *= require style
 *= require_tree .
 */
 /*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 *= require bootstrap-datepicker
 */

 html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont;
    font-size: 14px;
  font-weight: 400;
  overflow-x: hidden;
  overflow-y: initial;
}

.right-img {
    height: 200px;
    width: 250px;
}
.otp-input {
    width: 48px;
    height: 48px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FBFBFB;
    outline: none;
  }

  .otp-input:focus {
    border-color: #612FFF;
    box-shadow: 0 0 0 2px rgba(97, 47, 255, 0.2);
  }

  .custom-select {
  padding-left: 2.75rem;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  color: #6c757d;
   border-color: #e5e7eb;
}
.form-select:focus{
    box-shadow: none !important;
    border-color: #612FFF;
}
.icon-left {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #adb5bd;
  pointer-events: none;
}

/* Optional: lighter border like screenshot */

.custom-table {
  border-collapse: separate;
  border-spacing: 0;
}

.custom-table.result thead tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

.custom-table.result thead tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

.custom-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

.custom-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

.custom-table th {
  font-weight: 500;
  border-bottom: 1px solid #ebebeb;
}

.custom-table td {
  border-color: #f0f0f0;
  font-size: 14px;
}

.custom-table tbody tr:hover {
  background-color: #fafafa;
  cursor: pointer;
}

/* Radio button accent color */
.form-check-input[type=radio] {
    border-radius: 50%;
    height: 16px !important;
    width: 16px !important;
    border: 1.5px solid #666666;
}

.form-check-input:checked {
  background-color: #612fff;
  border-color: #612fff;
}

#updatesuccessModal svg path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: fillScore 1.5s ease-out forwards;
}

@keyframes fillScore {
    to {
        stroke-dashoffset: 60; /* Ye value score ke hisaab se dynamic ho sakti hai */
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont;
    font-size: 14px;
  font-weight: 400;
  overflow-x: hidden;
  overflow-y: initial;
}

.right-img {
    height: 200px;
    width: 250px;
}
.otp-input {
    width: 48px;
    height: 48px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FBFBFB;
    outline: none;
  }

  .otp-input:focus {
    border-color: #612FFF;
    box-shadow: 0 0 0 2px rgba(97, 47, 255, 0.2);
  }

  .custom-select {
  padding-left: 2.75rem;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  color: #6c757d;
   border-color: #e5e7eb;
}
.form-select:focus{
    box-shadow: none !important;
    border-color: #612FFF;
}
.icon-left {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #adb5bd;
  pointer-events: none;
}

/* Optional: lighter border like screenshot */

.custom-table {
  border-collapse: separate;
  border-spacing: 0;
}

.custom-table.result thead tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

.custom-table.result thead tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

.custom-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

.custom-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

.custom-table th {
  font-weight: 500;
  border-bottom: 1px solid #ebebeb;
}

.custom-table td {
  border-color: #f0f0f0;
  font-size: 14px;
}

.custom-table tbody tr:hover {
  background-color: #fafafa;
  cursor: pointer;
}

/* Radio button accent color */
.form-check-input[type=radio] {
    border-radius: 50%;
    height: 16px !important;
    width: 16px !important;
    border: 1.5px solid #666666;
}

.form-check-input:checked {
  background-color: #612fff;
  border-color: #612fff;
}