/*
 * Dark-mode overrides for public site components that Bootstrap 5.2
 * ships with no dark-mode awareness of its own (native dark mode landed
 * in Bootstrap 5.3). styles.css already provides a full dark palette via
 * CSS variables under [data-theme-mode=dark] (--default-text-color,
 * --border, --gray-*, etc.) for anything built on this theme's own
 * design-system classes (.card, body, etc.) — this file only covers the
 * remaining raw-Bootstrap classes actually used in the order flow that
 * fall outside that system.
 */

[data-theme-mode=dark] .form-control,
[data-theme-mode=dark] .form-select {
    color: var(--default-text-color);
    background-color: rgb(var(--body-bg-rgb));
    border-color: var(--border);
}

[data-theme-mode=dark] .form-control::placeholder {
    color: var(--muted);
}

[data-theme-mode=dark] .form-control:focus,
[data-theme-mode=dark] .form-select:focus {
    color: var(--default-text-color);
    background-color: rgb(var(--body-bg-rgb));
}

/* form-select's dropdown chevron is a hardcoded dark-gray SVG data URI —
   invisible against a dark field background, swap for a light one. */
[data-theme-mode=dark] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme-mode=dark] .alert-info {
    --bs-alert-color: #9eeaf9;
    --bs-alert-bg: #0c3c47;
    --bs-alert-border-color: #0f4e5c;
}

[data-theme-mode=dark] .alert-warning {
    --bs-alert-color: #ffe083;
    --bs-alert-bg: #4d3b02;
    --bs-alert-border-color: #664d03;
}

[data-theme-mode=dark] .alert-danger {
    --bs-alert-color: #f1aeb5;
    --bs-alert-bg: #4d151b;
    --bs-alert-border-color: #842029;
}

/* .nav-pills .nav-link dark-mode background/text is handled directly in
   styles.css (public/assets/css/styles.css:7840) alongside its source
   rule — that one has higher specificity than the plain Bootstrap
   .nav-link this file would otherwise be overriding. */

/* Bootstrap's .text-dark utility is a fixed near-black (--bs-dark-rgb:
   33,37,41) with !important — invisible on a dark page background.
   Used across several public pages (home, affiliate, domain-names,
   domain-transfer, web-hosting, wordpress-hosting). */
[data-theme-mode=dark] .text-dark {
    color: var(--default-text-color) !important;
}

/* Sidebar mega-menu icons are external black SVG files (svgrepo.com),
   not inline markup we can recolor with `fill` — invert them to white
   in dark mode, same technique already used for .btn-close in
   styles.css. Logos are .png so this can't accidentally hit them. */
[data-theme-mode=dark] .app-sidebar img[src$=".svg"] {
    filter: invert(1);
}