/* Gradient Background for Dashboard Content */
.dash-inner-section {
  background: linear-gradient(180deg, rgba(20, 82, 202, 0.06) 0%, rgba(20, 82, 202, 0) 100%);
  /* Hex #1452CA0F is ~6% opacity. Fading to transparent. */
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  width: 100%;
  /* Ensure it covers height of content or viewport? 
       If viewport, min-height: 100% or calc(100vh - 113px). 
       Inner section has content. Let's try covering content first. */
  min-height: calc(100vh - 113px);
  /* Ensure it always fills remaining screen */
  padding-bottom: 60px;
}

.dash-inner-section .page-title {
  font-size: 32px;
  font-family: "Inter_18pt-Bold";
  color: var(--primary-color);
  margin-top: 16px;
  margin-bottom: 14px;
}

.dash-plan-sectone {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 16px;
  margin-top: 40px;
}

.dash-plan-tle {
  font-size: 20px;
  color: var(--primary-color);
  font-family: "Inter_28pt-SemiBold";
}

.dash-plan-subtle {
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
  color: var(--color-eleven);
}

.dash-plan-secttwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 16px 24px;
  border-radius: 8px;
  background-color: var(--color-six);
}

.check-disposal-email {
  text-decoration: underline;
  font-size: 16px;
  font-weight: 600;
  color: #595959;
}

.dash-plan-inner-cont {
  width: 100%;
  display: flex;
  gap: 19px;
  margin-top: 24px;
  /* Adjusted margin to sit well below welcome message */
}

/* Welcome Section Styles */
.dash-welcome-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Top padding provided by parent, but maybe space from header? Parent has padding-top now. */
}

.dash-welcome-title {
  font-size: 32px;
  /* Requested 32px */
  font-family: "Inter_18pt-Bold";
  color: var(--primary-color);
  margin: 0;
}

.dash-welcome-subtitle {
  font-size: 14px;
  /* Requested 14px */
  font-family: "Inter_28pt-Regular";
  color: #737373;
  /* Requested Color */
  font-weight: 400;
  margin: 0;
}

.dash-plan-analysis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Space out top (trend), middle (value), bottom (title) */
  width: 100%;
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #EDEDED;
  /* Subtle border */
  border-radius: 12px;
  height: auto;
  /* Content-driven height */
  box-sizing: border-box;
}

.card-trend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter_28pt-SemiBold";
  margin-bottom: 8px;
}

.card-trend-row img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trend-icon-wrapper {
  width: 9px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-trend-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.card-tooltip-wrapper {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
  /* Slight adjustment to align with trend text if needed */
}

.card-tooltip-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Adjust spacing for the value row since we removed the wrapper gap */
.card-value-row {
  flex: 1;
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  /* Push it up a bit visually or center it */
}

.text-green {
  color: #008000;
}

.text-red {
  color: #CC0000;
}

.card-value-row {
  flex: 1;
  display: flex;
  align-items: center;
  /* Center number vertically in the available space */
}

.dash-plan-total {
  font-size: 40px;
  /* Large, bold number */
  font-family: "Inter_18pt-Bold";
  /* Blue */
  margin: 0;
  line-height: 1.2;
}

.dash-plan-anaylysis-title {
  font-size: 16px;
  font-weight: 600;
  color: #737373;
  /* Grey label */
  font-family: "Inter_28pt-SemiBold";
}

/* Specific text colors if needed override base */
/* Specific text colors */
.dash-total-1 {
  color: #0000ff !important;
}

.dash-total-2 {
  color: #049286 !important;
}

.dash-total-3 {
  color: #cc0000 !important;
}

.dash-inner-graph {
  width: 100%;
  margin-top: 16px;
  background-color: #ffffff;
  height: auto;
  padding: 16px;
  border: 1px solid #ededed;
  box-sizing: border-box;
  border-radius: 8px;
}

.graph-header {
  font-weight: 600;
  font-size: 16px;
  color: #252525;
  font-weight: 600;
  font-family: "Inter_28pt-SemiBold" !important;
}

.graph-sub-head-cont {
  display: flex;
  width: 100%;
  gap: 32px;
  margin-top: 12px;
}

.graph-sub-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.graph-head-dot1 {
  background-color: #0000ff;
  height: 16px;
  width: 16px;
  border-radius: 100%;
}

.graph-head-dot2 {
  background-color: #cc0000;
  height: 16px;
  width: 16px;
  border-radius: 100%;
}

.graph-head-dot3 {
  background-color: #CCCCCC;
  height: 16px;
  width: 16px;
  border-radius: 100%;
}

.graph-head-dot4 {
  background-color: #049286;
  height: 16px;
  width: 16px;
  border-radius: 100%;
}

.dash-plan-secttwo-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-plan-secttwo-inner p {
  font-size: 16px;
  color: var(--primary-color);
}

.chart-container {
  width: 100%;
  height: 230px;
  box-sizing: border-box;
  position: relative;
  margin-top: 25px;
}

canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Custom tooltip bubble */
.custom-tooltip {
  width: 125.6px;
  height: 62px;

  position: absolute;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-image: url("/assets/icons/custom-too-tip.svg");
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: all 0.15s ease-out;
}

.custom-tooltip strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-top: 10px;
}

.custom-tooltip span {
  font-size: 12px;
  color: #696974;
}

.dash-plan-secttwo-inner>p:first-child {
  font-family: "Inter_28pt-SemiBold";
}

.dash-plan-secttwo-inner>p:last-child {
  font-family: "Inter_18pt-Bold";
}

.dash-cur-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: "Inter_18pt-Bold";
  color: var(--color-two);
  background-color: var(--color-twenty-two);
  border-radius: 8px;
  height: 46px;
  padding-left: 40px;
  padding-right: 40px;
}

.dash-api-hd {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dash-api-hd-tl {
  font-size: 20px;
  font-family: "Inter_28pt-SemiBold";
}

.dash-api-hd-subtl {
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
  color: var(--color-thirteen);
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox .checkmark {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 2px solid var(--color-twelve);
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}

.custom-checkbox input[type="checkbox"]:checked+.checkmark {
  background-color: var(--secondary-color);
  border: none;
}

.custom-checkbox input[type="checkbox"]:checked+.checkmark::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 3px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.custom-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter_28pt-SemiBold";
}

.custom-checkbox a {
  text-decoration: none;
  color: var(--custom-seven);
}

.dash-tool-tip {
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-top: 25px; */
  margin-left: 4px;
}

.dash-tool-tip>img {
  height: 100%;
  width: 100%;
}

.dash-api-content {
  background-color: var(--color-six);
  padding: 40px 20px;
  border-radius: 8px;
}

.dash-api-content-hd {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}

.dash-api-content-sel {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.dash-api-content-sect1 {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  margin-top: 24px;
  margin-bottom: 32px;
}

.token-con {
  flex: 1;
  padding-left: 28px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  border-radius: 8px;
  box-sizing: content-box;
  flex: 1;
  border: 1px solid var(--color-nine);
}

.main-token {
  color: var(--color-four);
  font-size: 16px;
  font-family: "Inter_28pt-Regular";
}

.dash-copy-btn {
  background-color: transparent;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  border: none;
  padding-left: 28px;
  padding-right: 28px;
}

.dash-copy-btn-img-container {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

.dash-copy-btn-img-container>img {
  height: 100%;
  width: 100%;

}

.btn-spinner {
  border: 3px solid #fff;
  border-top: 3px solid #666;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-block;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.chart-spinner {
  border: 3px solid var(--color-nine);
  /* Transparent track */
  border-top: 3px solid var(--secondary-color);
  /* Primary blue spinner */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 0.8s linear infinite;
  display: block;
}

.chart-loading-state {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  gap: 4px;
}

.chart-loading-text {
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  color: #6B7280;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.ratoken-btn {
  height: 46px;
  background-color: var(--color-two);
  border-radius: 8px;
  padding-left: 40px;
  padding-right: 40px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: "Inter_18pt-Bold";
  color: var(--color-one);
  white-space: nowrap;
}

.link-container {
  display: flex;
  align-items: center;
  gap: 11.2px;
}

.link-container {
  text-decoration-color: var(--color-twelve);
}

.token-link-title {
  font-family: "Inter_28pt-Regular";
  color: var(--color-twelve);
  font-size: 16px;
  word-break: break-all;
}

.token-link-icon {
  height: 17px;
  width: 17px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
}

.token-link-icon>img {
  height: 100%;
  width: 100%;
}

.tooltip {
  position: relative;
  display: flex;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: max-content;
  max-width: 221px;
  margin-bottom: 6px;
  box-shadow: 0px 2px 7px 0px #0000001f;
  background-color: var(--color-six);
  padding: 14px;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: auto;
  right: -10px;
  /* Align to the right side */
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltiptexttle {
  font-size: 12px;
  color: var(--color-thirty-two);
  text-align: start;
  font-family: "Inter_28pt-SemiBold";

  margin-bottom: 8px;
}

.tooltiptextsubtle {
  line-height: 16.8px;
  font-size: 12px;
  text-align: start;
  font-family: "Inter_28pt-Regular";
  color: var(--color-thirty-three);
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  /* bottom: 100px; Removed invalid property */
  left: auto;
  right: 14px;
  /* Align arrow to point to the icon */
  margin-left: 0;
  border-width: 9px;
  border-style: solid;
  /* box-shadow: 0px 2px 7px 0px #0000001F; */
  border-color: var(--color-six) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* .dash-mobi-nav-links {
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
}

.dash-mobi-nav-links>a {
    height: 44px;
    display: flex;
    flex-direction: row;
    text-decoration: none;
} */
.dash-current-plan {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 40px;
}

.dash-current-plan-title {
  font-size: 14px;
  font-weight: 600;
  color: #252525;
}

.dash-current-plan-hd {
  display: flex;
  justify-content: space-between;
}

.Current-plan-dat {
  font-weight: 400;
  font-size: 12px;
  color: #404040;
}

.main-current-plan-box {
  width: 100%;
  height: 88px;
  padding: 16px 24px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;

}

.Current-plan-plan-cont {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.Current-plan-plan {
  font-size: 16px;
  font-weight: 600;
  color: #252525;
}

.api-request-left {
  font-size: 16px;
  line-height: 1.5;
}

.plan-limit-line {
  font-weight: 800; /* Prominent boldness for the limit */
  color: #252525;
  display: block;
}

.plan-remaining-line {
  font-weight: 400; /* Reduced boldness for the remaining tokens */
  color: #737373; /* Subtle grey */
  font-size: 14px;
  display: block;
  margin-top: 4px;
}

.Current-plan-upgrade-btn {
  width: 169px;
  padding: 12px 40px;
  box-sizing: border-box;
  border: 0;
  background-color: #ECF2FD;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  color: #1452CA;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;

}


/* Quick Links Section */
.dash-quick-links {
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: white;
  padding: 16px;
  border-radius: 8px;
}

.dash-quick-links-tle {
  font-size: 16px;
  font-family: "Inter_28pt-SemiBold";
  color: #252525;
  margin-bottom: 16px;
  font-weight: 600;
}

.dash-quick-links-cont {
  display: flex;
  gap: 16px;
  /* Spacing between cards */
  overflow-x: auto;
  /* Scroll on overflow */
  padding-bottom: 4px;
}

.quick-link-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #F7F7F7;
  /* Light grey bg */
  padding: 17px 16px;
  border-radius: 8px;
  text-decoration: none;
  min-width: fit-content;
  border: 1px solid #EDEDED;
  flex: 1;
  /* Distribute space evenly */
}

.quick-link-card:hover {
  background-color: #F0F0F2;
  border-color: #F0F0F2;
}

.quick-link-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-link-icon img {
  width: 100%;
  height: 100%;
  /* Filter to #1452CA */
  filter: invert(19%) sepia(96%) saturate(3946%) hue-rotate(219deg) brightness(86%) contrast(98%);
}

.quick-link-text {
  font-family: "Inter_18pt-Bold";
  font-size: 14px;
  font-weight: 700;
  color: #1452CA;
  white-space: nowrap;
}

/* Dashboard Grid Section (3 Columns) */
.dash-grid-section {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  /* Responsive wrap */
  padding-left: 0;
  padding-right: 0;
}

/* Card Container Base */
.dash-card {
  background-color: #ffffff;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  padding: 16px;
  flex: 1;
  min-width: 300px;
  /* Minimum width before wrapping */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
  gap: 4px;
}

.dash-card-header h3 {
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  color: #252525;
  margin: 0;
  font-weight: 600;
}

.info-icon-wrapper {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.6;
}

.info-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Inputs & Forms */
.input-group {
  margin-bottom: 20px;
}

.input-group:last-child {
  margin-bottom: 0;
}

.input-group label {
  display: block;
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #737373;
  margin-bottom: 8px;
  font-weight: 400;
}

.copy-input-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0.3px solid #1452CA;
  border-radius: 8px;
  padding: 13px 12px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  height: 52px;
}

.copy-input-field.grey-bg {
  background-color: #F8F8F8;
  border: none;
  /* Specific grey for endpoints */
}

.copy-input-field.grey-bg .truncated-text {
  color: #252525 !important;
}

.truncated-text {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.copy-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Inter_28pt-SemiBold";
  font-size: 12px;
  color: #737373;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
}

.copy-btn:hover {
  color: #18181B;
}

.copy-btn img {
  width: 20px;
  height: 20px;
}

/* API Actions Buttons */
.api-actions {
  display: flex;
  gap: 12px;
}

.btn {
  flex: 1;
  height: 50px;
  border-radius: 8px;
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-weight: 600;
}

.btn-primary {
  background-color: #1452CA;
  color: #FDFDFD;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-outline {
  background-color: #ffffff;
  border: 1px solid #1452CA;
  color: #1452CA;
}

.btn-outline:hover {
  background-color: #F0F4FF;
}

.divider {
  height: 1px;
  background-color: #EDEDED;
  margin: 20px 0;
}

/* Monitoring Column */
.flex-header {
  justify-content: space-between;
  width: 100%;
}

/* Custom Monitoring Date Dropdown */
.custom-dropdown {
  position: relative;
  display: inline-block;
  min-width: 140px;
}

.dropdown-trigger {
  background-color: #F8F8F8;
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font-family: "Inter_28pt-Regular";
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.dropdown-trigger::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.59 0.589844L6 5.16984L1.41 0.589844L0 1.99984L6 7.99984L12 1.99984L10.59 0.589844Z' fill='%236B7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.2s ease;
}

.custom-dropdown.active .dropdown-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 110%;
  /* below trigger */
  left: 0;
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  display: none;
  max-height: 250px;
  overflow-y: auto;
}

.custom-dropdown.active .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  padding: 10px 12px;
  font-family: "Inter_28pt-Regular";
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: #F8F8F8;
  color: #252525;
}

.dropdown-item.selected {
  font-weight: 600;
  color: #1452CA;
  background-color: #ECF2FD;
}

.chart-donut-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
  margin-bottom: 8px;
  width: 100%;
  gap: 0;
  /* Removing gap, using negative margin on label to pull closer */
  position: relative;
  padding-left: 0;
}

.donut-chart-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.donut-svg {
  width: 200px;
  height: 200px;
}

.chart-total-label {
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  color: #000;
  position: absolute;
  right: -80px;
  /* Push it out to the right */
  top: 50%;
  transform: translateY(-50%);
  /* Vertical Center */
  font-weight: 600;
  width: max-content;
  /* Ensure it doesn't wrap weirdly */
}

.chart-legend {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-indicator {
  width: 20px;
  height: 4px;
  /* Pill shape indicator */
  border-radius: 5px;
}

.indicator-blocked {
  background-color: #F1416C;
}

.indicator-clean {
  background-color: #009900;
}

.legend-text {
  display: flex;
  flex-direction: column;
}

.legend-value {
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  color: black;
  margin-bottom: 4px;
  font-weight: 600;
}

.legend-label {
  font-family: "Inter_28pt-Regular";
  font-size: 14px;
  color: #7A7A7A;
}

/* Plan Column */
.expire-text {
  font-family: "Inter_28pt-Regular";
  font-size: 14px;
  color: #404040;
}

.plan-info-box {
  background-color: #F7F7F7;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.plan-name {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #737373;
  margin-bottom: 12px;
}

.plan-usage {
  font-family: "Inter_18pt-Bold";
  font-size: 16px;
  color: #252525;
  margin: 0;
  font-weight: 700;
}

.btn-light-blue {
  width: 147px !important;
  height: 50px !important;
  /* Force height */
  background-color: #ECF2FD;
  color: #1452CA;
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  flex: none !important;
  /* Prevent flex-grow in column layout */
}

.btn-light-blue:hover {
  background-color: #DEE8FF;
}

.full-width {
  width: 100%;
}

.plan-divider {
  height: 1px;
  width: 100%;
  background-color: #EDEDED;
  margin: 12px 0;
}

.seats-container {
  background-color: #F7F7F7;
  border-radius: 8px;
  padding: 12px;
}

.seats-title {
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  color: #252525;
  margin-bottom: 12px;
  font-weight: 600;
}

.seat-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seat-item {
  display: flex;
  justify-content: space-between;
}

.seat-email {
  font-family: "Inter_28pt-Regular";
  font-size: 16px;
  color: #252525;
}

.seat-status {
  font-family: "Inter_28pt-Regular";
  font-size: 14px;
  color: #737373;
}

.seats-actions {
  border-top: 1px solid #E4E4E7;
  padding-top: 14px;
  display: flex;
  margin-top: 14px;
  justify-content: space-between;
}

.action-link-blue {
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  color: #1452CA;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}

.action-link-blue:hover {
  text-decoration: underline;
}


/* =========================================
   LAST 20 API REQUESTS TABLE
   ========================================= */

.dash-requests-section {
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  overflow: visible;
  /* Allow content to grow and dropdowns to overflow */
  height: auto;
  margin-top: 16px;
}

.req-table-title {
  padding: 16px 24px;
  border-bottom: 1px solid #EDEDED;
  font-family: 'Inter_28pt-SemiBold';
  font-size: 16px;
  color: #252525;
}

.req-table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  /* Though clipped by x-scroll, JS Portal will hover above it. */
  height: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll for iOS */
}

/* Ensure table itself doesn't have height constraints */
.req-table-container table,
.req-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
  height: auto !important;
  max-height: none !important;
}

.req-table thead {
  background: #F9FAFB;
}

.req-table th {
  text-align: left;
  padding: 16px 24px;
  font-family: 'Inter_28pt-SemiBold';
  font-size: 14px;
  color: #252525;
  font-weight: 600;
  white-space: nowrap;
}

.req-table td {
  padding: 16px 24px;
  border-bottom: 1px solid #EDEDED;
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  color: #252525;
  vertical-align: middle;
}

.req-table td:first-child {
  font-family: 'Inter_28pt-SemiBold';
  color: #737373;
}



.req-value {
  color: #252525;
}

/* Utility Class for Centering Table Columns */
.table-center {
  text-align: center !important;
  vertical-align: middle !important;
}

.table-center .status-badge,
.table-center .action-btn {
  margin: 0 auto !important;
}

.table-right {
  text-align: right !important;
  vertical-align: middle !important;
}

.table-right .status-badge,
.table-right .action-btn,
.table-right .action-icon-btn {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  width: fit-content;
  white-space: nowrap;
}

.status-badge img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.status-reported {
  background: #FFF7CC;
  color: #A38A00;
}

.status-blocked {
  background: #FFEBEB;
  color: #FF0000;
}

.status-allowed {
  background: #EBFFEB;
  color: #008000;
}

.status-bool-yes {
  background: #EBFFEB;
  color: #008000;
}

.status-bool-no {
  background: #FFEBEB;
  color: #FF0000;
}

.status-bool-unresolved {
  background: #FFFBD6;
  color: #854D0E;
}

.action-icon-wrapper {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-icon-wrapper img,
.action-icon-wrapper svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 6.5px;
  background: #F7F7F7;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  color: #1452CA;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
  white-space: nowrap;
}

.action-btn:hover {
  background: #F4F4F5;
  border-color: #D4D4D8;
}

.btn-add-block {
  color: #3F3F46;
}

/* View More Button */
.req-view-more-btn {
  display: block;
  margin: 16px 24px;
  padding: 10px 20px;
  background: #FFFFFF;
  border: 1px solid #2563EB;
  border-radius: 8px;
  font-family: 'Inter_28pt-SemiBold';
  font-size: 14px;
  color: #2563EB;
  cursor: pointer;
  width: fit-content;
  text-decoration: none;
}

.req-view-more-btn:hover {
  background: #EFF6FF;
}


/* Empty State Animation */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  animation: fadeIn 0.8s ease-out forwards;
  width: 100%;
}

.empty-state-svg {
  width: 80px;
  height: auto;
  margin-bottom: 24px;
  animation: float 6s ease-in-out infinite;
  /* Filter to colorize the SVG to #252525 */
  filter: brightness(0) saturate(100%) invert(13%) sepia(2%) saturate(4%) hue-rotate(324deg) brightness(96%) contrast(92%);
  opacity: 0.8;
}

.empty-state-title {
  font-family: 'Inter_28pt-SemiBold';
  font-size: 18px;
  color: #252525;
  margin-bottom: 8px;
  opacity: 0;
  animation: slideUp 0.6s ease-out 0.2s forwards;
}

.empty-state-desc {
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  color: #737373;
  opacity: 0;
  animation: slideUp 0.6s ease-out 0.4s forwards;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media only screen and (max-width: 1151px) {
  .dash-api-content-sect1 {
    align-items: start;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
    box-sizing: border-box;
    margin-bottom: 32px;
  }

  .dash-copy-btn {
    height: 46px;
  }

  .token-con {
    width: 100%;
    box-sizing: border-box;
  }

  .ratoken-btn {
    width: 100%;
  }
}

@media only screen and (max-width: 748px) {
  .dash-api-content-hd {
    flex-direction: column;
    align-items: start;

  }

  .dash-plan-inner-cont {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
  }

  .graph-sub-head-cont {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }

  .graph-sub-head p {
    font-size: 12px !important;
  }

  .dash-inner-graph-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }



  .dash-inner-graph {
    height: auto;
  }

  .dash-inner-section {

    width: 100%;
    overflow: hidden !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 15px !important;
  }

  .quick-link-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .quick-link-text {
    font-size: 14px !important;
  }


  .dash-header-tle-mobile {
    padding-left: 16px !important;
    padding-right: 16px !important;
    justify-items: center;
    box-sizing: border-box;
  }

  .graph-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .chart-container {
    width: 500px;
  }

  .dash-current-plan {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .dash-current-plan-title {
    font-size: 14px;
    font-weight: 600;
    color: #252525;
  }

  .dash-current-plan-hd {

    padding: 0px 16px;
  }

  .main-current-plan-box {
    width: 100%;
    height: 88px;
    padding: 16px 24px;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-top: 16px;

  }


  .Current-plan-plan-cont {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .Current-plan-plan {
    font-size: 12px;
    font-weight: 600;
    color: #252525;
  }

  .api-request-left {
    font-size: 12px;
    font-weight: 800;
  }


  .dash-inner-section .page-title {
    font-size: 20px;
    margin-top: 11px;
    margin-bottom: 12px;
  }

  .dash-plan,
  .dash-grid-section {
    margin-bottom: 16px;
    gap: 16px;
  }

  .Current-plan-upgrade-btn {
    width: 100px;
    padding: 12px 40px;
    box-sizing: border-box;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    background-color: #ECF2FD;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #1452CA;

  }

  .dash-quick-links-cont {
    flex-direction: column;
  }

}

@media only screen and (max-width: 628px) {
  .main-token {
    font-size: 15px;
  }

  .dash-quick-links {
    margin-bottom: 16px;
    margin-top: 0px;
    background-color: white;
    padding: 16px;
    border-radius: 8px;
  }

  .dash-requests-section {
    margin-top: 0px !important;
  }

  .dash-welcome-title {
    font-size: 20px;
  }

  .dash-welcome-container {
    gap: 8px;
    /* Top padding provided by parent, but maybe space from header? Parent has padding-top now. */
  }



  .dash-plan-anaylysis-title,
  .dash-welcome-subtitle {
    font-size: 12px;
  }

  .dash-plan-total {
    font-size: 20px;
  }

  .doting {
    width: 8px;
    height: 8px;
  }

  .graph-header {
    font-size: 14px;
  }

  .dash-plan-analysis {
    box-sizing: border-box;
    height: auto;
    padding: 12px;
  }

  .dash-api-hd {
    padding: 20px 12px 16px 16px !important;
  }

  .card-trend-col {
    display: flex;
    flex-direction: row-reverse;
  }

  .card-trend-row {
    font-size: 12px;
  }
}

@media only screen and (max-width: 550px) {
  .dash-plan-tle {
    font-size: 14px;
  }


  .dash-plan-subtle {
    font-size: 12px;
  }

  .dash-plan-sectone {
    margin-bottom: 12px;
    margin-top: 28px;
  }

  .dash-plan-secttwo {
    padding: 13px;
  }

  .dash-plan-secttwo-inner>p:first-child {
    font-size: 12px;
  }

  .dash-plan-secttwo-inner>p:last-child {
    font-size: 14px;
  }

  .dash-cur-plan {
    font-size: 12px;
    height: 41px;
    padding-left: 24px;
    padding-right: 24px;
  }




  .dash-api-hd-tl,
  .dash-api-hd-subtl {
    font-size: 12px;
  }

  .dash-api-content {
    /* margin-left: -16px;
    margin-right: -16px; */
    padding: 20px 16px;
    border-radius: 8px;

  }

  .dash-api-content-hd {
    gap: 16px;
  }

  .custom-checkbox {
    font-size: 12px;
  }

  .main-token {
    font-size: 12px;
  }

  .dash-copy-btn-tle {
    display: none;
  }

  .token-con {
    padding: 0px 8px;
    height: fit-content;
    box-sizing: border-box;
  }

  .ratoken-btn {
    font-size: 12px;
  }

  .dash-api-content-sect1 {
    margin-bottom: 20px;
  }

  .token-link-title {
    font-size: 10px;
  }

  .token-link-icon {
    height: 14px;
    width: 14px;
  }
}

/* Premium Error State */
.fetch-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-height: 200px;
  animation: fadeIn 0.5s ease-out;
  text-align: center;
  gap: 12px;
}

.error-icon-wrapper {
  width: 48px;
  height: 48px;
  background-color: #FEF2F2;
  /* Light Red BG */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.fetch-error-state svg {
  width: 24px;
  height: 24px;
  color: #DC2626;
  /* Red 600 */
}

.error-title {
  font-family: "Inter_28pt-SemiBold";
  font-size: 16px;
  color: #252525;
  font-weight: 600;
  margin: 0;
}

.error-desc {
  font-family: "Inter_28pt-Regular";
  font-size: 14px;
  color: #6B7280;
  margin: 0;
  max-width: 250px;
}

.retry-btn {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 6px;
  font-family: "Inter_28pt-SemiBold";
  font-size: 14px;
  color: #252525;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

.retry-btn:hover {
  background-color: #F8F8F8;
  border-color: #DC2626;
  /* Hover border red? Or just grey */
  color: #DC2626;
}

.retry-btn:active {
  transform: scale(0.98);
}

.retry-btn svg {
  width: 16px;
  height: 16px;
}

/* --- Action Dropdown --- */
.action-dropdown {
  position: relative;
  display: inline-block;
}

.action-menu-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #98A2B3;
  /* Default gray for icon */
}

.action-menu-trigger:hover {
  background-color: #F2F4F7;
  color: #101828;
}

.action-menu-trigger svg {
  width: 20px;
  height: 20px;
}


.action-dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  width: 155px;
  z-index: 100;
  display: none;
  /* Changed from flex to none to prevent vertical overflow when hidden */
  flex-direction: column;
  padding: 16px 12px;

  /* Hidden State by Default (for animation) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.9);
  filter: blur(12px);
  transform-origin: top right;

  /* Quick Exit Transition */
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.2s;
}

/* Show on Hover (Desktop) - Replaced by JS Portal in chart.js but keeping base styles */
/* PortalManager handles 'active' class for both hover/click contexts where needed */
.action-dropdown-menu.active {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  filter: blur(0);
  /* Bouncy/Spring Entry Transition Override for active state */
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1),
    filter 0.4s ease;
}

.dropdown-item {
  display: flex;
  align-items: center;
  /* Space between icon and text */
  padding: 10px 12px;
  font-family: 'Inter_18pt-Regular', sans-serif;
  font-size: 14px;
  color: #344054;
  text-decoration: none;

  /* User requested no border radius */
  border-radius: 0;

  border: none;
  border-bottom: 1px solid #EDEDED;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  /* Explicitly align left */
}

.dropdown-item:last-child {
  border-bottom: none;
  /* Add border radius to last child if container has radius? 
     Container has radius 8px. 
     If items have no radius, they might overflow corners if background changes on hover?
     Usually yes. 
     So actually first-child and last-child should have radius matching container?
     User said "Remove border radous from te button".
     Maybe they want square buttons.
     But container is rounded.
     If I remove radius from button, on hover the background will be square and might poke out if padding is 0.
     Padding on container is 16px 12px? No, padding was changed to `padding: 16px 12px` on container.
     Wait, if container has padding, then buttons are inside.
     So buttons don't touch edges.
     So removing border radius is fine and correct.
  */
}

.dropdown-item:hover {
  background-color: #F9FAFB;
  color: #101828;
}

/* Icon Styles in Dropdown */
.dropdown-item img {
  width: 18px;
  /* Slightly larger for menu */
  height: 18px;
}

/* Specific item colors/icons override */
.dropdown-item.btn-add-allow {
  color: #027A48;
  /* Success/Green Text */
}

/* Use SVG filter to color icons or trust the provided SVGs have colors if simple img src */
/* Assuming standard icons from assets - applying filters to ensure colors match design */

.dropdown-item.btn-add-allow img {
  /* Green filter */
  filter: invert(33%) sepia(96%) saturate(399%) hue-rotate(97deg) brightness(93%) contrast(92%);
}

.dropdown-item.btn-add-block {
  color: #B42318;
  /* Error/Red Text */
}

.dropdown-item.btn-add-block img {
  /* Red filter */
  filter: invert(19%) sepia(70%) saturate(4975%) hue-rotate(352deg) brightness(96%) contrast(96%);
}

.dropdown-item.btn-report {
  color: #B54708;
  /* Warning/Gold Text */
}

.dropdown-item.btn-report img {
  /* Gold/Orange filter */
  filter: invert(36%) sepia(96%) saturate(1478%) hue-rotate(2deg) brightness(91%) contrast(96%);
}

/* Premium Restriction Styles */
.premium-restriction img {
  width: 48px;
  margin-bottom: 16px;
}

.premium-restriction .btn-upgrade {
  margin-top: 20px;
  text-decoration: none;
  flex: none;
  width: max-content;
  padding: 0 24px;
}
/* --- NEW METRICS ROW --- */
.dash-stats-row {
  display: flex;
  gap: 24px;
  width: 100%;
  margin-top: 32px;
}

.dash-stat-card {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-icon-wrapper {
  width: 40px;
  height: 40px;
  background-color: #F8FAFC;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon-wrapper img {
  width: 20px;
  height: 20px;
}

.stat-title {
  font-family: 'Inter_28pt-SemiBold';
  font-size: 14px;
  color: #64748B;
}

.stat-card-right {
  display: flex;
  align-items: center;
}

.stat-value {
  font-family: 'Inter_18pt-Bold';
  font-size: 32px;
}

.value-registered { color: #1452CA; }
.value-free { color: #8B008B; }
.value-paid { color: #049286; }

/* --- NEW ANALYTICS SECTION --- */
.dash-analytics-section {
  background-color: #ffffff;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
  width: 100%;
}

.analytics-header {
  font-family: 'Inter_18pt-Bold';
  font-size: 18px;
  color: #111827;
  margin: 0;
  margin-bottom: 24px;
}

.analytics-legend {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter_28pt-SemiBold';
  font-size: 13px;
  color: #4B5563;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.bg-blue { background-color: #1452CA; }
.bg-purple { background-color: #8B008B; }
.bg-teal { background-color: #049286; }

.chart-wrapper {
  width: 100%;
  height: 300px;
  position: relative;
}

/* --- NEW USERS TABLE --- */
.dash-users-section {
  background-color: #ffffff;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  margin-top: 24px;
  width: 100%;
  overflow: hidden;
}

.users-tabs {
  display: flex;
  border-bottom: 1px solid #EBEBEB;
  padding: 0 24px;
  gap: 32px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 20px 0;
  font-family: 'Inter_28pt-SemiBold';
  font-size: 15px;
  color: #64748B;
  cursor: pointer;
  position: relative;
}

.tab-btn.active {
  color: #111827;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1452CA;
}

.users-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #EBEBEB;
}

.users-search-input {
  width: 280px;
  padding: 10px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  color: #0f172a;
  outline: none;
}

.users-search-input::placeholder {
  color: #94A3B8;
}

.users-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pagination-text {
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  color: #64748B;
}

.pagination-btn {
  background-color: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
}

.pagination-btn:disabled {
  background-color: #F8FAFC;
  color: #CBD5E1;
  cursor: not-allowed;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.users-data-table {
  width: 100%;
  border-collapse: collapse;
}

.users-data-table th {
  background-color: #F8FAFC;
  padding: 12px 24px;
  text-align: left;
  font-family: 'Inter_28pt-SemiBold';
  font-size: 12px;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.users-data-table td {
  padding: 16px 24px;
  border-bottom: 1px solid #F1F5F9;
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
}

.users-data-table tr:hover {
  background-color: #F8FAFC;
}

.users-data-table tr:last-child td {
  border-bottom: none;
}

.users-data-table .text-center {
  text-align: center;
}

/* --- SETTINGS SECTION --- */
.dash-settings-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  width: 100%;
}

.setting-row {
  background-color: #ffffff;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.setting-icon-circle {
  width: 48px;
  height: 48px;
  background-color: #F8FAFC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setting-icon-circle img {
  width: 24px;
  height: 24px;
}

.setting-text {
  font-family: 'Inter_28pt-SemiBold';
  font-size: 15px;
  color: #111827;
}

.setting-action {
  display: flex;
  align-items: center;
  gap: 24px;
}

.setting-status-text {
  font-family: 'Inter_28pt-Regular';
  font-size: 14px;
  color: #64748B;
}

.setting-status-text .text-blue {
  color: #1452CA;
  font-family: 'Inter_18pt-Bold';
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CBD5E1;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

input:checked + .toggle-slider {
  background-color: #1452CA;
}

input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* RESPONSIVE TABLE & CARDS */
@media (max-width: 1024px) {
  .dash-stats-row {
    flex-direction: column;
  }
}