/* ============================================
   DARK MODE IMPROVEMENTS - HIGH CONTRAST
   File: static/css/dark-mode-fixes.css
   ============================================ */

/* CSS Variables for Dark Mode */
:root {
    --bg-dark: #0a0a0a;
    --bg-dark-secondary: #1a1a1a;
    --bg-dark-elevated: #242424;
    --text-dark: #e4e4e4;
    --text-dark-muted: #a0a0a0;
    --border-dark: #2a2a2a;
    --input-bg-dark: #1a1a1a;
    --input-border-dark: #3a3a3a;
    --input-border-focus: #4a90e2;
}

/* ============================================
   BODY & GENERAL TEXT
   ============================================ */

/* REPLACE ALL FOUR with: */

body:not(.light-mode) {
    background-color: var(--bg, #080c14);
    color: var(--text, #e8edf5);
}

body:not(.light-mode) h1,
body:not(.light-mode) h2,
body:not(.light-mode) h3,
body:not(.light-mode) h4,
body:not(.light-mode) h5,
body:not(.light-mode) h6 {
    color: var(--text, #e8edf5);
}

/* Removed the overly broad p/li/span/div override — tsl-new.css handles this */


/* 
body:not(.light-mode) a {
    color: inherit;
} */


body:not(.light-mode) a:hover {
    color: var(--accent, #00d4ff);
}

body:not(.light-mode) .text-muted,
body:not(.light-mode) small {
    color: var(--text-dark-muted) !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

body:not(.light-mode) .form-control {
    background-color: var(--input-bg-dark);
    border: 1px solid var(--input-border-dark);
    color: var(--text-dark);
}

body:not(.light-mode) .form-control:focus {
    background-color: var(--input-bg-dark);
    border-color: var(--input-border-focus);
    color: var(--text-dark);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}

body:not(.light-mode) .form-control::placeholder {
    color: #666666;
    opacity: 1;
}

body:not(.light-mode) .form-control:disabled,
body:not(.light-mode) .form-control[readonly] {
    background-color: #0f0f0f;
    opacity: 0.7;
    color: var(--text-dark-muted);
}

/* ============================================
   SELECT DROPDOWNS
   ============================================ */

body:not(.light-mode) select.form-control {
    background-color: var(--input-bg-dark);
    border: 1px solid var(--input-border-dark);
    color: var(--text-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e4e4e4' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
    padding-right: 2.5rem;
}

body:not(.light-mode) select.form-control option {
    background-color: var(--input-bg-dark);
    color: var(--text-dark);
}

/* ============================================
   TEXTAREA
   ============================================ */

body:not(.light-mode) textarea.form-control {
    background-color: var(--input-bg-dark);
    border: 1px solid var(--input-border-dark);
    color: var(--text-dark);
}

/* ============================================
   LABELS & FORM TEXT
   ============================================ */

body:not(.light-mode) label {
    color: var(--text-dark);
    font-weight: 500;
}

body:not(.light-mode) .form-text {
    color: var(--text-dark-muted);
}

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

body:not(.light-mode) .btn-primary {
    background-color: #4a90e2;
    border-color: #4a90e2;
    color: #ffffff;
}

body:not(.light-mode) .btn-primary:hover {
    background-color: #357abd;
    border-color: #357abd;
    color: #ffffff;
}

body:not(.light-mode) .btn-secondary {
    background-color: var(--bg-dark-elevated);
    border-color: var(--input-border-dark);
    color: var(--text-dark);
}

body:not(.light-mode) .btn-secondary:hover {
    background-color: #2a2a2a;
    border-color: #4a4a4a;
    color: var(--text-dark);
}

/* ============================================
   CARDS
   ============================================ */

body:not(.light-mode) .card {
    background-color: var(--bg-dark-secondary);
    border: 1px solid var(--border-dark);
    color: var(--text-dark);
}

body:not(.light-mode) .card-header {
    background-color: var(--bg-dark-elevated);
    border-bottom: 1px solid var(--border-dark);
    color: var(--text-dark);
}

body:not(.light-mode) .card-footer {
    background-color: var(--bg-dark-elevated);
    border-top: 1px solid var(--border-dark);
    color: var(--text-dark);
}

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

/* body:not(.light-mode) a {
    color: #5ea3e8;
}

body:not(.light-mode) a:hover {
    color: #7bb9f0; */
}




/* AFTER — replace with this */
/* ============================================
   LINKS
   ============================================ */

/* Generic links inherit surrounding text color in dark mode.
   Specific components (nav, footer, buttons) set their own color.
   This prevents the blue bleed onto nav CTA, logo, etc. */
body:not(.light-mode) a {
    color: var(--text, #e8edf5);   /* white by default */
}

body:not(.light-mode) a:hover {
    color: var(--accent, #00d4ff); /* accent on hover */
}

/* Nav links stay dim until hovered — tsl-new.css controls this,
   but we reinforce here so nothing overrides it */
body:not(.light-mode) .tsl-nav-links > li > a {
    color: var(--text-dim, #7a8ca0);
}
body:not(.light-mode) .tsl-nav-links > li > a:hover {
    color: var(--accent, #00d4ff);
    background: var(--accent-glow, rgba(0,212,255,0.08));
}

/* Nav CTA button always white — gradient button, text must never bleed */
body:not(.light-mode) a.tsl-btn-nav,
body:not(.light-mode) a.tsl-btn-nav:hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Light mode links — dark text, accent on hover */
body.light-mode a {
    color: var(--text, #ffffff);
}
body.light-mode a:hover {
    color: var(--accent3, #2563eb);
}

/* Light mode nav CTA button also stays white */
body.light-mode a.tsl-btn-nav,
body.light-mode a.tsl-btn-nav:hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}




/* ============================================
   ALERTS
   ============================================ */

body:not(.light-mode) .alert {
    border: 1px solid var(--border-dark);
}

body:not(.light-mode) .alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #6ee7b7;
}

body:not(.light-mode) .alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #fca5a5;
}

body:not(.light-mode) .alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #fcd34d;
}

body:not(.light-mode) .alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #93c5fd;
}

/* ============================================
   FORM VALIDATION
   ============================================ */

body:not(.light-mode) .form-control.is-invalid {
    border-color: #ef4444;
}

body:not(.light-mode) .form-control.is-valid {
    border-color: #10b981;
}

body:not(.light-mode) .invalid-feedback {
    color: #fca5a5;
}

body:not(.light-mode) .valid-feedback {
    color: #6ee7b7;
}






/* ============================================
   BUTTON LINK COLOR OVERRIDES — always white
   regardless of light/dark mode or Bootstrap
   ============================================ */

a.tsl-btn-cta,
a.tsl-btn-cta:hover,
a.tsl-btn-cta:visited,
a.tsl-btn-cta:focus,
a.tsl-btn-nav,
a.tsl-btn-nav:hover,
a.tsl-btn-nav:visited,
a.tsl-btn-nav:focus,
a.tsl-btn-primary,
a.tsl-btn-primary:hover,
a.tsl-btn-xl,
a.tsl-btn-xl:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none;
}

/* Fix the duplicate/conflicting global link rules */
body:not(.light-mode) a {
  color: var(--text, #e8edf5);        /* white in dark mode */
}
body:not(.light-mode) a:hover {
  color: var(--accent, #00d4ff);
}
body.light-mode a {
  color: var(--text, #1e293b);        /* dark navy in light mode */
}
body.light-mode a:hover {
  color: var(--accent, #2563eb);
}



/* ============================================
   GLOBAL HOVER — brand color #0062ff
   ============================================ */

/* Nav links */
body .tsl-nav-links > li > a:hover {
  background: linear-gradient(135deg, rgba(0,98,255,0.12), rgba(0,212,255,0.08)) !important;
  color: #0062ff !important;
}
body.light-mode .tsl-nav-links > li > a {
  color: #0c0128;
}
body.light-mode .tsl-nav-links > li > a:hover {
  color: #0062ff !important;
  background: rgba(0,98,255,0.08) !important;
}

/* Dropdown links */
body.light-mode .tsl-dropdown a { color: #0c0128; }
body.light-mode .tsl-dropdown a:hover {
  background: rgba(0,98,255,0.08) !important;
  color: #0062ff !important;
}

/* Ghost button — light mode */
body.light-mode .tsl-btn-ghost {
  color: #0c0128;
  border-color: rgba(0,98,255,0.3);
}
body.light-mode .tsl-btn-ghost:hover {
  background: linear-gradient(135deg, #0062ff, #00d4ff) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent;
}

/* Filter buttons (services page) light mode */
body.light-mode .filter-buttons .btn-outline-primary {
  color: #0c0128 !important;
  border-color: rgba(0,98,255,0.3);
  background: #fff;
}
body.light-mode .filter-buttons .btn-outline-primary:hover,
body.light-mode .filter-buttons .btn-primary {
  background: linear-gradient(135deg, #0062ff, #00d4ff) !important;
  border-color: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Service/portfolio cards hover */
body.light-mode .service_single_content:hover h6 a,
body.light-mode .svc-card:hover h6 a {
  color: #0062ff !important;
}

/* General card hover border */
body.light-mode .tsl-benefit-card:hover,
body.light-mode .tsl-step:hover {
  border-color: rgba(0,98,255,0.4);
}

/* Footer links light mode */
body.light-mode .tsl-footer-col ul li a { color: #0c0128; }
body.light-mode .tsl-footer-col ul li a:hover { color: #0062ff !important; }
body.light-mode .tsl-footer-socials a:hover {
  border-color: #0062ff;
  color: #0062ff;
  background: rgba(0,98,255,0.08);
}

/* Generic plain links — light mode legibility */
body.light-mode a { color: #0c0128; }
body.light-mode a:hover { color: #0062ff !important; }

/* Ensure gradient buttons always stay white text */
body.light-mode a.tsl-btn-primary,
body.light-mode a.tsl-btn-primary:hover,
body.light-mode a.tsl-btn-nav,
body.light-mode a.tsl-btn-nav:hover,
body.light-mode a.tsl-btn-cta,
body.light-mode a.tsl-btn-cta:hover,
body.light-mode a.tsl-btn-xl,
body.light-mode a.tsl-btn-xl:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}