/* kv_text_contrast.css
 * ---------------------------------------------------------------------------
 * Readable muted text — WCAG 2.1 AA (4.5:1 for normal text) for the three
 * Metronic gray utilities that carry real copy but were unreadable on white.
 *
 * MEASURED ON PRODUCTION (mydashboard.php, 390x844, computed styles read from
 * the live DOM — not taken from the theme source):
 *
 *     class            colour     contrast on #fff   AA (4.5:1)
 *     .text-gray-400   #C4CADA          1.64             FAIL
 *     .text-gray-500   #99A1B7          2.58             FAIL
 *     .text-gray-600   #78829D          3.83             FAIL
 *     .text-gray-700   #4B5675          7.27             pass
 *     .text-muted      #6C757D          4.69             pass
 *
 * 1.64:1 is effectively invisible. It was not decorative text either — the
 * failing elements were section subtitles and empty states a user must read:
 *   "Your latest posts and interactions", "People and communities you might
 *   like", "No active support tickets.", "You haven't created any pages yet."
 *
 * SCOPE / RISK: deliberately small. `.text-muted` is the dominant muted style
 * (69 text-carrying elements on the dashboard) and ALREADY passes, so it is
 * left alone; only ~9 elements per page use the three classes below. The ramp
 * is preserved (lightest -> darkest) and every replacement is an existing grey
 * from the theme, so the design language is unchanged — text just becomes
 * legible:
 *
 *     .text-gray-400   #C4CADA -> #6C757D   1.64 -> 4.69
 *     .text-gray-500   #99A1B7 -> #5D6675   2.58 -> 5.80
 *     .text-gray-600   #78829D -> #4B5675   3.83 -> 7.27
 *
 * Colour-only change: no geometry, no layout, no dark-mode tokens touched.
 * Reverting = deleting this file (and its <link> in incfiles/_kv_bottomnav_css.php).
 * ------------------------------------------------------------------------- */

:root {
  --kv-text-muted-aa:   #6C757D; /* 4.69:1 on white */
  --kv-text-muted-aa-2: #5D6675; /* 5.80:1 on white */
  --kv-text-muted-aa-3: #4B5675; /* 7.27:1 on white — theme's own gray-700 */
}

/* The utilities are declared in style.bundle.css with a plain class selector;
   this file is emitted after it, so equal specificity + later origin wins.
   !important is still used because a few Metronic components restate the
   colour inline on hover/active states. */
.text-gray-400 { color: var(--kv-text-muted-aa) !important; }
.text-gray-500 { color: var(--kv-text-muted-aa-2) !important; }
.text-gray-600 { color: var(--kv-text-muted-aa-3) !important; }

/* Sidebar-footer CTA buttons (RADAR / HELP in .app-sidebar-footer).
   Metronic's `.btn-custom` pattern paints `.btn-label` a muted grey and only
   turns it white on hover — but these sit on a SOLID brand fill, so the resting
   state is the unreadable one. Measured on production (classifieds.php):

       .btn-label   #B5B5C3   on button background #3F66DD   ->  2.49:1   FAIL

   White on that same fill measures 5.05:1, so the label simply becomes white in
   both states. Scoped to the sidebar footer so no other .btn-custom is touched. */
.app-sidebar-footer .btn-custom .btn-label,
.app-sidebar-footer .btn-custom:hover .btn-label { color: #fff !important; }

/* Hover variants follow the same ramp so links do not get lighter on hover. */
.text-hover-gray-400:hover { color: var(--kv-text-muted-aa) !important; }
.text-hover-gray-500:hover { color: var(--kv-text-muted-aa-2) !important; }
.text-hover-gray-600:hover { color: var(--kv-text-muted-aa-3) !important; }

/* Dark surfaces: on a dark card these greys are the *readable* end already, so
   darkening them there would invert the problem. Restore the theme values for
   any element inside an explicitly dark container. */
[data-bs-theme="dark"] .text-gray-400,
.bg-dark .text-gray-400,
.card.bg-dark .text-gray-400 { color: #C4CADA !important; }
[data-bs-theme="dark"] .text-gray-500,
.bg-dark .text-gray-500,
.card.bg-dark .text-gray-500 { color: #99A1B7 !important; }
[data-bs-theme="dark"] .text-gray-600,
.bg-dark .text-gray-600,
.card.bg-dark .text-gray-600 { color: #78829D !important; }