/* =====================================================================
   HostEthical — UI/UX audit fixes (loaded AFTER app.css).
   Dark/light theming overrides for WHMCS/Bootstrap components that ship
   hardcoded colors. Everything uses --dh-* tokens so it follows the theme.
   Scoped to #main-body so the DomainHub chrome (nav/footer) is untouched.
   ===================================================================== */

/* ---- Off-theme Bootstrap "warning"/orange -> brand emerald ---- */
#main-body .btn-warning,
#main-body .btn-warning:focus {
    background-color: var(--dh-gold) !important;
    border-color: var(--dh-gold) !important;
    color: #08130d !important;
}
#main-body .btn-warning:hover { background-color: var(--dh-gold-deep) !important; }
#main-body .label-warning,
#main-body .badge-warning { background-color: var(--dh-gold) !important; color: #08130d !important; }

/* ---- Bootstrap success (green) -> brand emerald ---- */
#main-body .btn-success,
#main-body .btn-success:focus { background-color: var(--dh-gold) !important; border-color: var(--dh-gold) !important; color: #08130d !important; background-image: none !important; }
#main-body .btn-success:hover { background-color: var(--dh-gold-deep) !important; }

/* ---- WHMCS light-gray backgrounds that vanish in dark mode ---- */
#main-body .well,
#main-body .well-sm,
#main-body .gridbox,
#main-body .domainSearchResults,
#main-body .search-result,
#main-body .domaincheckresult,
#main-body .domain-check-result,
#main-body .spotlight-tld {
    background-color: var(--dh-surface) !important;
    color: var(--dh-text) !important;
    border-color: var(--dh-line) !important;
}

/* ---- Any inline #eee / #f5f5f5 result rows -> transparent (page bg shows) ---- */
#main-body [style*="background:#eee"],
#main-body [style*="background: #eee"],
#main-body [style*="background-color:#eee"],
#main-body [style*="background-color: #eee"],
#main-body [style*="background:#f5f5f5"],
#main-body [style*="background-color:#f5f5f5"] {
    background: var(--dh-surface) !important;
    color: var(--dh-text) !important;
}

/* ---- Markdown ticket editor (EasyMDE/SimpleMDE) ---- */
#main-body .CodeMirror,
#main-body .editor-toolbar,
#main-body .editor-statusbar,
#main-body .editor-preview {
    background-color: var(--dh-bg2) !important;
    color: var(--dh-text) !important;
    border-color: var(--dh-line) !important;
}
#main-body .editor-statusbar { color: var(--dh-muted) !important; }
#main-body .editor-toolbar a { color: var(--dh-text) !important; }
#main-body .CodeMirror-cursor { border-left-color: var(--dh-text) !important; }

/* ---- WHMCS table stripes/hover readable in dark ---- */
#main-body .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: rgba(148,163,184,.06) !important; }
#main-body .table-hover > tbody > tr:hover > td { background-color: rgba(148,163,184,.10) !important; }

/* ---- Consistent focus states (accessibility) ---- */
#main-body .form-control:focus,
#main-body .field:focus,
#main-body .btn:focus-visible,
#main-body a:focus-visible {
    outline: 2px solid var(--dh-gold);
    outline-offset: 1px;
}

/* ---- Alerts: consistent tokenized surfaces ---- */
#main-body .alert-info { background: rgba(245,185,66,.10) !important; border-color: rgba(245,185,66,.30) !important; color: var(--dh-text) !important; }

/* ---- Button consistency: dh-btn-gold used as <a> inside #main-body gets its text
   hijacked by the "#main-body a { color: gold-deep }" rule -> force dark ink so the
   primary button looks identical on every page. ---- */
#main-body a.dh-btn-gold,
#main-body .dh-btn-gold,
#main-body .dh-btn-gold:hover,
#main-body .dh-btn-gold:focus { color: #08130d !important; }

/* ---- Markdown ticket editor autosave footer ("saved") ---- */
#main-body .md-footer { background-color: var(--dh-bg2) !important; border-color: var(--dh-line) !important; }
#main-body .markdown-save,
#main-body .md-footer,
#main-body .md-footer * { color: var(--dh-muted) !important; }

/* ---- Domain availability status labels (defensive) ---- */
#main-body .available { color: #16a34a !important; }
#main-body .unavailable { color: var(--dh-muted) !important; }