/* F4Pool v4.5 — Miner Dashboard fluid cards and typography
   Loaded after the previous responsive styles. */

/* Build the miner statistics row from the real available width after the sidebar. */
.page-dashboard .row:has(> [class*="col-"] > .info-box) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(12px, 1.15vw, 18px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.page-dashboard .row:has(> [class*="col-"] > .info-box) > [class*="col-"] {
  display: flex !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Four columns only when there is genuinely enough content space. */
@container (min-width: 1500px) {
  .page-dashboard .row:has(> [class*="col-"] > .info-box) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@container (min-width: 920px) and (max-width: 1499px) {
  .page-dashboard .row:has(> [class*="col-"] > .info-box) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container (min-width: 560px) and (max-width: 919px) {
  .page-dashboard .row:has(> [class*="col-"] > .info-box) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container (max-width: 559px) {
  .page-dashboard .row:has(> [class*="col-"] > .info-box) {
    grid-template-columns: 1fr !important;
  }
}

/* Each card becomes its own size container, so text follows card width. */
.page-dashboard .info-box {
  container-type: inline-size;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(108px, 9vw, 132px) !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.page-dashboard .info-box-icon {
  display: grid !important;
  flex: 0 0 clamp(54px, 18cqw, 70px) !important;
  width: clamp(54px, 18cqw, 70px) !important;
  min-width: clamp(54px, 18cqw, 70px) !important;
  place-items: center !important;
  font-size: clamp(17px, 5cqw, 22px) !important;
}

.page-dashboard .info-box-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: clamp(5px, 1.5cqw, 8px) !important;
  width: auto !important;
  min-width: 0 !important;
  padding: clamp(12px, 4cqw, 18px) !important;
  overflow: hidden !important;
}

.page-dashboard .info-box-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  font-size: clamp(9px, 2.7cqw, 11px) !important;
  line-height: 1.25 !important;
  letter-spacing: .075em !important;
}

.page-dashboard .info-box-number,
.page-dashboard .info-box-number > div,
.page-dashboard .info-box-number a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  font-size: clamp(14px, 4.6cqw, 20px) !important;
  line-height: 1.28 !important;
  letter-spacing: -.015em !important;
  font-variant-numeric: tabular-nums;
}

/* Long two-line values need slightly smaller fluid text. */
.page-dashboard #pendingBalance,
.page-dashboard #MinersShare,
.page-dashboard #paidBalance,
.page-dashboard #BlocksByMiner,
.page-dashboard #MinersCoins,
.page-dashboard #lastPayment,
.page-dashboard #minPayment,
.page-dashboard #BestminerHashRate,
.page-dashboard #lastPaymentLink {
  font-size: clamp(13px, 3.9cqw, 18px) !important;
  line-height: 1.32 !important;
}

.page-dashboard #BestminerHashRate,
.page-dashboard #lastPaymentLink,
.page-dashboard #lastPaymentLink a {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Preserve visual separation between values generated with <br>. */
.page-dashboard .info-box-number br,
.page-dashboard .info-box-number > div br {
  display: block !important;
  content: "" !important;
  margin-top: clamp(3px, 1.1cqw, 6px) !important;
}

/* Stop old theme rules from forcing oversized heading/value styles. */
.page-dashboard #Overview .info-box h1,
.page-dashboard #Overview .info-box h2,
.page-dashboard #Overview .info-box h3,
.page-dashboard #Overview .info-box h4,
.page-dashboard #Overview .info-box h5,
.page-dashboard #Overview .info-box h6,
.page-dashboard #Overview .info-box p {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* Compact phone treatment. */
@media (max-width: 600px) {
  .page-dashboard .info-box {
    min-height: 102px !important;
  }

  .page-dashboard .info-box-number,
  .page-dashboard .info-box-number > div,
  .page-dashboard .info-box-number a {
    font-size: 16px !important;
  }

  .page-dashboard #pendingBalance,
  .page-dashboard #MinersShare,
  .page-dashboard #paidBalance,
  .page-dashboard #BlocksByMiner,
  .page-dashboard #MinersCoins,
  .page-dashboard #lastPayment,
  .page-dashboard #minPayment,
  .page-dashboard #BestminerHashRate,
  .page-dashboard #lastPaymentLink {
    font-size: 15px !important;
  }
}