/**
 * Vantage Portal Custom CSS
 *
 * Unified styling for WHMCS client portal matching vantage.3vs.io WordPress design
 * Based on the Vantage Portal design system
 *
 * @package    Vantage
 * @subpackage Styles
 * @version    1.0.0
 * @author     3VS Technologies
 * @created    2026-01-23
 *
 * Table of Contents:
 * 1. CSS Variables / Design Tokens
 * 2. Base Reset & Typography
 * 3. Alert Component
 * 4. Button Styles
 * 5. Form Components
 * 6. Card Styles
 * 7. Login Page Specific
 * 8. Responsive Breakpoints
 * 9. Animations & Transitions
 * 10. Utility Classes
 */

/* ============================================
   1. CSS Variables / Design Tokens
   ============================================ */

:root {
  /* ================================================
     VANTAGE DARK THEME - Matches vantage.3vs.io WordPress
     ================================================ */

  /* Primary Brand Colors - Gold accent from WordPress site */
  --vantage-primary: #c9a227;           /* Gold accent */
  --vantage-primary-hover: #ddb82c;     /* Gold lighter */
  --vantage-primary-foreground: #0d0d0d;
  --vantage-primary-light: #e5c94b;     /* Gold light */
  --vantage-primary-dark: #a88a1f;      /* Gold dark */

  /* Secondary Colors */
  --vantage-secondary: #333333;         /* Dark gray */
  --vantage-secondary-hover: #444444;   /* Lighter gray */
  --vantage-secondary-foreground: #ffffff;

  /* 3VS Brand Colors (WordPress site) */
  --brand-primary: #c9a227;             /* Gold */
  --brand-secondary: #0d0d0d;           /* Near black */
  --brand-accent: #c9a227;              /* Gold accent */
  --brand-gradient: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);

  /* Status Colors - Dark theme variants */
  --vantage-success: #22c55e;           /* Green 500 */
  --vantage-success-bg: rgba(34, 197, 94, 0.15);
  --vantage-success-border: rgba(34, 197, 94, 0.3);

  --vantage-warning: #f59e0b;           /* Amber 500 */
  --vantage-warning-bg: rgba(245, 158, 11, 0.15);
  --vantage-warning-border: rgba(245, 158, 11, 0.3);

  --vantage-error: #ef4444;             /* Red 500 */
  --vantage-error-bg: rgba(239, 68, 68, 0.15);
  --vantage-error-border: rgba(239, 68, 68, 0.3);

  --vantage-info: #3b82f6;              /* Blue 500 */
  --vantage-info-bg: rgba(59, 130, 246, 0.15);
  --vantage-info-border: rgba(59, 130, 246, 0.3);

  /* Background Colors - Dark theme */
  --vantage-background: #0d0d0d;        /* Near black - matches WordPress */
  --vantage-background-muted: #141414;  /* Slightly lighter */
  --vantage-background-subtle: #1a1a1a; /* Card backgrounds */
  --vantage-background-dark: #000000;   /* Pure black */
  --vantage-background-card: #1a1a1a;   /* Card/panel backgrounds */
  --vantage-background-elevated: #222222; /* Elevated elements */

  /* Border Colors - Dark theme */
  --vantage-border: #2a2a2a;            /* Dark border */
  --vantage-border-hover: #3a3a3a;      /* Hover state */
  --vantage-border-focus: var(--vantage-primary);

  /* Text Colors - Dark theme */
  --vantage-text: #ffffff;              /* White text */
  --vantage-text-muted: #a0a0a0;        /* Gray text */
  --vantage-text-subtle: #808080;       /* Subtle gray - WCAG AA 5.19:1 on #0d0d0d */
  --vantage-text-inverted: #0d0d0d;     /* Dark text for light backgrounds */

  /* Spacing Scale */
  --vantage-space-1: 0.25rem;           /* 4px */
  --vantage-space-2: 0.5rem;            /* 8px */
  --vantage-space-3: 0.75rem;           /* 12px */
  --vantage-space-4: 1rem;              /* 16px */
  --vantage-space-5: 1.25rem;           /* 20px */
  --vantage-space-6: 1.5rem;            /* 24px */
  --vantage-space-8: 2rem;              /* 32px */
  --vantage-space-10: 2.5rem;           /* 40px */
  --vantage-space-12: 3rem;             /* 48px */

  /* Border Radius */
  --vantage-radius-sm: 0.25rem;         /* 4px */
  --vantage-radius-md: 0.375rem;        /* 6px */
  --vantage-radius-lg: 0.5rem;          /* 8px */
  --vantage-radius-xl: 0.75rem;         /* 12px */
  --vantage-radius-full: 9999px;

  /* Shadows */
  --vantage-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --vantage-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --vantage-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --vantage-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --vantage-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);

  /* Typography - Matches WordPress Digico theme */
  --vantage-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vantage-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --vantage-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --vantage-letter-spacing-wide: 0.1em;
  --vantage-letter-spacing-wider: 0.15em;

  /* Transitions */
  --vantage-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --vantage-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --vantage-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale */
  --vantage-z-dropdown: 1000;
  --vantage-z-modal: 1050;
  --vantage-z-tooltip: 1100;
}


/* ============================================
   2. Base Reset & Typography
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--vantage-font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--vantage-text);
  background-color: var(--vantage-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================
   3. Alert Component
   ============================================ */

.vantage-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--vantage-space-3);
  padding: var(--vantage-space-4);
  border-radius: var(--vantage-radius-lg);
  border: 1px solid;
  margin-bottom: var(--vantage-space-6);
  animation: vantage-fadeIn var(--vantage-transition-normal);
}

.vantage-alert-error {
  background-color: var(--vantage-error-bg);
  border-color: var(--vantage-error-border);
  color: #fca5a5; /* Light red for dark theme */
}

.vantage-alert-success {
  background-color: var(--vantage-success-bg);
  border-color: var(--vantage-success-border);
  color: #86efac; /* Light green for dark theme */
}

.vantage-alert-warning {
  background-color: var(--vantage-warning-bg);
  border-color: var(--vantage-warning-border);
  color: #fcd34d; /* Light amber for dark theme */
}

.vantage-alert-info {
  background-color: var(--vantage-info-bg);
  border-color: var(--vantage-info-border);
  color: #93c5fd; /* Light blue for dark theme */
}

.vantage-alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.vantage-alert-content {
  flex: 1;
  min-width: 0;
}

.vantage-alert-title {
  font-weight: 600;
  margin: 0 0 var(--vantage-space-1) 0;
  font-size: 14px;
}

.vantage-alert-message {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.vantage-alert-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: var(--vantage-space-1);
  cursor: pointer;
  border-radius: var(--vantage-radius-sm);
  opacity: 0.7;
  transition: opacity var(--vantage-transition-fast);
}

.vantage-alert-close:hover {
  opacity: 1;
}


/* ============================================
   4. Button Styles
   ============================================ */

.vantage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vantage-space-2);
  padding: var(--vantage-space-3) var(--vantage-space-5);
  font-family: var(--vantage-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--vantage-radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--vantage-transition-fast);
  outline: none;
}

.vantage-btn:focus-visible {
  box-shadow: var(--vantage-shadow-focus);
}

.vantage-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vantage-btn-primary {
  background-color: var(--vantage-primary);
  color: var(--vantage-primary-foreground);
  border-color: var(--vantage-primary);
}

.vantage-btn-primary:hover:not(:disabled) {
  background-color: var(--vantage-primary-hover);
  border-color: var(--vantage-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--vantage-shadow-md);
}

.vantage-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.vantage-btn-secondary {
  background-color: var(--vantage-background);
  color: var(--vantage-text);
  border-color: var(--vantage-border);
}

.vantage-btn-secondary:hover:not(:disabled) {
  background-color: var(--vantage-background-muted);
  border-color: var(--vantage-border-hover);
}

.vantage-btn-destructive {
  background-color: var(--vantage-error);
  color: white;
  border-color: var(--vantage-error);
}

.vantage-btn-destructive:hover:not(:disabled) {
  background-color: #dc2626;
  border-color: #dc2626;
}

.vantage-btn-ghost {
  background-color: transparent;
  color: var(--vantage-text);
  border-color: transparent;
}

.vantage-btn-ghost:hover:not(:disabled) {
  background-color: var(--vantage-background-subtle);
}

.vantage-btn-link {
  background-color: transparent;
  color: var(--vantage-primary);
  border-color: transparent;
  padding: 0;
}

.vantage-btn-link:hover:not(:disabled) {
  text-decoration: underline;
}

.vantage-btn-block {
  width: 100%;
}

.vantage-btn-sm {
  padding: var(--vantage-space-2) var(--vantage-space-3);
  font-size: 13px;
}

.vantage-btn-lg {
  padding: var(--vantage-space-4) var(--vantage-space-6);
  font-size: 16px;
}

.vantage-btn-loading {
  display: none;
  align-items: center;
  gap: var(--vantage-space-2);
}


/* ============================================
   5. Form Components
   ============================================ */

.vantage-form {
  width: 100%;
}

.vantage-form-loading {
  opacity: 0.7;
  pointer-events: none;
}

.vantage-form-group {
  margin-bottom: var(--vantage-space-5);
}

.vantage-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--vantage-text);
  margin-bottom: var(--vantage-space-2);
}

.vantage-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--vantage-space-2);
}

.vantage-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.vantage-input-icon {
  position: absolute;
  left: var(--vantage-space-3);
  color: var(--vantage-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.vantage-input {
  width: 100%;
  padding: var(--vantage-space-3) var(--vantage-space-4);
  font-family: var(--vantage-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--vantage-text);
  background-color: var(--vantage-background);
  border: 1px solid var(--vantage-border);
  border-radius: var(--vantage-radius-lg);
  transition: all var(--vantage-transition-fast);
  outline: none;
}

.vantage-input-wrapper .vantage-input {
  padding-left: calc(var(--vantage-space-3) + 18px + var(--vantage-space-3));
  padding-right: calc(var(--vantage-space-3) + 18px + var(--vantage-space-3));
}

.vantage-input::placeholder {
  color: var(--vantage-text-subtle);
}

.vantage-input:hover:not(:focus):not(:disabled) {
  border-color: var(--vantage-border-hover);
}

.vantage-input:focus {
  border-color: var(--vantage-primary);
  box-shadow: var(--vantage-shadow-focus);
}

.vantage-input:disabled {
  background-color: var(--vantage-background-muted);
  cursor: not-allowed;
}

.vantage-input-error {
  border-color: var(--vantage-error);
}

.vantage-input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.vantage-password-toggle {
  position: absolute;
  right: var(--vantage-space-3);
  background: none;
  border: none;
  padding: var(--vantage-space-1);
  cursor: pointer;
  color: var(--vantage-text-muted);
  display: flex;
  align-items: center;
  border-radius: var(--vantage-radius-sm);
  transition: color var(--vantage-transition-fast);
}

.vantage-password-toggle:hover {
  color: var(--vantage-text);
}

/* Checkbox */
.vantage-checkbox-group {
  display: flex;
  align-items: center;
}

.vantage-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--vantage-space-2);
  cursor: pointer;
  font-size: 14px;
  color: var(--vantage-text);
}

.vantage-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.vantage-checkbox-custom {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: var(--vantage-background);
  border: 1px solid var(--vantage-border);
  border-radius: var(--vantage-radius-sm);
  transition: all var(--vantage-transition-fast);
}

.vantage-checkbox:checked + .vantage-checkbox-custom {
  background-color: var(--vantage-primary);
  border-color: var(--vantage-primary);
}

.vantage-checkbox:checked + .vantage-checkbox-custom::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.vantage-checkbox:focus + .vantage-checkbox-custom {
  box-shadow: var(--vantage-shadow-focus);
}

.vantage-checkbox-text {
  color: var(--vantage-text-muted);
}

/* Captcha */
.vantage-captcha-group {
  display: flex;
  flex-direction: column;
  gap: var(--vantage-space-3);
}

.vantage-captcha-img img {
  border-radius: var(--vantage-radius-md);
  border: 1px solid var(--vantage-border);
}


/* ============================================
   6. Card Styles
   ============================================ */

.vantage-card {
  background-color: var(--vantage-background);
  border-radius: var(--vantage-radius-xl);
  border: 1px solid var(--vantage-border);
  box-shadow: var(--vantage-shadow-lg);
}

.vantage-card-header {
  padding: var(--vantage-space-8) var(--vantage-space-8) var(--vantage-space-6);
  text-align: center;
}

.vantage-card-body {
  padding: 0 var(--vantage-space-8) var(--vantage-space-6);
}

.vantage-card-footer {
  padding: var(--vantage-space-6) var(--vantage-space-8);
  border-top: 1px solid var(--vantage-border);
  text-align: center;
  background-color: var(--vantage-background-muted);
  border-radius: 0 0 var(--vantage-radius-xl) var(--vantage-radius-xl);
}


/* ============================================
   7. Login Page Specific
   ============================================ */

.vantage-login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vantage-space-6);
  background: linear-gradient(135deg, var(--vantage-background-muted) 0%, var(--vantage-background) 100%);
}

.vantage-login-container {
  width: 100%;
  max-width: 420px;
}

.vantage-login-logo {
  text-align: center;
  margin-bottom: var(--vantage-space-8);
}

.vantage-logo-img {
  max-height: 48px;
  width: auto;
}

.vantage-login-card {
  overflow: hidden;
}

.vantage-login-card .vantage-card-header {
  padding-bottom: 0;
}

.vantage-login-card form {
  padding: var(--vantage-space-6) var(--vantage-space-8) var(--vantage-space-2);
}

.vantage-login-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--vantage-text);
  margin: 0 0 var(--vantage-space-2) 0;
}

.vantage-login-subtitle {
  font-size: 14px;
  color: var(--vantage-text-muted);
  margin: 0;
}

.vantage-link {
  color: var(--vantage-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--vantage-transition-fast);
}

.vantage-link:hover {
  color: var(--vantage-primary-hover);
  text-decoration: underline;
}

.vantage-link-small {
  font-size: 13px;
  color: var(--vantage-primary);
  text-decoration: none;
  transition: color var(--vantage-transition-fast);
}

.vantage-link-small:hover {
  color: var(--vantage-primary-hover);
  text-decoration: underline;
}

.vantage-footer-text {
  margin: 0;
  font-size: 14px;
  color: var(--vantage-text-muted);
}

.vantage-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--vantage-space-6) var(--vantage-space-8);
  color: var(--vantage-text-muted);
  font-size: 13px;
}

.vantage-divider::before,
.vantage-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--vantage-border);
}

.vantage-divider span {
  padding: 0 var(--vantage-space-4);
}

.vantage-social-login {
  display: flex;
  gap: var(--vantage-space-3);
  padding: 0 var(--vantage-space-8) var(--vantage-space-6);
}

.vantage-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vantage-space-2);
  padding: var(--vantage-space-3);
  background-color: var(--vantage-background);
  border: 1px solid var(--vantage-border);
  border-radius: var(--vantage-radius-lg);
  text-decoration: none;
  color: var(--vantage-text);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--vantage-transition-fast);
}

.vantage-social-btn:hover {
  background-color: var(--vantage-background-muted);
  border-color: var(--vantage-border-hover);
}

.vantage-back-link {
  text-align: center;
  margin-top: var(--vantage-space-6);
}

.vantage-back-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--vantage-space-2);
  color: var(--vantage-text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--vantage-transition-fast);
}

.vantage-back-link a:hover {
  color: var(--vantage-text);
}


/* ============================================
   8. Responsive Breakpoints
   ============================================ */

@media (max-width: 480px) {
  .vantage-login-wrapper {
    padding: var(--vantage-space-4);
  }

  .vantage-login-card .vantage-card-header {
    padding: var(--vantage-space-6) var(--vantage-space-5) 0;
  }

  .vantage-login-card form {
    padding: var(--vantage-space-5);
  }

  .vantage-card-footer {
    padding: var(--vantage-space-4) var(--vantage-space-5);
  }

  .vantage-login-title {
    font-size: 20px;
  }

  .vantage-divider {
    margin: var(--vantage-space-4) var(--vantage-space-5);
  }

  .vantage-social-login {
    flex-direction: column;
    padding: 0 var(--vantage-space-5) var(--vantage-space-4);
  }
}


/* ============================================
   9. Animations & Transitions
   ============================================ */

@keyframes vantage-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vantage-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.vantage-spinner {
  animation: vantage-spin 1s linear infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================
   10. Utility Classes
   ============================================ */

.vantage-text-center { text-align: center; }
.vantage-text-left { text-align: left; }
.vantage-text-right { text-align: right; }

.vantage-hidden { display: none; }
.vantage-visible { visibility: visible; }
.vantage-invisible { visibility: hidden; }

.vantage-mt-4 { margin-top: var(--vantage-space-4); }
.vantage-mb-4 { margin-bottom: var(--vantage-space-4); }
.vantage-my-4 { margin-top: var(--vantage-space-4); margin-bottom: var(--vantage-space-4); }

.vantage-p-4 { padding: var(--vantage-space-4); }
.vantage-px-4 { padding-left: var(--vantage-space-4); padding-right: var(--vantage-space-4); }
.vantage-py-4 { padding-top: var(--vantage-space-4); padding-bottom: var(--vantage-space-4); }

.vantage-flex { display: flex; }
.vantage-flex-col { flex-direction: column; }
.vantage-items-center { align-items: center; }
.vantage-justify-center { justify-content: center; }
.vantage-justify-between { justify-content: space-between; }
.vantage-gap-2 { gap: var(--vantage-space-2); }
.vantage-gap-4 { gap: var(--vantage-space-4); }

.vantage-w-full { width: 100%; }
.vantage-h-full { height: 100%; }

.vantage-rounded { border-radius: var(--vantage-radius-md); }
.vantage-rounded-lg { border-radius: var(--vantage-radius-lg); }
.vantage-shadow { box-shadow: var(--vantage-shadow-md); }
.vantage-shadow-lg { box-shadow: var(--vantage-shadow-lg); }


/* ============================================
   WHMCS Override Compatibility - DARK THEME
   Override Bootstrap/Twenty-One defaults
   Matches vantage.3vs.io WordPress design
   ============================================ */

/* === GLOBAL BODY & BACKGROUND === */
body,
body.primary-bg-color {
  background-color: #0d0d0d !important;
  color: #ffffff !important;
}

#main-body {
  background-color: #0d0d0d !important;
}

.main-content,
.primary-content {
  background-color: #0d0d0d !important;
  color: #ffffff;
}

/* === HEADER & NAVBAR === */
#header,
.header {
  background-color: #0d0d0d !important;
  border-bottom: 1px solid #2a2a2a !important;
}

.topbar {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

.topbar .btn {
  color: #a0a0a0 !important;
}

.topbar .btn:hover {
  color: #ffffff !important;
}

.topbar .input-group-text {
  background-color: transparent !important;
  border: none !important;
  color: #a0a0a0 !important;
}

.topbar .btn-active-client {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

.topbar .btn-active-client:hover {
  background-color: #2a2a2a !important;
}

.topbar .btn-return-to-admin {
  background-color: #c9a227 !important;
  color: #0d0d0d !important;
}

.navbar,
.navbar-light {
  background-color: #0d0d0d !important;
}

.navbar-brand {
  color: #ffffff !important;
}

.main-navbar-wrapper {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
}

#nav .nav-link,
.navbar-nav .nav-link {
  color: #a0a0a0 !important;
}

#nav .nav-link:hover,
.navbar-nav .nav-link:hover,
#nav .nav-link:focus,
.navbar-nav .nav-link:focus {
  color: #c9a227 !important;
}

#nav .nav-item.active > .nav-link,
.navbar-nav .nav-item.active > .nav-link {
  color: #c9a227 !important;
}

.cart-btn {
  color: #ffffff !important;
}

.cart-btn .badge {
  background-color: #c9a227 !important;
  color: #0d0d0d !important;
}

/* Search in navbar */
.navbar .search .form-control {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

.navbar .search .form-control::placeholder {
  color: #808080 !important;
}

.navbar .search .btn {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #a0a0a0 !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-item {
  color: #ffffff !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #2a2a2a !important;
  color: #c9a227 !important;
}

.dropdown-divider {
  border-color: #2a2a2a !important;
}

/* === BREADCRUMB === */
.master-breadcrumb,
nav[aria-label="breadcrumb"] {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
}

.breadcrumb {
  background-color: transparent !important;
}

.breadcrumb-item a {
  color: #c9a227 !important;
}

.breadcrumb-item.active {
  color: #a0a0a0 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #808080 !important;
}

/* === SIDEBAR === */
.sidebar {
  background-color: transparent !important;
}

.sidebar .card,
.sidebar .list-group {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
}

.sidebar .card-header {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

.sidebar .card-body {
  background-color: #1a1a1a !important;
}

.sidebar .list-group-item {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #a0a0a0 !important;
}

.sidebar .list-group-item:hover,
.sidebar .list-group-item:focus {
  background-color: #2a2a2a !important;
  color: #c9a227 !important;
}

.sidebar .list-group-item.active {
  background-color: #c9a227 !important;
  border-color: #c9a227 !important;
  color: #0d0d0d !important;
}

.sidebar a {
  color: #a0a0a0 !important;
}

.sidebar a:hover {
  color: #c9a227 !important;
}

/* Sidebar user info */
.sidebar .user-avatar {
  background-color: #2a2a2a !important;
  color: #c9a227 !important;
}

/* === CARDS & PANELS === */
.card {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 12px !important;
}

.card-header {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

.card-body {
  background-color: #1a1a1a !important;
  color: #ffffff;
}

.card-footer {
  background-color: #141414 !important;
  border-top: 1px solid #2a2a2a !important;
}

.card-title {
  color: #ffffff !important;
}

.panel {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
}

.panel-heading {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

.panel-body {
  background-color: #1a1a1a !important;
}

/* === TABLES === */
.table {
  color: #ffffff !important;
}

.table thead th {
  background-color: #141414 !important;
  border-color: #2a2a2a !important;
  color: #ffffff !important;
}

.table td,
.table th {
  border-color: #2a2a2a !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(201, 162, 39, 0.1) !important;
}

.table-bordered {
  border-color: #2a2a2a !important;
}

/* === BUTTONS === */
.btn-primary {
  background-color: #c9a227 !important;
  border-color: #c9a227 !important;
  color: #0d0d0d !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #ddb82c !important;
  border-color: #ddb82c !important;
  color: #0d0d0d !important;
}

.btn-secondary {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #3a3a3a !important;
  border-color: #4a4a4a !important;
}

.btn-outline-primary {
  border-color: #c9a227 !important;
  color: #c9a227 !important;
}

.btn-outline-primary:hover {
  background-color: #c9a227 !important;
  color: #0d0d0d !important;
}

.btn-default,
.btn-light {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #ffffff !important;
}

.btn-default:hover,
.btn-light:hover {
  background-color: #3a3a3a !important;
}

/* === FORMS === */
.form-control {
  background-color: #0d0d0d !important;
  border: 1px solid #3a3a3a !important;
  color: #ffffff !important;
}

.form-control::placeholder {
  color: #808080 !important;
}

.form-control:focus {
  background-color: #0d0d0d !important;
  border-color: #c9a227 !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15) !important;
  color: #ffffff !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #141414 !important;
}

.input-group-text {
  background-color: #1a1a1a !important;
  border: 1px solid #3a3a3a !important;
  color: #a0a0a0 !important;
}

label,
.form-label {
  color: #ffffff !important;
}

.custom-control-label::before {
  background-color: #0d0d0d !important;
  border-color: #3a3a3a !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #c9a227 !important;
  border-color: #c9a227 !important;
}

select.form-control {
  background-color: #0d0d0d !important;
  color: #ffffff !important;
}

/* === ALERTS === */
.alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

.alert-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

.alert-info {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

/* === LINKS === */
a {
  color: #c9a227;
}

a:hover {
  color: #ddb82c;
}

/* === BADGES === */
.badge-primary,
.badge-info {
  background-color: #c9a227 !important;
  color: #0d0d0d !important;
}

.badge-secondary {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
}

.badge-success {
  background-color: #22c55e !important;
}

.badge-danger {
  background-color: #ef4444 !important;
}

.badge-warning {
  background-color: #f59e0b !important;
  color: #0d0d0d !important;
}

/* === FOOTER === */
footer,
#footer,
.footer {
  background-color: #0d0d0d !important;
  border-top: 1px solid #2a2a2a !important;
  color: #a0a0a0 !important;
}

footer a {
  color: #c9a227 !important;
}

footer a:hover {
  color: #ddb82c !important;
}

/* === PAGINATION === */
.pagination .page-link {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #a0a0a0 !important;
}

.pagination .page-link:hover {
  background-color: #2a2a2a !important;
  color: #c9a227 !important;
}

.pagination .page-item.active .page-link {
  background-color: #c9a227 !important;
  border-color: #c9a227 !important;
  color: #0d0d0d !important;
}

.pagination .page-item.disabled .page-link {
  background-color: #141414 !important;
  color: #808080 !important;
}

/* === MODALS === */
.modal-content {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
}

.modal-header {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

.modal-header .close {
  color: #a0a0a0 !important;
}

.modal-body {
  background-color: #1a1a1a !important;
  color: #ffffff;
}

.modal-footer {
  background-color: #141414 !important;
  border-top: 1px solid #2a2a2a !important;
}

/* === LIST GROUPS === */
.list-group-item {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #ffffff !important;
}

.list-group-item:hover {
  background-color: #2a2a2a !important;
}

.list-group-item.active {
  background-color: #c9a227 !important;
  border-color: #c9a227 !important;
  color: #0d0d0d !important;
}

/* === POPOVERS & TOOLTIPS === */
.popover {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
}

.popover-header {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

.popover-body {
  color: #ffffff !important;
}

.tooltip-inner {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

/* === STATUS INDICATORS === */
.status-active,
.text-success {
  color: #22c55e !important;
}

.status-pending,
.text-warning {
  color: #f59e0b !important;
}

.status-terminated,
.status-cancelled,
.text-danger {
  color: #ef4444 !important;
}

.text-muted {
  color: #a0a0a0 !important;
}

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #ffffff !important;
}

/* === WHMCS SPECIFIC COMPONENTS === */

/* Client area home stats */
.stats-item {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px;
}

.stats-item .stats-icon {
  color: #c9a227 !important;
}

/* Service/product boxes */
.product-box,
.service-box {
  background-color: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
}

/* Ticket system */
.ticket-status-open {
  background-color: #22c55e !important;
}

.ticket-status-answered {
  background-color: #3b82f6 !important;
}

.ticket-status-customer-reply {
  background-color: #f59e0b !important;
}

.ticket-status-closed {
  background-color: #6b7280 !important;
}

/* Invoice status */
.invoice-status-paid {
  color: #22c55e !important;
}

.invoice-status-unpaid {
  color: #ef4444 !important;
}

/* Domain status */
.domain-status-active {
  color: #22c55e !important;
}

.domain-status-expired {
  color: #ef4444 !important;
}

/* === SCROLLBAR STYLING === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0d0d0d;
}

::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* === REMOVE LIGHT BACKGROUNDS === */
.bg-light {
  background-color: #141414 !important;
}

.bg-white {
  background-color: #1a1a1a !important;
}

.border-light {
  border-color: #2a2a2a !important;
}

/* === CLIENT ALERTS === */
.client-alerts li {
  border-bottom-color: #2a2a2a !important;
}

.client-alerts li a {
  color: #ffffff !important;
}

.client-alerts li a:hover {
  background-color: #2a2a2a !important;
}

/* === EMAIL VERIFICATION BANNER === */
.verify-email-banner {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

/* === VANTAGE LOGO IN HEADER === */
.navbar-brand img,
.logo-img {
  filter: brightness(0) invert(1);
}

/* ============================================
   WORDPRESS DESIGN MATCHING STYLES
   Matches vantage.3vs.io Digico theme
   ============================================ */

/* Typography - WordPress-style headings with letter-spacing */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.vantage-card-title {
  font-family: var(--vantage-font-heading) !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
}

/* Section labels - uppercase with letter-spacing like WordPress */
.vantage-nav-section-title,
.sidebar h6,
.card-header h5,
.card-header h6 {
  text-transform: uppercase !important;
  letter-spacing: var(--vantage-letter-spacing-wide) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--vantage-primary) !important;
  margin-bottom: 12px !important;
}

/* Cards with gold left border accent - WordPress style */
.card,
.vantage-card {
  border-left: 3px solid var(--vantage-primary) !important;
}

/* Widget cards styling */
.vantage-widget,
.panel {
  border-left: 3px solid var(--vantage-primary) !important;
  background-color: #1a1a1a !important;
}

/* Navigation links with hover effect */
#nav .nav-link,
.navbar-nav .nav-link {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  position: relative !important;
  padding-bottom: 8px !important;
}

/* Active nav item - gold underline like WordPress */
#nav .nav-item.active > .nav-link::after,
.navbar-nav .nav-item.active > .nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background-color: var(--vantage-primary) !important;
}

/* Sidebar styling to match WordPress */
.sidebar .list-group-item,
.vantage-nav-item {
  border-left: 0 !important;
  padding-left: 16px !important;
  position: relative !important;
}

.sidebar .list-group-item:hover::before,
.vantage-nav-item:hover::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background-color: var(--vantage-primary) !important;
}

/* Welcome banner styling */
h1[class*="welcome"],
.welcome-title,
.vantage-welcome-title {
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  font-size: 32px !important;
}

/* Stats cards with numbered styling like WordPress services */
.vantage-stat-card,
.stats-item {
  position: relative !important;
  padding-left: 20px !important;
}

.vantage-stat-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 3px !important;
  background-color: var(--vantage-primary) !important;
}

/* Button styling - match WordPress */
.btn-primary,
.vantage-btn-primary {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* Secondary button - dark with gold text like WordPress */
.btn-outline-primary,
.vantage-btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--vantage-border) !important;
  color: var(--vantage-primary) !important;
}

.btn-outline-primary:hover,
.vantage-btn-secondary:hover {
  background-color: rgba(201, 162, 39, 0.1) !important;
  border-color: var(--vantage-primary) !important;
}

/* Breadcrumb styling */
.master-breadcrumb {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 12px !important;
}

/* Quick actions grid - match WordPress card style */
.vantage-quick-action {
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

.vantage-quick-action:hover {
  border-left-color: var(--vantage-primary) !important;
  background-color: rgba(201, 162, 39, 0.05) !important;
}

/* Form labels - uppercase */
label,
.form-label,
.vantage-label {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* View All links - gold with arrow */
.vantage-btn-link,
a[class*="view-all"] {
  color: var(--vantage-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 12px !important;
}

/* Empty state messages */
.vantage-empty-state,
.no-data-message {
  color: var(--vantage-text-muted) !important;
  font-size: 14px !important;
}

/* Remove card left border for login card */
.vantage-login-card {
  border-left: 1px solid var(--vantage-border) !important;
}


/* ============================================
   11. Dashboard Layout Components
   Missing layout CSS for all .vantage-* classes
   referenced by clientareahome.tpl, sidebar.tpl,
   and widget templates.
   ============================================ */

/* --- 11.1 Dashboard Container & Grid --- */
.vantage-dashboard {
  width: 100%;
  max-width: 100%;
}

.vantage-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.vantage-dashboard-main {
  min-width: 0;
}

.vantage-dashboard-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}

/* --- 11.2 Stats Grid (4-column) --- */
.vantage-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.vantage-stat-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: var(--vantage-background-card);
  border: 1px solid var(--vantage-border);
  border-radius: var(--vantage-radius-xl);
  border-left: 3px solid var(--vantage-primary) !important;
  transition: transform var(--vantage-transition-fast), box-shadow var(--vantage-transition-fast);
}

.vantage-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vantage-shadow-md);
}

.vantage-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--vantage-radius-full);
  background-color: rgba(201, 162, 39, 0.15);
  color: var(--vantage-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.vantage-stat-content {
  display: flex;
  flex-direction: column;
}

.vantage-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--vantage-text);
  line-height: 1.2;
}

.vantage-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--vantage-letter-spacing-wide);
  color: var(--vantage-text-muted);
  font-weight: 500;
}

/* --- 11.3 Widget Cards (Dashboard context) --- */
.vantage-dashboard .vantage-card {
  background-color: var(--vantage-background-card);
  border: 1px solid var(--vantage-border);
  border-radius: var(--vantage-radius-xl);
  margin-bottom: 24px;
  overflow: hidden;
}

.vantage-dashboard .vantage-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--vantage-border);
  background-color: var(--vantage-background-muted);
}

.vantage-dashboard .vantage-card-title {
  font-size: 16px;
  font-weight: 400 !important;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--vantage-text);
}

.vantage-card-title i {
  color: var(--vantage-primary);
  font-size: 16px;
}

.vantage-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vantage-dashboard .vantage-card-body {
  padding: 24px;
}

.vantage-btn-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--vantage-text-muted);
  border-radius: var(--vantage-radius-md);
  cursor: pointer;
  transition: all var(--vantage-transition-fast);
}

.vantage-btn-icon:hover {
  background-color: var(--vantage-background-subtle);
  color: var(--vantage-text);
}

/* --- 11.4 Service / Invoice / Ticket Item Rows --- */
.vantage-service-item,
.vantage-invoice-item,
.vantage-ticket-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--vantage-border);
}

.vantage-service-item:last-child,
.vantage-invoice-item:last-child,
.vantage-ticket-item:last-child {
  border-bottom: none;
}

.vantage-service-icon,
.vantage-invoice-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vantage-background-muted);
  border-radius: var(--vantage-radius-lg);
  color: var(--vantage-primary);
  font-size: 16px;
}

.vantage-service-details,
.vantage-invoice-details,
.vantage-ticket-details {
  flex: 1;
  min-width: 0;
}

.vantage-service-name a,
.vantage-invoice-number a,
.vantage-ticket-subject a {
  color: var(--vantage-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vantage-service-name a:hover,
.vantage-invoice-number a:hover,
.vantage-ticket-subject a:hover {
  color: var(--vantage-primary);
}

.vantage-service-meta,
.vantage-invoice-meta,
.vantage-ticket-meta {
  font-size: 12px;
  color: var(--vantage-text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.vantage-ticket-meta i {
  font-size: 11px;
  margin-right: 4px;
}

.vantage-service-status,
.vantage-invoice-status,
.vantage-ticket-status {
  flex-shrink: 0;
}

.vantage-service-actions,
.vantage-invoice-actions,
.vantage-ticket-actions {
  flex-shrink: 0;
}

.vantage-ticket-priority {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.vantage-priority-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--vantage-radius-full);
  display: inline-block;
}

.vantage-priority-high {
  background-color: var(--vantage-error);
}

.vantage-priority-medium {
  background-color: var(--vantage-warning);
}

.vantage-priority-low {
  background-color: var(--vantage-success);
}

/* --- 11.5 Badges --- */
.vantage-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--vantage-radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.vantage-badge-active {
  background-color: var(--vantage-success-bg);
  color: #86efac;
}

.vantage-badge-pending {
  background-color: var(--vantage-warning-bg);
  color: #fcd34d;
}

.vantage-badge-suspended,
.vantage-badge-terminated,
.vantage-badge-cancelled {
  background-color: var(--vantage-error-bg);
  color: #fca5a5;
}

.vantage-badge-paid {
  background-color: var(--vantage-success-bg);
  color: #86efac;
}

.vantage-badge-unpaid {
  background-color: var(--vantage-warning-bg);
  color: #fcd34d;
}

.vantage-badge-overdue {
  background-color: var(--vantage-error-bg);
  color: #fca5a5;
}

.vantage-badge-open {
  background-color: var(--vantage-success-bg);
  color: #86efac;
}

.vantage-badge-answered {
  background-color: var(--vantage-info-bg);
  color: #93c5fd;
}

.vantage-badge-customer-reply,
.vantage-badge-awaiting-reply {
  background-color: var(--vantage-warning-bg);
  color: #fcd34d;
}

.vantage-badge-closed {
  background-color: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

.vantage-badge-on-hold,
.vantage-badge-in-progress {
  background-color: var(--vantage-info-bg);
  color: #93c5fd;
}

/* --- 11.6 Quick Actions Grid --- */
.vantage-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.vantage-quick-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--vantage-radius-lg);
  background-color: var(--vantage-background-muted);
  border: 1px solid var(--vantage-border);
  text-decoration: none;
  color: var(--vantage-text);
  transition: all var(--vantage-transition-fast);
}

.vantage-quick-action:hover {
  background-color: rgba(201, 162, 39, 0.05);
  border-left-color: var(--vantage-primary);
  color: var(--vantage-text);
  text-decoration: none;
}

.vantage-quick-action-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--vantage-radius-full);
  background-color: var(--vantage-background-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--vantage-primary);
  font-size: 14px;
}

.vantage-quick-action span {
  font-size: 13px;
  font-weight: 500;
}

/* --- 11.7 Empty States --- */
.vantage-empty-state {
  text-align: center;
  padding: 48px 24px;
}

.vantage-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--vantage-radius-full);
  background-color: var(--vantage-background-muted);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--vantage-primary);
}

.vantage-empty-title {
  font-size: 18px;
  font-weight: 500;
  margin-top: 16px;
  color: var(--vantage-text);
}

.vantage-empty-text {
  font-size: 14px;
  color: var(--vantage-text-muted);
  margin-bottom: 20px;
  margin-top: 8px;
}

/* --- 11.8 Sidebar Layout --- */
.vantage-sidebar {
  width: 100%;
  background-color: var(--vantage-background);
}

.vantage-sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--vantage-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vantage-sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.vantage-sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--vantage-radius-full);
  background-color: rgba(201, 162, 39, 0.15);
  color: var(--vantage-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.vantage-sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vantage-sidebar-username {
  font-size: 14px;
  font-weight: 500;
  color: var(--vantage-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vantage-sidebar-email {
  font-size: 12px;
  color: var(--vantage-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vantage-sidebar-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--vantage-border);
  border-radius: var(--vantage-radius-md);
  color: var(--vantage-text-muted);
  cursor: pointer;
  transition: all var(--vantage-transition-fast);
  flex-shrink: 0;
}

.vantage-sidebar-toggle:hover {
  background-color: var(--vantage-background-subtle);
  color: var(--vantage-text);
}

.vantage-sidebar-nav {
  padding: 8px 0;
}

.vantage-nav-section {
  margin-bottom: 8px;
}

.vantage-nav-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--vantage-letter-spacing-wide);
  color: var(--vantage-primary);
  font-weight: 500;
  padding: 8px 16px;
}

.vantage-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vantage-nav-item {
  padding: 0;
}

.vantage-nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--vantage-text-muted);
  text-decoration: none;
  border-radius: var(--vantage-radius-md);
  transition: all var(--vantage-transition-fast);
  font-size: 14px;
}

.vantage-nav-link:hover {
  background-color: var(--vantage-background-subtle);
  color: var(--vantage-text);
  text-decoration: none;
}

.vantage-nav-active .vantage-nav-link {
  background-color: var(--vantage-background-subtle);
  color: var(--vantage-primary);
  border-left: 3px solid var(--vantage-primary);
}

.vantage-nav-icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
}

.vantage-nav-text {
  flex: 1;
}

.vantage-nav-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  background-color: var(--vantage-primary);
  color: var(--vantage-primary-foreground);
  border-radius: var(--vantage-radius-full);
  font-weight: 600;
}

.vantage-nav-badge-warning {
  background-color: var(--vantage-warning);
  color: var(--vantage-primary-foreground);
}

.vantage-sidebar-footer {
  padding: 8px 0;
  border-top: 1px solid var(--vantage-border);
  margin-top: 8px;
}

.vantage-logout-link {
  color: var(--vantage-text-muted) !important;
}

.vantage-logout-link:hover {
  color: var(--vantage-error) !important;
  background-color: var(--vantage-error-bg) !important;
}

/* Sidebar collapsed state */
.vantage-sidebar-collapsed .vantage-sidebar-user-info,
.vantage-sidebar-collapsed .vantage-nav-text,
.vantage-sidebar-collapsed .vantage-nav-section-title,
.vantage-sidebar-collapsed .vantage-nav-badge {
  display: none;
}

.vantage-sidebar-collapsed {
  width: 64px;
}

.vantage-sidebar-collapsed .vantage-nav-link {
  justify-content: center;
  padding: 10px;
}

.vantage-sidebar-collapsed .vantage-sidebar-header {
  justify-content: center;
}

.vantage-sidebar-collapsed .vantage-sidebar-toggle i {
  transform: rotate(180deg);
}

/* Sidebar mobile overlay */
.vantage-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.vantage-sidebar-overlay-visible {
  display: block;
}

/* --- 11.9 Skeleton Loading States --- */
.vantage-skeleton {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--vantage-border);
}

.vantage-skeleton:last-child {
  border-bottom: none;
}

.vantage-skeleton-line {
  height: 12px;
  background-color: var(--vantage-background-subtle);
  border-radius: var(--vantage-radius-sm);
  animation: vantage-pulse 1.5s ease-in-out infinite;
}

.vantage-skeleton-line-title {
  width: 60%;
  height: 14px;
  margin-bottom: 8px;
}

.vantage-skeleton-line-meta {
  width: 40%;
}

.vantage-skeleton-icon,
.vantage-skeleton-priority,
.vantage-skeleton-status {
  width: 40px;
  height: 40px;
  border-radius: var(--vantage-radius-full);
  background-color: var(--vantage-background-subtle);
  flex-shrink: 0;
  animation: vantage-pulse 1.5s ease-in-out infinite;
}

.vantage-skeleton-priority {
  width: 8px;
  height: 8px;
}

.vantage-skeleton-status {
  width: 60px;
  height: 24px;
  border-radius: var(--vantage-radius-sm);
}

.vantage-skeleton-content {
  flex: 1;
}

@keyframes vantage-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- 11.10 Welcome Banner --- */
.vantage-welcome-banner {
  padding: 32px;
  background: linear-gradient(135deg, #1a1a1a 0%, #141414 50%, #0d0d0d 100%);
  border: 1px solid var(--vantage-border);
  border-radius: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.vantage-welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.vantage-welcome-text {
  flex: 1;
}

.vantage-welcome-title {
  font-size: 28px;
  font-weight: 300 !important;
  letter-spacing: 0.02em;
  color: var(--vantage-text);
  margin: 0;
}

.vantage-welcome-subtitle {
  font-size: 14px;
  color: var(--vantage-text-muted);
  margin-top: 8px;
  margin-bottom: 0;
}

.vantage-welcome-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.vantage-welcome-decoration {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30%;
  opacity: 0.05;
}

/* --- 11.11 Account Summary Widget --- */
.vantage-account-summary {
  padding: 0;
}

.vantage-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--vantage-border);
}

.vantage-account-row:last-child {
  border-bottom: none;
}

.vantage-account-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--vantage-letter-spacing-wide);
  color: var(--vantage-text-muted);
  font-weight: 500;
}

.vantage-account-value {
  font-size: 14px;
  color: var(--vantage-text);
  font-weight: 400;
}

.vantage-text-success {
  color: var(--vantage-success) !important;
}

.vantage-account-actions {
  padding-top: 16px;
}

.vantage-btn-outline {
  background-color: transparent;
  border: 1px solid var(--vantage-border);
  color: var(--vantage-primary);
}

.vantage-btn-outline:hover {
  background-color: rgba(201, 162, 39, 0.1);
  border-color: var(--vantage-primary);
  color: var(--vantage-primary);
}

/* --- 11.12 Ticket Stats (in widget) --- */
.vantage-ticket-stats {
  display: flex;
  gap: 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--vantage-border);
  margin-top: 8px;
}

.vantage-ticket-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.vantage-ticket-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--vantage-text);
}

.vantage-ticket-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--vantage-letter-spacing-wide);
  color: var(--vantage-text-muted);
  font-weight: 500;
}

/* --- 11.13 Widget Footer --- */
.vantage-widget-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  border-top: 1px solid var(--vantage-border);
  margin-top: 8px;
}

.vantage-widget-footer-text {
  font-size: 12px;
  color: var(--vantage-text-muted);
}

/* --- 11.14 Announcement Items --- */
.vantage-announcements-list {
  display: flex;
  flex-direction: column;
}

.vantage-announcement-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--vantage-border);
}

.vantage-announcement-item:last-child {
  border-bottom: none;
}

.vantage-announcement-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
}

.vantage-announcement-day {
  font-size: 20px;
  font-weight: 700;
  color: var(--vantage-text);
  line-height: 1.1;
}

.vantage-announcement-month {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--vantage-letter-spacing-wide);
  color: var(--vantage-primary);
  font-weight: 500;
}

.vantage-announcement-content {
  flex: 1;
  min-width: 0;
}

.vantage-announcement-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.vantage-announcement-title a {
  color: var(--vantage-text);
  text-decoration: none;
}

.vantage-announcement-title a:hover {
  color: var(--vantage-primary);
}

.vantage-announcement-excerpt {
  font-size: 13px;
  color: var(--vantage-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- 11.15 Select Component --- */
.vantage-select {
  width: 100%;
  padding: var(--vantage-space-3) var(--vantage-space-4);
  font-family: var(--vantage-font-sans);
  font-size: 14px;
  color: var(--vantage-text);
  background-color: var(--vantage-background);
  border: 1px solid var(--vantage-border);
  border-radius: var(--vantage-radius-lg);
  outline: none;
  transition: border-color var(--vantage-transition-fast);
}

.vantage-select:focus {
  border-color: var(--vantage-primary);
  box-shadow: var(--vantage-shadow-focus);
}


/* ============================================
   12. Footer Component
   Rich footer matching vantage.3vs.io
   ============================================ */

.vantage-footer {
  background-color: #0d0d0d;
  border-top: 1px solid var(--vantage-border);
  color: var(--vantage-text-muted);
}

.vantage-footer-newsletter {
  padding: 48px 0;
  text-align: center;
  border-bottom: 1px solid var(--vantage-border);
}

.vantage-footer-newsletter h3 {
  font-size: 20px;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  color: var(--vantage-text);
  margin-bottom: 8px;
}

.vantage-footer-newsletter p {
  font-size: 14px;
  color: var(--vantage-text-muted);
  margin-bottom: 24px;
}

.vantage-footer-newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto 16px;
}

.vantage-footer-newsletter-form input {
  flex: 1;
  padding: 12px 16px;
  background-color: #141414;
  border: 1px solid var(--vantage-border);
  border-radius: var(--vantage-radius-lg);
  color: var(--vantage-text);
  font-size: 14px;
  outline: none;
}

.vantage-footer-newsletter-form input:focus {
  border-color: var(--vantage-primary);
}

.vantage-footer-newsletter-form input::placeholder {
  color: var(--vantage-text-muted);
}

.vantage-footer-newsletter-form button {
  padding: 12px 24px;
  background-color: var(--vantage-primary);
  color: var(--vantage-primary-foreground);
  border: none;
  border-radius: var(--vantage-radius-lg);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vantage-letter-spacing-wide);
  cursor: pointer;
  transition: background-color var(--vantage-transition-fast);
  white-space: nowrap;
}

.vantage-footer-newsletter-form button:hover {
  background-color: var(--vantage-primary-hover);
}

.vantage-footer-newsletter-disclaimer {
  font-size: 12px;
  color: var(--vantage-text-subtle);
}

.vantage-footer-main {
  padding: 48px 0;
}

.vantage-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.vantage-footer-brand-logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--vantage-text);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.vantage-footer-brand-logo span {
  color: var(--vantage-primary);
}

.vantage-footer-address {
  font-size: 13px;
  line-height: 1.6;
  color: var(--vantage-text-muted);
  margin-bottom: 16px;
}

.vantage-footer-social {
  display: flex;
  gap: 16px;
}

.vantage-footer-social a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--vantage-letter-spacing-wide);
  color: var(--vantage-text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--vantage-transition-fast);
}

.vantage-footer-social a:hover {
  color: var(--vantage-primary);
}

.vantage-footer-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--vantage-letter-spacing-wide);
  color: var(--vantage-primary);
  font-weight: 500 !important;
  margin-bottom: 16px;
}

.vantage-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vantage-footer-col ul li {
  margin-bottom: 10px;
}

.vantage-footer-col ul li a {
  font-size: 13px;
  color: var(--vantage-text-muted);
  text-decoration: none;
  transition: color var(--vantage-transition-fast);
}

.vantage-footer-col ul li a:hover {
  color: var(--vantage-primary);
}

.vantage-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--vantage-text-muted);
}

.vantage-footer-contact-item i {
  color: var(--vantage-primary);
  width: 16px;
  text-align: center;
}

.vantage-footer-contact-item a {
  color: var(--vantage-text-muted) !important;
  text-decoration: none;
}

.vantage-footer-contact-item a:hover {
  color: var(--vantage-primary) !important;
}

.vantage-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--vantage-border);
  flex-wrap: wrap;
  gap: 16px;
}

.vantage-footer-copyright {
  font-size: 12px;
  color: var(--vantage-text-muted);
}

.vantage-footer-legal {
  display: flex;
  gap: 24px;
}

.vantage-footer-legal a {
  font-size: 12px;
  color: var(--vantage-text-muted) !important;
  text-decoration: none;
}

.vantage-footer-legal a:hover {
  color: var(--vantage-primary) !important;
}


/* ============================================
   13. WCAG Compliance
   ============================================ */

/* --- 13.1 Skip-to-Content Link --- */
.vantage-skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background-color: var(--vantage-primary);
  color: var(--vantage-primary-foreground);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--vantage-radius-lg) var(--vantage-radius-lg);
  transition: top var(--vantage-transition-fast);
}

.vantage-skip-link:focus {
  top: 0;
  outline: 2px solid var(--vantage-primary);
  outline-offset: 2px;
}

/* --- 13.2 Focus Indicators --- */
*:focus-visible {
  outline: 2px solid var(--vantage-primary);
  outline-offset: 2px;
}

/* Reset any outline:none that might exist, but preserve for non-keyboard */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure interactive elements have focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--vantage-primary);
  outline-offset: 2px;
}


/* ============================================
   14. Typography Alignment (Phase 4)
   ============================================ */

/* Card titles in dashboard context - use 400 weight, not 300 */
.vantage-dashboard .vantage-card-title,
.vantage-dashboard .card-title {
  font-weight: 400 !important;
}

/* Section labels consistency */
.vantage-nav-section-title,
.vantage-footer-col h4,
.vantage-stat-label,
.vantage-account-label,
.vantage-ticket-stat-label {
  font-family: var(--vantage-font-sans);
}


/* ============================================
   15. Responsive Breakpoints (Dashboard)
   ============================================ */

@media (max-width: 1200px) {
  .vantage-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .vantage-dashboard-sidebar {
    position: static;
  }
}

@media (max-width: 992px) {
  .vantage-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mobile sidebar */
  .vantage-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    z-index: 1000;
    background-color: var(--vantage-background);
    border-right: 1px solid var(--vantage-border);
    overflow-y: auto;
    transition: left var(--vantage-transition-slow);
  }

  .vantage-sidebar-mobile-open {
    left: 0;
  }

  .vantage-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .vantage-stats-grid {
    grid-template-columns: 1fr;
  }

  .vantage-quick-actions {
    grid-template-columns: 1fr;
  }

  .vantage-welcome-banner {
    padding: 24px;
  }

  .vantage-welcome-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .vantage-welcome-actions {
    justify-content: center;
  }

  .vantage-welcome-title {
    font-size: 22px;
  }

  .vantage-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vantage-footer-newsletter-form {
    flex-direction: column;
  }

  .vantage-footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .vantage-footer-legal {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .vantage-welcome-actions {
    flex-direction: column;
    width: 100%;
  }

  .vantage-welcome-actions .vantage-btn {
    width: 100%;
    justify-content: center;
  }

  .vantage-dashboard .vantage-card-header {
    padding: 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .vantage-dashboard .vantage-card-body {
    padding: 16px;
  }

  .vantage-stat-card {
    padding: 16px;
  }

  .vantage-stat-value {
    font-size: 22px;
  }

  .vantage-ticket-item {
    flex-wrap: wrap;
  }
}

/* ============================================================
   DataTable Dark Theme Overrides
   Fixes white background / invisible text on all list pages
   (Services, Invoices, Domains, Tickets, Quotes, Emails)
   ============================================================ */

/* Table base */
.table-list,
.table.dataTable,
table.dataTable,
.dataTables_wrapper table {
  background-color: #0d0d0d !important;
  color: #e0e0e0 !important;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table cells */
.table-list td,
.table-list th,
table.dataTable td,
table.dataTable th,
.dataTables_wrapper td,
.dataTables_wrapper th {
  background-color: #0d0d0d !important;
  color: #e0e0e0 !important;
  border-color: #2a2a2a !important;
  padding: 12px 16px;
  vertical-align: middle;
}

/* Table header */
.table-list thead th,
table.dataTable thead th,
table.dataTable thead td {
  background-color: #141414 !important;
  color: #c9a227 !important;
  border-bottom: 2px solid #2a2a2a !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Sorting indicators */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-color: #141414 !important;
  color: #c9a227 !important;
}

table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  color: #c9a227 !important;
}

/* Row striping */
.table-list tbody tr:nth-child(odd),
table.dataTable tbody tr:nth-child(odd) {
  background-color: #0d0d0d !important;
}

.table-list tbody tr:nth-child(even),
table.dataTable tbody tr:nth-child(even) {
  background-color: #111111 !important;
}

.table-list tbody tr:nth-child(odd) td,
table.dataTable tbody tr:nth-child(odd) td {
  background-color: #0d0d0d !important;
}

.table-list tbody tr:nth-child(even) td,
table.dataTable tbody tr:nth-child(even) td {
  background-color: #111111 !important;
}

/* Row hover */
.table-list tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: #1a1a1a !important;
}

.table-list tbody tr:hover td,
table.dataTable tbody tr:hover td {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* Links inside tables */
.table-list td a,
table.dataTable td a,
.dataTables_wrapper td a {
  color: #c9a227 !important;
  text-decoration: none;
}

.table-list td a:hover,
table.dataTable td a:hover,
.dataTables_wrapper td a:hover {
  color: #e0c050 !important;
  text-decoration: underline;
}

/* DataTables wrapper elements */
.dataTables_wrapper {
  color: #a0a0a0 !important;
}

/* Search and length controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 6px;
  padding: 6px 12px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: #c9a227 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2);
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  color: #a0a0a0 !important;
}

/* Info text ("Showing 1 to 10 of 41 entries") */
.dataTables_wrapper .dataTables_info {
  color: #808080 !important;
  font-size: 13px;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
  color: #a0a0a0 !important;
}

/* Outer .paginate_button wrapper - remove border (inner .page-link has it) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: transparent !important;
  color: #a0a0a0 !important;
  border: none !important;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: transparent !important;
  border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: transparent !important;
  border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background-color: transparent !important;
  border: none !important;
}

/* "No results" message */
.dataTables_wrapper .dataTables_empty,
table.dataTable td.dataTables_empty {
  background-color: #0d0d0d !important;
  color: #808080 !important;
  text-align: center;
  padding: 32px !important;
}

/* Status labels/badges inside tables */
.table-list .label,
table.dataTable .label {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.label-active,
.label-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}

.label-pending,
.label-warning {
  background-color: rgba(234, 179, 8, 0.15) !important;
  color: #facc15 !important;
}

.label-overdue,
.label-danger,
.label-suspended,
.label-terminated {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

.label-info,
.label-primary {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

.label-default {
  background-color: rgba(160, 160, 160, 0.15) !important;
  color: #a0a0a0 !important;
}

/* WHMCS-specific status labels */
.label-status-active { background-color: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; }
.label-status-pending { background-color: rgba(234, 179, 8, 0.15) !important; color: #facc15 !important; }
.label-status-suspended { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }
.label-status-terminated { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }
.label-status-cancelled { background-color: rgba(160, 160, 160, 0.15) !important; color: #a0a0a0 !important; }

/* Paid/Unpaid invoice statuses in tables */
.label-paid { background-color: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; }
.label-unpaid { background-color: rgba(234, 179, 8, 0.15) !important; color: #facc15 !important; }
.label-cancelled { background-color: rgba(160, 160, 160, 0.15) !important; color: #a0a0a0 !important; }
.label-refunded { background-color: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; }
.label-collections { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }
.label-payment-pending { background-color: rgba(234, 179, 8, 0.15) !important; color: #facc15 !important; }

/* Table container/card on list pages */
.client-area-content .panel,
.client-area-content .card {
  background-color: #0d0d0d !important;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
}

.client-area-content .panel-heading,
.client-area-content .card-header {
  background-color: #141414 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #e0e0e0 !important;
}

.client-area-content .panel-body,
.client-area-content .card-body {
  background-color: #0d0d0d !important;
}

/* Table responsive wrapper */
.table-responsive {
  background-color: #0d0d0d !important;
  border: none !important;
}

/* Bootstrap table overrides for dark theme */
.table {
  color: #e0e0e0;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: #2a2a2a !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #0d0d0d;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #111111;
}

.table-hover tbody tr:hover {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Select/checkbox columns */
table.dataTable tbody td.select-checkbox,
table.dataTable tbody th.select-checkbox {
  background-color: inherit !important;
}

/* Buttons inside table rows */
.table-list .btn,
table.dataTable .btn {
  background-color: #1a1a1a;
  color: #e0e0e0;
  border-color: #2a2a2a;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
}

.table-list .btn:hover,
table.dataTable .btn:hover {
  background-color: #2a2a2a;
  color: #ffffff;
  border-color: #c9a227;
}

.table-list .btn-primary,
table.dataTable .btn-primary {
  background: linear-gradient(135deg, #c9a227, #a88620);
  color: #0d0d0d;
  border-color: #c9a227;
}

.table-list .btn-primary:hover,
table.dataTable .btn-primary:hover {
  background: linear-gradient(135deg, #e0b82e, #c9a227);
  color: #0d0d0d;
}

/* DataTable processing indicator */
.dataTables_wrapper .dataTables_processing {
  background-color: rgba(13, 13, 13, 0.9) !important;
  color: #c9a227 !important;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
}

/* Scrollbar styling for table containers */
.dataTables_wrapper ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dataTables_wrapper ::-webkit-scrollbar-track {
  background: #0d0d0d;
}

.dataTables_wrapper ::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
}

.dataTables_wrapper ::-webkit-scrollbar-thumb:hover {
  background: #3a3a3a;
}

/* ============================================================
   Border & Input Cleanup - Dark Theme
   Fixes white borders on tables, search inputs, pagination,
   buttons, and input groups across all client area pages
   ============================================================ */

/* Table outer border - remove white/light gray Bootstrap default */
table.dataTable,
.table-list,
table.table-list,
.dataTables_wrapper table,
table.dataTable.no-footer {
  border: 1px solid #2a2a2a !important;
  border-radius: 8px;
  overflow: hidden;
}

table.dataTable thead th:first-child {
  border-top-left-radius: 8px;
}

table.dataTable thead th:last-child {
  border-top-right-radius: 8px;
}

/* Remove bottom border on last row */
table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* Main search input group (.input-group.search) - white border fix */
.input-group.search,
.input-group.active-client {
  border: 1px solid #2a2a2a !important;
  border-radius: 6px !important;
  overflow: hidden;
}

.input-group.search:focus-within {
  border-color: #c9a227 !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.15);
}

/* Search button inside input-group */
.input-group .btn.btn-default,
.input-group .btn-default {
  background-color: #1a1a1a !important;
  color: #808080 !important;
  border: none !important;
  border-right: 1px solid #2a2a2a !important;
}

.input-group .btn.btn-default:hover,
.input-group .btn-default:hover {
  background-color: #2a2a2a !important;
  color: #c9a227 !important;
}

/* Search icon color */
.input-group .btn .fas.fa-search,
.input-group-text .fas.fa-search,
.input-group-prepend .fas.fa-search {
  color: #808080;
}

.input-group:focus-within .fas.fa-search {
  color: #c9a227;
}

/* Input-group-text (icon containers) */
.input-group-text {
  background-color: #1a1a1a !important;
  color: #808080 !important;
  border: none !important;
}

/* Form controls inside input groups */
.input-group .form-control {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border: none !important;
}

.input-group .form-control:focus {
  box-shadow: none !important;
  color: #ffffff !important;
}

.input-group .form-control::placeholder {
  color: #666666 !important;
}

/* Standalone form controls (not in input-group) */
.form-control {
  background-color: #0d0d0d !important;
  color: #e0e0e0 !important;
  border: 1px solid #2a2a2a !important;
}

.form-control:focus {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-color: #c9a227 !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.15) !important;
}

.form-control::placeholder {
  color: #666666 !important;
}

/* Custom select dropdowns */
.custom-select {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border: 1px solid #2a2a2a !important;
}

.custom-select:focus {
  border-color: #c9a227 !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.15) !important;
}

/* Pagination - Bootstrap 4 .page-link inside .page-item (WHMCS uses this, not .current) */
.dataTables_wrapper .dataTables_paginate .page-item .page-link,
.pagination .page-link {
  background-color: #1a1a1a !important;
  color: #a0a0a0 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 6px;
  margin: 0 2px;
  padding: 6px 12px;
  transition: all 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover,
.pagination .page-link:hover {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #c9a227 !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #c9a227, #a88620) !important;
  color: #0d0d0d !important;
  border-color: #c9a227 !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link {
  background-color: #111111 !important;
  color: #444444 !important;
  border-color: #1a1a1a !important;
  cursor: not-allowed;
}

/* General button dark theme overrides */
.btn-default,
.btn-secondary {
  background-color: #1a1a1a !important;
  color: #a0a0a0 !important;
  border: 1px solid #2a2a2a !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #3a3a3a !important;
}

.btn-primary {
  background: linear-gradient(135deg, #c9a227, #a88620) !important;
  color: #0d0d0d !important;
  border: 1px solid #c9a227 !important;
  font-weight: 600;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #e0b82e, #c9a227) !important;
  border-color: #e0b82e !important;
}

/* "Show X entries" select in DataTables */
.dataTables_wrapper .dataTables_length select {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 6px !important;
  padding: 4px 8px;
  -webkit-appearance: none;
  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='%23808080' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

/* List table wrapper (WHMCS .listtable container) */
.listtable {
  background-color: transparent !important;
  border: none !important;
}

/* Number input for the "show entries" on some pages */
.input-inline {
  background-color: #0d0d0d !important;
  color: #e0e0e0 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 4px;
}

/* Cart button - remove white border */
.cart-btn,
.btn.nav-link.cart-btn,
a.btn.nav-link.cart-btn {
  border: 1px solid #2a2a2a !important;
  background-color: transparent !important;
  color: #a0a0a0 !important;
  border-radius: 8px;
}

.cart-btn:hover,
.btn.nav-link.cart-btn:hover {
  border-color: #c9a227 !important;
  color: #c9a227 !important;
}

/* Hamburger/menu button in header */
.navbar-toggler,
.btn.nav-link:not(.cart-btn) {
  border: 1px solid #2a2a2a !important;
  color: #a0a0a0 !important;
}

.navbar-toggler:hover,
.btn.nav-link:not(.cart-btn):hover {
  border-color: #c9a227 !important;
  color: #c9a227 !important;
}

/* Nav search - search icon button with white bg fix */
.input-group.search .input-group-prepend .btn,
.input-group.search .btn.btn-default {
  background-color: #141414 !important;
  color: #808080 !important;
  border: none !important;
  border-right: 1px solid #2a2a2a !important;
  border-radius: 0 !important;
}

.input-group.search .input-group-prepend .btn:hover,
.input-group.search .btn.btn-default:hover {
  background-color: #1a1a1a !important;
  color: #c9a227 !important;
}

/* DataTable search input - remove WHMCS search.png icon (white bg on dark input) */
.dataTables_filter input[type="search"],
.dataTables_wrapper input[type="search"] {
  background-image: none !important;
  padding-left: 12px !important;
}

/* Webkit search decorations */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* Dropdown menus in dark theme */
.dropdown-menu {
  background-color: #141414 !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dropdown-item {
  color: #e0e0e0 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #1a1a1a !important;
  color: #c9a227 !important;
}

.dropdown-divider {
  border-color: #2a2a2a !important;
}