/* MINING QUALITY-OF-LIFE PASS */

.page-mining .mining-admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 157, 66, .42);
  color: #e0a06c;
  background:
    linear-gradient(180deg, rgba(255, 190, 123, .035), transparent 34%),
    rgba(2, 13, 21, .68);
  box-shadow:
    inset 0 1px 0 rgba(244, 220, 196, .06),
    inset 0 -1px 0 rgba(0, 0, 0, .72);
  text-decoration: none;
  font-family: "Oxanium", sans-serif;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page-mining .mining-admin-button:hover {
  border-color: rgba(255, 170, 91, .66);
  background: rgba(255, 157, 66, .07);
  color: #f1b37d;
}

.page-mining .market-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin: 2px 0 18px;
  padding: 14px;
  border: 1px solid rgba(126, 181, 203, .22);
  background:
    linear-gradient(180deg, rgba(204, 230, 239, .025), transparent 34%),
    rgba(2, 12, 20, .62);
}

.page-mining .market-tools .mining-tool-group {
  min-width: 0;
}

.page-mining .market-helper {
  grid-column: 1 / -1;
  margin: 0;
  color: #637f8d;
  font-size: .78rem;
  line-height: 1.45;
}

.page-mining .mining-best-market {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(116, 176, 200, .15);
}

.page-mining .mining-best-market p {
  margin: 3px 0;
}

.page-mining .mining-best-market-label {
  color: var(--archive-orange);
  font-family: "Oxanium", sans-serif;
  font-size: .49rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.page-mining .mining-best-market-price {
  color: #c2d4dc;
  font-family: "Oxanium", sans-serif;
  font-size: .92rem;
  font-weight: 700;
}

.page-mining .mining-best-market-detail,
.page-mining .mining-best-market-age,
.page-mining .mining-best-market-empty {
  color: #6f8996;
  font-size: .8rem;
}

.page-mining .mining-best-market-age.stale {
  color: #d19562;
}

.page-mining .mining-best-market-empty {
  color: #7f929c;
}

.page-mining .mining-location-row .mining-best-market {
  margin-top: 10px;
}

.page-mining .commodity-market-label {
  line-height: 1.35;
}

.page-mining .mining-report-panel::before {
  content: "ENTER advances fields · use Submit for Review to send";
  display: block;
  margin: 0 0 12px;
  color: #607d8b;
  font-family: "Oxanium", sans-serif;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* MATERIAL AMOUNT STATUS + QUICK REPORTING */
.page-mining .material-status-control {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(116, 176, 200, .13);
}

.page-mining .material-status-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-mining .material-status-label {
  color: #667f8c;
  font-family: "Oxanium", sans-serif;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.page-mining .material-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(126, 181, 203, .26);
  color: #8da5b1;
  background: rgba(3, 15, 24, .72);
  font-family: "Oxanium", sans-serif;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.page-mining .material-status-badge.material-high {
  border-color: rgba(102, 225, 255, .42);
  color: #70def5;
}

.page-mining .material-status-badge.material-medium {
  border-color: rgba(154, 203, 220, .34);
  color: #aec4ce;
}

.page-mining .material-status-badge.material-low {
  border-color: rgba(255, 157, 66, .42);
  color: #dfa16e;
}

.page-mining .material-status-badge.material-depleted {
  border-color: rgba(220, 96, 96, .46);
  color: #e48b8b;
}

.page-mining .material-status-badge.stale {
  border-style: dashed;
}

.page-mining .material-status-age {
  color: #5f7986;
  font-size: .72rem;
}

.page-mining .material-status-age.stale {
  color: #d19562;
}

.page-mining .material-report-button {
  display: inline-flex;
  margin-top: 9px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(101, 230, 255, .25);
  color: #59d5f2;
  background: rgba(2, 13, 21, .68);
  font-family: "Oxanium", sans-serif;
  font-size: .49rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}

.page-mining.material-report-enabled .material-report-button {
  display: inline-flex;
}

.page-mining .material-report-button:hover {
  border-color: rgba(101, 230, 255, .48);
  background: rgba(83, 215, 248, .07);
}

.page-mining .material-report-picker {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(126, 181, 203, .24);
  background: rgba(1, 10, 17, .74);
}

.page-mining .material-report-picker-label {
  display: block;
  margin-bottom: 8px;
  color: #7f98a4;
  font-family: "Oxanium", sans-serif;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page-mining .material-report-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-mining .material-report-options button {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(126, 181, 203, .25);
  color: #9fb5bf;
  background: rgba(4, 18, 28, .88);
  font-family: "Oxanium", sans-serif;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}

.page-mining .material-report-options button:hover {
  border-color: rgba(101, 230, 255, .48);
  color: #6bdcf5;
}

.page-mining .material-report-options button:disabled {
  opacity: .48;
  cursor: wait;
}

.page-mining .material-report-message {
  display: block;
  min-height: 1em;
  margin-top: 8px;
  color: #6f8996;
  font-size: .72rem;
}

.page-mining .material-report-message.success,
.page-mining .mining-results-status.material-success {
  color: #68dcf4;
}

.page-mining .material-report-message.error,
.page-mining .mining-results-status.material-error {
  color: #ff8585;
}

/* Keep depletion status visible at a glance without competing with site data. */
.page-mining .location-card.mining-site,
.page-mining .mining-location-row {
  position: relative;
}

.page-mining .location-card.mining-site > .location-type,
.page-mining .location-card.mining-site > h4 {
  max-width: calc(100% - 142px);
}

.page-mining .mining-location-row {
  padding-right: 150px;
}

.page-mining .material-status-control {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 8;
  min-width: 116px;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: right;
}

.page-mining .mining-location-row > .material-status-control {
  top: 12px;
  right: 14px;
}

.page-mining .material-status-summary {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.page-mining .material-status-label {
  display: none;
}

.page-mining .material-status-badge {
  justify-content: center;
  min-width: 52px;
  min-height: 24px;
  padding: 3px 8px;
  background: rgba(2, 13, 21, .90);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .18);
}

.page-mining .material-status-age {
  display: block;
  max-width: 130px;
  font-size: .62rem;
  line-height: 1.2;
  text-align: right;
}

.page-mining .material-report-button,
.page-mining.material-report-enabled .material-report-button {
  display: inline-flex;
  min-height: auto;
  margin-top: 4px;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid rgba(101, 230, 255, .18);
  color: #587d8d;
  background: transparent;
  font-size: .43rem;
  letter-spacing: .08em;
  opacity: .82;
}

.page-mining .material-report-button:hover,
.page-mining.material-report-enabled .material-report-button:hover {
  border-bottom-color: rgba(101, 230, 255, .48);
  color: #62d9f3;
  background: transparent;
  opacity: 1;
}

.page-mining .material-report-picker {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 30;
  width: min(270px, calc(100vw - 48px));
  margin: 0;
  text-align: left;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42);
}

@media (max-width: 820px) {
  .page-mining .market-tools {
    grid-template-columns: 1fr;
  }

  .page-mining .market-helper {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .page-mining .location-card.mining-site > .location-type,
  .page-mining .location-card.mining-site > h4 {
    max-width: calc(100% - 112px);
  }

  .page-mining .mining-location-row {
    padding-right: 14px;
    padding-top: 74px;
  }

  .page-mining .material-status-control {
    top: 14px;
    right: 14px;
    min-width: 98px;
  }

  .page-mining .material-status-age {
    max-width: 108px;
  }
}