/* ═══════════════════════════════════════════════════════════
   EchoWork – Theme Switcher (Accessibility)
   Floating palette button + dropdown
   3 chế độ: default | dark | high-contrast
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Theme Variables ──────────────────────────────────── */
:root {
  --theme-bg:          #f4f7f6;
  --theme-surface:     #ffffff;
  --theme-nav-bg:      #ffffff;
  --theme-card-bg:     #ffffff;
  --theme-text:        #2d3436;
  --theme-text-muted:  #636e72;
  --theme-border:      #e0e0e0;
  --theme-primary:     #00b894;
  --theme-primary-fg:  #ffffff;
  --theme-link:        #00b894;
  --theme-input-bg:    #ffffff;
  --theme-input-text:  #2d3436;
  --theme-input-border:#e0e0e0;
  --theme-footer-bg:   #2d3436;
  --theme-footer-text: #999999;
}

/* ── Widget Container ─────────────────────────────────────── */
#echo-a11y-widget {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 99999;
  font-family: 'Inter', sans-serif;
}

/* ── Toggle Button (palette icon via SVG) ─────────────────── */
#echo-a11y-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00b894, #00cec9);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,184,148,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  outline: none;
  padding: 0;
}
#echo-a11y-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0,184,148,0.5);
}
#echo-a11y-btn:focus-visible {
  outline: 3px solid #00b894;
  outline-offset: 3px;
}
/* Palette SVG icon (painted into button via JS) */

/* ── Dropdown Panel ───────────────────────────────────────── */
#echo-a11y-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  display: none;
  animation: a11y-fadein 0.15s ease;
}
#echo-a11y-menu.open { display: block; }

@keyframes a11y-fadein {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.a11y-menu-header {
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9ca3af;
  border-bottom: 1px solid #f3f4f6;
}

.a11y-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #374151;
}
.a11y-option:hover { background: #f9fafb; }
.a11y-option.active {
  background: #f0fdf4;
  color: #065f46;
  font-weight: 600;
}
.a11y-option .a11y-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.a11y-opt-default .a11y-icon  { background: #f3f4f6; }
.a11y-opt-dark    .a11y-icon  { background: #1e293b; }
.a11y-opt-high    .a11y-icon  { background: #000; }
.a11y-option .a11y-check {
  margin-left: auto;
  color: #00b894;
  font-size: 16px;
  opacity: 0;
  flex-shrink: 0;
}
.a11y-option.active .a11y-check { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   MODE: DARK  (Github Dark / Discord style)
   Background: #121212  Card: #1E1E1E  Text: #EAEAEA
   Primary: #4F8CFF
   ═══════════════════════════════════════════════════════════ */
body.a11y-dark {
  --theme-bg:          #121212;
  --theme-surface:     #1e1e1e;
  --theme-nav-bg:      #161616;
  --theme-card-bg:     #1e1e1e;
  --theme-text:        #eaeaea;
  --theme-text-muted:  #a0aec0;
  --theme-border:      #2d2d2d;
  --theme-primary:     #4f8cff;
  --theme-primary-fg:  #ffffff;
  --theme-link:        #4f8cff;
  --theme-input-bg:    #2a2a2a;
  --theme-input-text:  #eaeaea;
  --theme-input-border:#3a3a3a;
  --theme-footer-bg:   #0d0d0d;
  --theme-footer-text: #6b7280;

  background-color: #121212 !important;
  color: #eaeaea !important;
}

/* Navbar / header */
body.a11y-dark header,
body.a11y-dark .sticky-nav,
body.a11y-dark nav.sticky-nav {
  background: rgba(22,22,22,0.97) !important;
  border-bottom: 1px solid #2d2d2d !important;
}
body.a11y-dark .top-header {
  background: #161616 !important;
  border-bottom: 1px solid #2d2d2d !important;
}

/* Sidebar */
body.a11y-dark .sidebar {
  background: #161616 !important;
  border-right: 1px solid #2d2d2d !important;
}
body.a11y-dark .sidebar-nav a { color: #a0aec0 !important; }
body.a11y-dark .sidebar-nav a.active,
body.a11y-dark .sidebar-nav a:hover { background: rgba(79,140,255,.12) !important; color: #4f8cff !important; }

/* Cards / surfaces */
body.a11y-dark section,
body.a11y-dark .card,
body.a11y-dark .price-card,
body.a11y-dark .job-card,
body.a11y-dark .cv-form-card,
body.a11y-dark .cvb-editor,
body.a11y-dark .cv-section,
body.a11y-dark .form-container,
body.a11y-dark .stat-card,
body.a11y-dark .b2b-card {
  background: #1e1e1e !important;
  border-color: #2d2d2d !important;
  color: #eaeaea !important;
}

/* Text */
body.a11y-dark h1, body.a11y-dark h2, body.a11y-dark h3,
body.a11y-dark h4, body.a11y-dark h5, body.a11y-dark h6 { color: #f5f5f5 !important; }
body.a11y-dark p, body.a11y-dark span, body.a11y-dark li,
body.a11y-dark td, body.a11y-dark th { color: #cbd5e1 !important; }
body.a11y-dark .plan-name, body.a11y-dark .b2b-plan { color: #a0aec0 !important; }
body.a11y-dark label { color: #c4c4c4 !important; }

/* Links */
body.a11y-dark a { color: #4f8cff !important; }
body.a11y-dark a:hover { color: #7aaeff !important; }

/* Buttons */
body.a11y-dark .btn-primary,
body.a11y-dark .b2b-btn-primary,
body.a11y-dark .btn-save-cv,
body.a11y-dark .btn-save {
  background: #4f8cff !important;
  color: #fff !important;
}
body.a11y-dark .btn-outline {
  border-color: #4f8cff !important;
  color: #4f8cff !important;
}
body.a11y-dark .btn-outline:hover { background: rgba(79,140,255,.12) !important; }

/* Inputs */
body.a11y-dark input,
body.a11y-dark textarea,
body.a11y-dark select {
  background: #2a2a2a !important;
  color: #eaeaea !important;
  border-color: #3a3a3a !important;
}
body.a11y-dark input:focus,
body.a11y-dark textarea:focus,
body.a11y-dark select:focus {
  border-color: #4f8cff !important;
  box-shadow: 0 0 0 3px rgba(79,140,255,.15) !important;
}

/* Footer */
body.a11y-dark footer { background: #0d0d0d !important; color: #6b7280 !important; }
body.a11y-dark .footer-link, body.a11y-dark .footer-bottom { color: #6b7280 !important; }

/* Hero / background sections */
body.a11y-dark .hero { filter: brightness(0.78); }
body.a11y-dark body { background-color: #121212 !important; }

/* Widget dropdown in dark mode */
body.a11y-dark #echo-a11y-menu { background: #1e1e1e !important; border-color: #2d2d2d !important; }
body.a11y-dark .a11y-menu-header { color: #6b7280 !important; border-color: #2d2d2d !important; }
body.a11y-dark .a11y-option { color: #cbd5e1 !important; }
body.a11y-dark .a11y-option:hover { background: #2a2a2a !important; }
body.a11y-dark .a11y-option.active { background: rgba(79,140,255,.12) !important; color: #4f8cff !important; }
body.a11y-dark .a11y-check { color: #4f8cff !important; }

/* ═══════════════════════════════════════════════════════════
   MODE: HIGH CONTRAST
   BG: #000000  Text: #FFFFFF  Button: #FFD600  Link: #00E5FF
   WCAG AA/AAA compliant
   ═══════════════════════════════════════════════════════════ */
body.a11y-high-contrast {
  --theme-bg:          #000000;
  --theme-surface:     #000000;
  --theme-nav-bg:      #000000;
  --theme-card-bg:     #000000;
  --theme-text:        #ffffff;
  --theme-text-muted:  #ffffff;
  --theme-border:      #ffffff;
  --theme-primary:     #FFD600;
  --theme-primary-fg:  #000000;
  --theme-link:        #00E5FF;
  --theme-input-bg:    #000000;
  --theme-input-text:  #ffffff;
  --theme-input-border:#ffffff;
  --theme-footer-bg:   #000000;
  --theme-footer-text: #ffffff;

  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Navbar */
body.a11y-high-contrast header,
body.a11y-high-contrast .sticky-nav,
body.a11y-high-contrast nav.sticky-nav {
  background: #000000 !important;
  border-bottom: 2px solid #ffffff !important;
}
body.a11y-high-contrast .top-header {
  background: #000000 !important;
  border-bottom: 2px solid #ffffff !important;
}
body.a11y-high-contrast .nav-logo img,
body.a11y-high-contrast .logo img { filter: invert(1) !important; }

/* Sidebar */
body.a11y-high-contrast .sidebar {
  background: #000000 !important;
  border-right: 2px solid #ffffff !important;
}
body.a11y-high-contrast .sidebar-nav a { color: #ffffff !important; }
body.a11y-high-contrast .sidebar-nav a.active,
body.a11y-high-contrast .sidebar-nav a:hover {
  background: #FFD600 !important;
  color: #000000 !important;
}

/* Cards */
body.a11y-high-contrast section,
body.a11y-high-contrast .card,
body.a11y-high-contrast .price-card,
body.a11y-high-contrast .job-card,
body.a11y-high-contrast .cv-form-card,
body.a11y-high-contrast .cvb-editor,
body.a11y-high-contrast .cv-section,
body.a11y-high-contrast .form-container,
body.a11y-high-contrast .stat-card,
body.a11y-high-contrast .b2b-card,
body.a11y-high-contrast .list-item,
body.a11y-high-contrast .auth-form-wrap {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

/* Text */
body.a11y-high-contrast h1, body.a11y-high-contrast h2,
body.a11y-high-contrast h3, body.a11y-high-contrast h4,
body.a11y-high-contrast h5, body.a11y-high-contrast h6 { color: #ffffff !important; text-shadow: none !important; }
body.a11y-high-contrast p, body.a11y-high-contrast span,
body.a11y-high-contrast li, body.a11y-high-contrast label,
body.a11y-high-contrast td, body.a11y-high-contrast th { color: #ffffff !important; }

/* Links */
body.a11y-high-contrast a { color: #00E5FF !important; text-decoration: underline !important; }
body.a11y-high-contrast a:hover { color: #00E5FF !important; text-decoration: underline !important; }

/* Buttons – Yellow #FFD600 / black text */
body.a11y-high-contrast button,
body.a11y-high-contrast .btn,
body.a11y-high-contrast .btn-primary,
body.a11y-high-contrast .b2b-btn,
body.a11y-high-contrast .b2b-btn-primary,
body.a11y-high-contrast .b2b-btn-outline,
body.a11y-high-contrast .btn-save-cv,
body.a11y-high-contrast .btn-download-cv,
body.a11y-high-contrast .cta,
body.a11y-high-contrast .auth-form-wrap .btn-submit,
body.a11y-high-contrast .auth-tab {
  background: #FFD600 !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
  font-weight: 700 !important;
}
body.a11y-high-contrast button:hover,
body.a11y-high-contrast .btn:hover,
body.a11y-high-contrast .btn-primary:hover { filter: brightness(1.15); }
body.a11y-high-contrast .auth-tab.active { background: #ffffff !important; color: #000000 !important; }

/* Inputs / Forms */
body.a11y-high-contrast input,
body.a11y-high-contrast textarea,
body.a11y-high-contrast select {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
body.a11y-high-contrast input::placeholder,
body.a11y-high-contrast textarea::placeholder { color: #cccccc !important; }
body.a11y-high-contrast input:focus,
body.a11y-high-contrast textarea:focus,
body.a11y-high-contrast select:focus {
  outline: 3px solid #FFD600 !important;
  box-shadow: none !important;
}

/* Footer */
body.a11y-high-contrast footer {
  background: #000000 !important;
  border-top: 2px solid #ffffff !important;
  color: #f5f5f5 !important;
}
body.a11y-high-contrast .footer-link,
body.a11y-high-contrast .footer-bottom p { color: #f5f5f5 !important; }

/* Images */
body.a11y-high-contrast img:not(.logo img):not([src*="ECHO.png"]):not([src*="echo/5"]) {
  filter: contrast(1.3) brightness(1.1) !important;
}

/* Skill tags, badges */
body.a11y-high-contrast .skill-tag,
body.a11y-high-contrast .cv-skill-chip,
body.a11y-high-contrast .b2b-save-badge {
  background: #FFD600 !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}

/* Widget dropdown in HC mode */
body.a11y-high-contrast #echo-a11y-btn { background: #FFD600 !important; color: #000000 !important; }
body.a11y-high-contrast #echo-a11y-menu { background: #000000 !important; border: 2px solid #ffffff !important; }
body.a11y-high-contrast .a11y-menu-header { color: #f5f5f5 !important; border-color: #ffffff !important; }
body.a11y-high-contrast .a11y-option { color: #ffffff !important; }
body.a11y-high-contrast .a11y-option:hover { background: #222222 !important; }
body.a11y-high-contrast .a11y-option.active { background: #FFD600 !important; color: #000000 !important; }
body.a11y-high-contrast .a11y-check { color: #000000 !important; }

/* ── Smooth transition ───────────────────────────────────── */
body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════
   RECRUITER DASHBOARD – DARK MODE EXTENSIONS
   ═══════════════════════════════════════════════════════════ */
body.a11y-dark .top-header {
  background: #161616 !important;
  border-bottom-color: #2d2d2d !important;
}
body.a11y-dark .top-header input {
  background: #2a2a2a !important;
  color: #eaeaea !important;
  border-color: #3a3a3a !important;
}
body.a11y-dark .main-wrapper {
  background: #121212 !important;
}
body.a11y-dark .content {
  background: #121212 !important;
}
body.a11y-dark .chart-card,
body.a11y-dark .kanban-col,
body.a11y-dark .activity-card,
body.a11y-dark .job-list-card,
body.a11y-dark .applicants-table-card,
body.a11y-dark .quick-action-card {
  background: #1e1e1e !important;
  border-color: #2d2d2d !important;
}
body.a11y-dark .kanban-col-header {
  background: #1e1e1e !important;
  border-bottom-color: #2d2d2d !important;
}
body.a11y-dark .kanban-col-title,
body.a11y-dark .card-title,
body.a11y-dark .card-subtitle,
body.a11y-dark .qa-label,
body.a11y-dark .stat-label,
body.a11y-dark .page-greeting p {
  color: #a0aec0 !important;
}
body.a11y-dark .page-greeting h1 {
  color: #f5f5f5 !important;
}
body.a11y-dark .candidate-card {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
}
body.a11y-dark .candidate-name {
  color: #eaeaea !important;
}
body.a11y-dark .candidate-role {
  color: #a0aec0 !important;
}
body.a11y-dark .app-table th {
  color: #9ca3af !important;
  border-bottom-color: #2d2d2d !important;
}
body.a11y-dark .app-table td {
  color: #cbd5e1 !important;
  border-bottom-color: #2d2d2d !important;
}
body.a11y-dark .app-table tr:hover td {
  background: #2a2a2a !important;
}
body.a11y-dark .job-row {
  border-bottom-color: #2d2d2d !important;
}
body.a11y-dark .job-title {
  color: #eaeaea !important;
}
body.a11y-dark .job-meta-text {
  color: #9ca3af !important;
}
body.a11y-dark .activity-item {
  border-bottom-color: #2d2d2d !important;
}
body.a11y-dark .activity-text {
  color: #cbd5e1 !important;
}
body.a11y-dark .icon-btn {
  border-color: #2d2d2d !important;
  color: #a0aec0 !important;
}
body.a11y-dark .company-profile {
  border-color: #2d2d2d !important;
}
body.a11y-dark .company-name {
  color: #eaeaea !important;
}
body.a11y-dark .back-home-btn {
  border-color: #2d2d2d !important;
  color: #a0aec0 !important;
}
body.a11y-dark .back-home-btn:hover {
  background: rgba(79,140,255,0.1) !important;
  color: #4f8cff !important;
}

/* ═══════════════════════════════════════════════════════════
   RECRUITER DASHBOARD – HIGH CONTRAST EXTENSIONS
   ═══════════════════════════════════════════════════════════ */
body.a11y-high-contrast .top-header {
  background: #000000 !important;
  border-bottom: 2px solid #ffffff !important;
}
body.a11y-high-contrast .chart-card,
body.a11y-high-contrast .kanban-col,
body.a11y-high-contrast .activity-card,
body.a11y-high-contrast .job-list-card,
body.a11y-high-contrast .applicants-table-card,
body.a11y-high-contrast .quick-action-card,
body.a11y-high-contrast .candidate-card {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}
body.a11y-high-contrast .kanban-col-header {
  background: #000000 !important;
  border-bottom: 2px solid #ffffff !important;
}
body.a11y-high-contrast .app-table th,
body.a11y-high-contrast .app-table td {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}
body.a11y-high-contrast .app-table tr:hover td {
  background: #1a1a1a !important;
}
body.a11y-high-contrast .icon-btn {
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  background: #000000 !important;
}
body.a11y-high-contrast .company-profile,
body.a11y-high-contrast .back-home-btn {
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  background: #000000 !important;
}
body.a11y-high-contrast .kanban-count,
body.a11y-high-contrast .stat-badge,
body.a11y-high-contrast .match-badge {
  background: #FFD600 !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}
body.a11y-high-contrast .status-pending,
body.a11y-high-contrast .status-accepted,
body.a11y-high-contrast .status-rejected {
  background: #FFD600 !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}
body.a11y-high-contrast .job-apps-count {
  background: #FFD600 !important;
  color: #000000 !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV OVERLAY – DARK MODE
   ═══════════════════════════════════════════════════════════ */
body.a11y-dark #echo-a11y-widget {
  z-index: 99998;
}

/* ── Pills in dark mode ──────────────────────────────────── */
body.a11y-dark .pill-tag {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #cbd5e1 !important;
}
body.a11y-dark .pill-tag:hover {
  border-color: #4f8cff !important;
  color: #4f8cff !important;
  background: rgba(79,140,255,0.08) !important;
}
body.a11y-dark .pill-tag:has(input:checked) {
  background: #4f8cff !important;
  border-color: #4f8cff !important;
  color: #ffffff !important;
}

/* ── Pills in high contrast ──────────────────────────────── */
body.a11y-high-contrast .pill-tag {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}
body.a11y-high-contrast .pill-tag:has(input:checked) {
  background: #FFD600 !important;
  border-color: #FFD600 !important;
  color: #000000 !important;
}

/* ── Filter title in dark mode ───────────────────────────── */
body.a11y-dark .filter-title,
body.a11y-dark .accordion-trigger {
  color: #eaeaea !important;
}
body.a11y-dark .filter-title:hover,
body.a11y-dark .accordion-trigger:hover {
  background: #2a2a2a !important;
  color: #4f8cff !important;
}
body.a11y-dark .accordion-group {
  border-bottom-color: #2d2d2d !important;
}

body.a11y-high-contrast .filter-title,
body.a11y-high-contrast .accordion-trigger {
  color: #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
}
body.a11y-high-contrast .accordion-group {
  border-bottom-color: #ffffff !important;
}

/* ── Nav Pro link dark/HC ────────────────────────────────── */
body.a11y-dark .nav-pro-link {
  color: #55efc4 !important;
}
body.a11y-high-contrast .nav-pro-link {
  color: #FFD600 !important;
}

/* ── Tag chips dark/HC ───────────────────────────────────── */
body.a11y-dark .tag {
  background: #2a2a2a !important;
  color: #a0aec0 !important;
}
body.a11y-dark .tag-wheelchair { background: #1a3a2a !important; color: #4ade80 !important; }
body.a11y-dark .tag-remote     { background: #1a2a3a !important; color: #74b9ff !important; }
body.a11y-dark .tag-vision     { background: #3a1a2a !important; color: #f472b6 !important; }
body.a11y-dark .tag-elevator   { background: #3a2a1a !important; color: #fbbf24 !important; }

body.a11y-high-contrast .tag,
body.a11y-high-contrast .tag-acc { background: #000000 !important; color: #ffffff !important; border: 1px solid #ffffff !important; }