/*
 * =========================================================
 * APFEL_MINIAPP_CONTRAST_V1
 * Global readability / contrast compatibility layer
 * Loaded AFTER mobile-v4.css
 * =========================================================
 */

:root {
  /*
   * Bridge legacy tokens to Mobile V4 tokens.
   * This prevents old components from using a different
   * text/card palette than newer components.
   */
  --apfel-readable-bg:
    var(
      --m-bg,
      var(--bg, #080a0f)
    );

  --apfel-readable-surface:
    var(
      --m-surface,
      var(--card, #11141b)
    );

  --apfel-readable-text:
    var(
      --m-text,
      var(--text, #f7f8fb)
    );

  /*
   * Do NOT trust Telegram hint color directly.
   * Generate muted text from actual foreground/background.
   */
  --apfel-readable-muted:
    color-mix(
      in srgb,
      var(--apfel-readable-text) 72%,
      var(--apfel-readable-bg)
    );

  --apfel-readable-muted-strong:
    color-mix(
      in srgb,
      var(--apfel-readable-text) 82%,
      var(--apfel-readable-bg)
    );

  --apfel-readable-border:
    color-mix(
      in srgb,
      var(--apfel-readable-text) 18%,
      transparent
    );

  /*
   * Legacy compatibility
   */
  --bg:
    var(--apfel-readable-bg);

  --card:
    var(--apfel-readable-surface);

  --text:
    var(--apfel-readable-text);

  --hint:
    var(--apfel-readable-muted);

  --accent:
    var(
      --m-primary,
      #337cff
    );

  --accent-text:
    var(
      --m-primary-text,
      #fff
    );

  --link:
    var(
      --m-link,
      #4d91ff
    );
}


/* =========================================================
 * BASE TEXT
 * ========================================================= */

html,
body,
#app,
#content,
#viewRoot,
.page {
  color:
    var(--apfel-readable-text);
}


h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
label {
  color:
    inherit;
}


/* =========================================================
 * SURFACES
 * ========================================================= */

.card,
.menu-card,
.info-box,
.error-card,
.ap-admin-sales,
.ap-admin-finance-kpis > div,
.ap-admin-tech-grid > div,
.ap-admin-action,
.ap-admin-box,
.ap-admin-recent-user {
  color:
    var(--apfel-readable-text);
}


button.card {
  color:
    var(--apfel-readable-text) !important;
}


/* =========================================================
 * MUTED / SECONDARY TEXT
 * ========================================================= */

.muted,
.stat-label,
.quick-card small,
.menu-item small,
.info-box small,
.empty,
.mobile-dashboard-label,
.mobile-account-plan,
.mobile-setting-copy small,
.ap-admin-page-title p,
.ap-admin-section-head small,
.ap-admin-action-text small,
.ap-admin-box-head small,
.ap-admin-tech-grid small,
.ap-admin-finance-kpis small,
.ap-admin-tx-copy small,
.ap-admin-sales small,
.ap-admin-label,
.traffic-row {
  color:
    var(--apfel-readable-muted) !important;
}


/*
 * Some important secondary data should be slightly stronger
 * than normal muted text.
 */
.traffic-row,
.info-box small,
.ap-admin-finance-kpis small,
.ap-admin-tx-copy small {
  color:
    var(--apfel-readable-muted-strong) !important;
}


/* =========================================================
 * PAGE TITLES / ADMIN TEXT
 * ========================================================= */

.page-title,
.page-title h1,
.section-header,
.section-header h2,
.ap-admin-page-title,
.ap-admin-page-title h1,
.ap-admin-section-head strong,
.ap-admin-action-text strong,
.ap-admin-box-head strong,
.ap-admin-tech-grid strong,
.ap-admin-finance-kpis strong,
.ap-admin-tx-copy strong,
.ap-admin-tx-amount strong,
.stat-value {
  color:
    var(--apfel-readable-text) !important;
}


/*
 * Keep admin eyebrow labels visible.
 */
.ap-admin-page-title > div > small {
  color:
    var(
      --m-primary,
      #4d91ff
    ) !important;
}


/* =========================================================
 * INPUTS
 * ========================================================= */

input,
textarea,
select,
.search {
  color:
    var(--apfel-readable-text) !important;

  background-color:
    var(--apfel-readable-surface) !important;

  border-color:
    var(--apfel-readable-border) !important;

  caret-color:
    var(--apfel-readable-text);
}


input::placeholder,
textarea::placeholder,
.search::placeholder {
  color:
    var(--apfel-readable-muted) !important;

  opacity:
    1 !important;
}


select option {
  color:
    var(--apfel-readable-text);

  background:
    var(--apfel-readable-surface);
}


/*
 * Safari / iOS autofill can otherwise make text unreadable.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color:
    var(--apfel-readable-text) !important;

  caret-color:
    var(--apfel-readable-text);

  transition:
    background-color 99999s ease-out 0s;
}


/* =========================================================
 * BUTTONS
 * ========================================================= */

.primary-button {
  color:
    var(
      --m-primary-text,
      #fff
    ) !important;

  background:
    var(
      --m-primary,
      #337cff
    ) !important;
}


.secondary-button {
  color:
    var(--apfel-readable-text) !important;

  background:
    color-mix(
      in srgb,
      var(--apfel-readable-text) 10%,
      var(--apfel-readable-surface)
    ) !important;

  border:
    1px solid
    var(--apfel-readable-border);
}


button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity:
    .68 !important;
}


/* =========================================================
 * FINANCE / WALLET
 * ========================================================= */

/*
 * This card intentionally has its own dark gradient.
 * Its secondary text was previously ~48-50% white,
 * which was too faint.
 */
.ap-admin-balance {
  color:
    #fff !important;
}


.ap-admin-balance strong {
  color:
    #fff !important;
}


.ap-admin-balance small,
.ap-admin-balance span {
  color:
    rgba(
      255,
      255,
      255,
      .82
    ) !important;
}


/* =========================================================
 * NAVIGATION
 * ========================================================= */

.nav-item {
  color:
    var(--apfel-readable-muted) !important;
}


.nav-item.active {
  color:
    var(--apfel-readable-text) !important;
}


/* =========================================================
 * LINKS
 * ========================================================= */

a,
.link-button {
  color:
    var(
      --m-link,
      #4d91ff
    );
}


/* =========================================================
 * LIGHT MODE SAFETY
 * ========================================================= */

@media
(prefers-color-scheme: light) {

  :root {
    --apfel-readable-muted:
      color-mix(
        in srgb,
        var(--apfel-readable-text) 68%,
        var(--apfel-readable-bg)
      );

    --apfel-readable-muted-strong:
      color-mix(
        in srgb,
        var(--apfel-readable-text) 80%,
        var(--apfel-readable-bg)
      );
  }

}


/* =========================================================
 * HIGH CONTRAST USER PREFERENCE
 * ========================================================= */

@media
(prefers-contrast: more) {

  :root {
    --apfel-readable-muted:
      color-mix(
        in srgb,
        var(--apfel-readable-text) 88%,
        var(--apfel-readable-bg)
      );

    --apfel-readable-muted-strong:
      var(--apfel-readable-text);
  }

  .card,
  .search,
  input,
  textarea,
  select {
    border:
      1px solid
      var(--apfel-readable-border) !important;
  }

}


/* =========================================================
 * END APFEL_MINIAPP_CONTRAST_V1
 * ========================================================= */