/* ============================================
   DESIGN ENHANCEMENTS v3.0
   Modern, Warm Design Overlays
   ============================================ */

/* Enhanced Kanban Cards */
.kanban-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
}

.kanban-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
  border-color: var(--color-primary-light) !important;
}

.kanban-card h4 {
  color: var(--color-text-primary) !important;
  font-weight: var(--weight-semibold) !important;
  font-size: var(--text-lg) !important;
  margin-bottom: var(--space-2) !important;
}

.kanban-card p {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-relaxed) !important;
}

/* Kanban Column Headers */
.kanban-column h3 {
  color: var(--color-text-primary) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-xl) !important;
  margin-bottom: var(--space-4) !important;
}

/* Enhanced Form Cards */
.form-card {
  background: var(--color-surface) !important;
  padding: var(--space-8) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--color-border-light) !important;
  margin-bottom: var(--space-8) !important;
}

.form-card h3 {
  color: var(--color-text-primary) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-2xl) !important;
  margin-bottom: var(--space-6) !important;
}

/* Enhanced Form Inputs */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background: var(--color-surface) !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-base) !important;
  color: var(--color-text-primary) !important;
  transition: all var(--transition-base) !important;
  font-family: var(--font-sans) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-tertiary) !important;
}

/* Enhanced Labels */
label {
  color: var(--color-text-secondary) !important;
  font-weight: var(--weight-medium) !important;
  font-size: var(--text-sm) !important;
  margin-bottom: var(--space-2) !important;
  display: block !important;
}

/* Modal Enhancements */
.modal-content {
  background: var(--color-surface) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-2xl) !important;
  border: 1px solid var(--color-border-light) !important;
}

.modal-header {
  background: linear-gradient(135deg,
    rgba(var(--color-primary-rgb), 1) 0%,
    rgba(var(--color-accent-dark), 1) 100%) !important;
  color: var(--color-text-inverse) !important;
  padding: var(--space-6) var(--space-8) !important;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
}

.modal-header h2 {
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-2xl) !important;
  color: var(--color-text-inverse) !important;
}

.modal-body {
  padding: var(--space-8) !important;
  color: var(--color-text-primary) !important;
}

/* Search Input Enhancement */
.search-input {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-3) var(--space-5) !important;
  font-size: var(--text-sm) !important;
  backdrop-filter: blur(10px) !important;
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Status Badges - Warm Colors */
.status-badge {
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.status-interested {
  background: var(--color-tertiary-light) !important;
  color: var(--color-tertiary-dark) !important;
}

.status-applied {
  background: var(--color-secondary-light) !important;
  color: var(--color-secondary-dark) !important;
}

.status-interviewing {
  background: var(--color-warning-light) !important;
  color: var(--color-warning) !important;
}

.status-offered {
  background: var(--color-success-light) !important;
  color: var(--color-success) !important;
}

.status-rejected {
  background: var(--color-error-light) !important;
  color: var(--color-error) !important;
}

/* Settings Button */
.btn-settings {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--radius-full) !important;
  backdrop-filter: blur(10px) !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--transition-base) !important;
}

.btn-settings:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: rotate(90deg) scale(1.05) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Link Buttons */
.btn-link {
  color: var(--color-primary) !important;
  font-weight: var(--weight-semibold) !important;
  transition: all var(--transition-base) !important;
}

.btn-link:hover {
  color: var(--color-primary-dark) !important;
}

/* Small Buttons */
.btn-small {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  border: none !important;
  transition: all var(--transition-base) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-small:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Calendar Enhancements */
.calendar-card {
  background: var(--color-surface) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--color-border-light) !important;
}

.calendar-day {
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
}

.calendar-day:hover {
  background: var(--color-background) !important;
  transform: scale(1.05) !important;
}

.calendar-day.today {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  color: var(--color-text-inverse) !important;
  font-weight: var(--weight-bold) !important;
}

/* Agenda Items */
.agenda-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-4) !important;
  transition: all var(--transition-base) !important;
  box-shadow: var(--shadow-sm) !important;
}

.agenda-item:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateX(4px) !important;
  border-color: var(--color-primary-light) !important;
}

/* Toast Notifications */
.toast {
  background: var(--color-surface) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--color-border-light) !important;
  padding: var(--space-4) var(--space-5) !important;
}

.toast.success {
  border-left: 4px solid var(--color-success) !important;
}

.toast.error {
  border-left: 4px solid var(--color-error) !important;
}

.toast.warning {
  border-left: 4px solid var(--color-warning) !important;
}

.toast.info {
  border-left: 4px solid var(--color-info) !important;
}

/* Floating Action Buttons */
.btn-floating-quick-add {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-dark) 100%) !important;
  box-shadow: var(--shadow-xl), 0 8px 24px rgba(var(--color-primary-rgb), 0.4) !important;
  border-radius: var(--radius-full) !important;
  width: 64px !important;
  height: 64px !important;
  transition: all var(--transition-base) !important;
}

.btn-floating-quick-add:hover {
  transform: translateY(-6px) scale(1.08) !important;
  box-shadow: var(--shadow-2xl), 0 12px 32px rgba(var(--color-primary-rgb), 0.5) !important;
}

/* AI Button Enhancements */
.btn-ai {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%) !important;
  color: var(--color-text-inverse) !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-lg) !important;
  font-weight: var(--weight-semibold) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-base) !important;
}

.btn-ai:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Stats Dashboard */
.stat-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-5) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
}

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

/* Dark Mode Toggle */
.btn-dark-mode {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) var(--space-3) !important;
  backdrop-filter: blur(10px) !important;
  transition: all var(--transition-base) !important;
}

.btn-dark-mode:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.05) !important;
}

/* Form Actions */
.form-actions {
  display: flex !important;
  gap: var(--space-3) !important;
  margin-top: var(--space-6) !important;
}

/* Help Text */
.help-text {
  color: var(--color-text-tertiary) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-relaxed) !important;
  margin-top: var(--space-2) !important;
}

/* Section Headings */
h2, h3, h4 {
  color: var(--color-text-primary) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: -0.01em !important;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth !important;
}

/* Focus States for Accessibility */
*:focus-visible {
  outline: 3px solid rgba(var(--color-primary-rgb), 0.4) !important;
  outline-offset: 2px !important;
}

/* Loading Skeleton Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg,
    var(--color-border-light) 0%,
    var(--color-background) 50%,
    var(--color-border-light) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Fade In Animation for Dynamic Content */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-out;
}

/* Card Hover Glow Effect */
@keyframes glow {
  0%, 100% {
    box-shadow: var(--shadow-md);
  }
  50% {
    box-shadow: var(--shadow-lg), 0 0 20px rgba(var(--color-primary-rgb), 0.2);
  }
}

.card-glow:hover {
  animation: glow 2s infinite;
}

/* Responsive Typography */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  header h1 {
    font-size: var(--text-3xl) !important;
  }
}

/* ============================================
   COMPREHENSIVE DARK MODE - Standard Dark Mode
   ============================================ */

body.dark-mode {
  background: #0f0f0f !important;
}

/* All Cards and Surfaces */
body.dark-mode .kanban-card,
body.dark-mode .form-card,
body.dark-mode .modal-content,
body.dark-mode .stat-card,
body.dark-mode .calendar-card,
body.dark-mode .agenda-item,
body.dark-mode .event-card,
body.dark-mode .job-card,
body.dark-mode .filters-bar,
body.dark-mode .settings-content,
body.dark-mode .settings-tab {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
}

/* Settings Navigation (Sidebar) */
body.dark-mode .settings-nav {
  background: #141414 !important;
  border-right-color: #2a2a2a !important;
}

body.dark-mode .settings-nav-item {
  color: #a1a1aa !important;
}

body.dark-mode .settings-nav-item:hover {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
}

body.dark-mode .settings-nav-item.active {
  background: #1a1a1a !important;
  color: var(--color-primary-light) !important;
  border-left-color: var(--color-primary) !important;
}

/* Text Colors in Dark Mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #e4e4e7 !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
  color: #e4e4e7;
}

body.dark-mode .help-text,
body.dark-mode small {
  color: #a1a1aa !important;
}

body.dark-mode label {
  color: #a1a1aa !important;
}

/* Form Inputs in Dark Mode */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #e4e4e7 !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(212, 165, 154, 0.15) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #71717a !important;
}

/* Kanban Column Backgrounds */
body.dark-mode .kanban-column {
  background: #141414 !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .kanban-cards {
  background: transparent !important;
}

/* Column Headers */
body.dark-mode .kanban-header,
body.dark-mode .column-header {
  opacity: 0.9;
}

/* Modal Header in Dark Mode */
body.dark-mode .modal-header {
  background: linear-gradient(135deg, rgba(148, 112, 100, 0.9) 0%, rgba(160, 123, 108, 0.9) 100%) !important;
}

/* Calendar in Dark Mode */
body.dark-mode .calendar-day {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .calendar-day:hover {
  background: #262626 !important;
}

body.dark-mode .calendar-day.today {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  color: white !important;
}

/* Status Badges in Dark Mode */
body.dark-mode .status-badge {
  opacity: 0.9;
}

/* Buttons in Dark Mode */
body.dark-mode .btn-secondary {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #e4e4e7 !important;
}

body.dark-mode .btn-secondary:hover {
  background: #262626 !important;
  border-color: var(--color-primary) !important;
}

/* Search in Dark Mode */
body.dark-mode .search-input {
  background: rgba(26, 26, 26, 0.9) !important;
  border-color: #2a2a2a !important;
  color: #e4e4e7 !important;
}

body.dark-mode .search-results {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .search-result-item {
  color: #e4e4e7 !important;
}

body.dark-mode .search-result-item:hover {
  background: #141414 !important;
}

/* Toast Notifications in Dark Mode */
body.dark-mode .toast {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #e4e4e7 !important;
}

/* Drop Zones in Dark Mode */
body.dark-mode .file-drop-zone,
body.dark-mode .drop-zone {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .drop-zone-title,
body.dark-mode .drop-zone-subtitle {
  color: #a1a1aa !important;
}

/* AI Assistant in Dark Mode */
body.dark-mode .ai-result-container,
body.dark-mode .ai-result-content {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #e4e4e7 !important;
}

/* Stats Dashboard in Dark Mode */
body.dark-mode .stat-card {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .stat-value {
  color: #e4e4e7 !important;
}

body.dark-mode .stat-label {
  color: #a1a1aa !important;
}

/* Upcoming Events in Dark Mode */
body.dark-mode .upcoming-events,
body.dark-mode .upcoming-item {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #e4e4e7 !important;
}

/* Timeline in Dark Mode */
body.dark-mode .timeline-list,
body.dark-mode .timeline-divider {
  color: #a1a1aa !important;
}

/* Timeline Component Dark Mode */
body.dark-mode .timeline-item {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
  border-left-color: var(--color-primary) !important;
}

body.dark-mode .timeline-item:hover {
  background: #262626 !important;
}

body.dark-mode .timeline-item.overdue {
  background: #1f1a1a !important;
  border-left-color: var(--color-error) !important;
}

body.dark-mode .timeline-item.completed {
  opacity: 0.6;
  border-left-color: var(--color-success) !important;
}

body.dark-mode .timeline-icon {
  background: #262626 !important;
  color: #e4e4e7 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .timeline-item-title,
body.dark-mode .timeline-item-content {
  color: #e4e4e7 !important;
}

body.dark-mode .timeline-item-meta {
  color: #a1a1aa !important;
}

/* Additional Component Dark Mode Fixes */
body.dark-mode .search-results,
body.dark-mode .card,
body.dark-mode .search-result-item,
body.dark-mode .calendar-card,
body.dark-mode .upcoming-event-card,
body.dark-mode .job-details-modal,
body.dark-mode .interview-form,
body.dark-mode .agenda-item-card,
body.dark-mode .reminder-card,
body.dark-mode .export-modal,
body.dark-mode .import-drop-zone,
body.dark-mode .settings-panel,
body.dark-mode .help-tooltip,
body.dark-mode .notification-badge,
body.dark-mode .filters-dropdown,
body.dark-mode .sort-menu,
body.dark-mode .context-menu {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .search-result-item:hover,
body.dark-mode .card:hover {
  background: #262626 !important;
}

/* Calendar Section Dark Mode */
body.dark-mode .actions-column,
body.dark-mode .calendar-section,
body.dark-mode .upcoming-events,
body.dark-mode .upcoming-events-section,
body.dark-mode .upcoming-events-compact {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .calendar-section h3,
body.dark-mode .upcoming-events h3,
body.dark-mode .upcoming-events-section h4 {
  color: #e4e4e7 !important;
}

body.dark-mode .upcoming-event-card,
body.dark-mode .event-item {
  background: #262626 !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .upcoming-event-card:hover,
body.dark-mode .event-item:hover {
  background: #303030 !important;
}

/* View Toggle Buttons Dark Mode */
body.dark-mode .view-toggle {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .view-toggle-btn {
  color: #a1a1aa !important;
}

body.dark-mode .view-toggle-btn:hover {
  background: #262626 !important;
  color: #e4e4e7 !important;
}

body.dark-mode .view-toggle-btn.active {
  background: linear-gradient(135deg, #9DB8CD 0%, #D09B8D 100%) !important;
  color: white !important;
}

/* Timeline View - match main background */
body:not(.dark-mode) .timeline-view {
  background: #E8E6E3 !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .timeline-view {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .timeline-filters {
  border-bottom-color: #2a2a2a !important;
}

body.dark-mode .filter-group label {
  color: #e4e4e7 !important;
}

body.dark-mode .filter-group select {
  background: #262626 !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
}

body.dark-mode .filter-group select:focus {
  border-color: #9DB8CD !important;
}

/* Modal and Job Details Dark Mode */
body.dark-mode .modal-content {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
}

body.dark-mode .modal-body {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
}

body.dark-mode .modal-body h3,
body.dark-mode .modal-body h4,
body.dark-mode .job-details-header h2,
body.dark-mode .job-details-header h3,
body.dark-mode .job-details-section h4 {
  color: #e4e4e7 !important;
}

body.dark-mode .job-details-header {
  border-bottom-color: #2a2a2a !important;
}

body.dark-mode .job-details-section {
  color: #e4e4e7 !important;
}

body.dark-mode .job-details-section h4 {
  border-bottom-color: #2a2a2a !important;
}

body.dark-mode .job-details-section p {
  color: #d4d4d8 !important;
}

body.dark-mode .job-details-actions {
  border-top-color: #2a2a2a !important;
}

body.dark-mode .help-text {
  color: #a1a1aa !important;
}

/* CV Match Section Dark Mode */
body.dark-mode .cv-match {
  background: #262626 !important;
  color: #e4e4e7 !important;
  border-left-color: #9DB8CD !important;
}

body.dark-mode .match-category h5 {
  color: #e4e4e7 !important;
}

body.dark-mode .match-category ul,
body.dark-mode .match-category li {
  color: #d4d4d8 !important;
}

/* Form Elements in Modal Dark Mode */
body.dark-mode #cv-text,
body.dark-mode textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="url"],
body.dark-mode input[type="email"],
body.dark-mode input[type="date"],
body.dark-mode select {
  background: #262626 !important;
  color: #e4e4e7 !important;
  border-color: #2a2a2a !important;
}

body.dark-mode #cv-text:focus,
body.dark-mode textarea:focus,
body.dark-mode input:focus,
body.dark-mode select:focus {
  border-color: #9DB8CD !important;
}

body.dark-mode .cv-status {
  color: #e4e4e7 !important;
}

/* Fix any remaining white backgrounds */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color: #fff"] {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
}

/* ===== LIGHT MODE IMPROVEMENTS ===== */

/* Darker background for light mode */
body:not(.dark-mode) {
  background: #E8E6E3 !important;
}

/* All text black in light mode */
body:not(.dark-mode),
body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) h6,
body:not(.dark-mode) p,
body:not(.dark-mode) span:not(.sidebar-brand-text):not(.sidebar-user-name):not(.sidebar-user-tier),
body:not(.dark-mode) div,
body:not(.dark-mode) label,
body:not(.dark-mode) .stat-label,
body:not(.dark-mode) .job-title,
body:not(.dark-mode) .company-name,
body:not(.dark-mode) .status-badge,
body:not(.dark-mode) .count-badge,
body:not(.dark-mode) .timeline-item,
body:not(.dark-mode) .kanban-card,
body:not(.dark-mode) .modal-body,
body:not(.dark-mode) .job-details-section,
body:not(.dark-mode) .help-text {
  color: #000000 !important;
}

/* Remove ALL yellow/bright highlight marks - match to background */
body:not(.dark-mode) mark,
body:not(.dark-mode) .highlight,
body:not(.dark-mode) .marker,
body:not(.dark-mode) .badge.new,
body:not(.dark-mode) .indicator,
body:not(.dark-mode) [style*="background: yellow"],
body:not(.dark-mode) [style*="background-color: yellow"],
body:not(.dark-mode) [style*="background: #ff"],
body:not(.dark-mode) [style*="background: #FFF"],
body:not(.dark-mode) [style*="color: yellow"] {
  background: transparent !important;
  color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: none !important;
}

/* Hide any emoji or icon that might be yellow */
body:not(.dark-mode) .filter-btn::before,
body:not(.dark-mode) .filter-btn::after,
body:not(.dark-mode) .calendar-section::before,
body:not(.dark-mode) .calendar-section::after {
  display: none !important;
}

/* Ensure kanban columns have darker background */
body:not(.dark-mode) .kanban-column {
  background: #F0EEEB !important;
}

/* Kanban cards - match main background color */
body:not(.dark-mode) .kanban-card {
  background: #E8E6E3 !important;
  color: #000000 !important;
  backdrop-filter: none !important;
  border: none !important;
  border-left: 4px solid #9DB8CD !important;
}

/* Remove gradient overlay on cards */
body:not(.dark-mode) .kanban-card::after {
  display: none !important;
}

/* Subtle hover state */
body:not(.dark-mode) .kanban-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
  background: #E8E6E3 !important;
}

/* Timeline items - match main background color */
body:not(.dark-mode) .timeline-item {
  background: #E8E6E3 !important;
  color: #000000 !important;
  border-left: 4px solid #9DB8CD !important;
}

body:not(.dark-mode) .timeline-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark-mode) .timeline-item.overdue {
  background: #E8E6E3 !important;
  border-left-color: #D9A09A !important;
}

body:not(.dark-mode) .timeline-item.completed {
  background: #E8E6E3 !important;
  border-left-color: #A8C89A !important;
  opacity: 0.8 !important;
}

/* Modal - match main background color */
body:not(.dark-mode) .modal-content {
  background: #E8E6E3 !important;
  color: #000000 !important;
}

body:not(.dark-mode) .form-card {
  background: #E8E6E3 !important;
  color: #000000 !important;
}

/* CV Match Analysis - match main background color */
body:not(.dark-mode) .cv-match {
  background: #E8E6E3 !important;
  border-left: 4px solid #9DB8CD !important;
}

/* Notes Section - match main background color */
body:not(.dark-mode) .notes-section {
  background: #E8E6E3 !important;
  border-left: 4px solid #E8C48A !important;
}

/* AI Assistant Section - match main background color */
body:not(.dark-mode) .ai-assistant-section {
  background: #E8E6E3 !important;
  border-left: 4px solid #9DB8CD !important;
}

/* Kanban column headers - softer, more subtle */
body:not(.dark-mode) .kanban-header {
  background: rgba(157, 184, 205, 0.15) !important;
  color: #000000 !important;
  border: none !important;
}

body:not(.dark-mode) .kanban-column[data-status="interested"] .kanban-header {
  background: rgba(197, 217, 224, 0.2) !important;
}

body:not(.dark-mode) .kanban-column[data-status="applied"] .kanban-header {
  background: rgba(212, 165, 154, 0.2) !important;
}

body:not(.dark-mode) .kanban-column[data-status="interviewing"] .kanban-header {
  background: rgba(232, 196, 138, 0.2) !important;
}

body:not(.dark-mode) .kanban-column[data-status="offer"] .kanban-header {
  background: rgba(168, 200, 154, 0.2) !important;
}

body:not(.dark-mode) .kanban-column[data-status="rejected"] .kanban-header {
  background: rgba(217, 160, 154, 0.2) !important;
}

/* ===== BORDERLESS, SMOOTH DESIGN - NO BOXES ===== */

/* Remove all borders and backgrounds from stat cards */
body:not(.dark-mode) .stat-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
}

/* Match calendar section to main background */
body:not(.dark-mode) .calendar-section,
body:not(.dark-mode) .actions-column,
body:not(.dark-mode) .upcoming-events,
body:not(.dark-mode) .upcoming-events-section {
  background: #E8E6E3 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove UPCOMING section box */
body:not(.dark-mode) .upcoming-events-compact {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove borders from filter tabs */
body:not(.dark-mode) .filter-btn,
body:not(.dark-mode) .status-filter {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
}

body:not(.dark-mode) .filter-btn.active,
body:not(.dark-mode) .status-filter.active {
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
}

body:not(.dark-mode) .filter-btn:hover,
body:not(.dark-mode) .status-filter:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important;
}

/* Make drop zone minimal but functional - ONLY outer container */
body:not(.dark-mode) .drop-zone,
body:not(.dark-mode) .file-drop-zone {
  border: 2px dashed rgba(0, 0, 0, 0.15) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  padding: 32px !important;
}

/* Remove border from inner content */
body:not(.dark-mode) .drop-zone-content {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure URL input is visible and functional */
body:not(.dark-mode) .url-input,
body:not(.dark-mode) #job-url-input {
  background: #FFFFFF !important;
  border: 2px solid rgba(0, 0, 0, 0.15) !important;
  color: #000000 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body:not(.dark-mode) .url-input:focus,
body:not(.dark-mode) #job-url-input:focus {
  border-color: #9DB8CD !important;
  box-shadow: 0 0 0 4px rgba(157, 184, 205, 0.1) !important;
}

/* Show clearer border on drag hover */
body:not(.dark-mode) .drop-zone.drag-over,
body:not(.dark-mode) .file-drop-zone.drag-over,
body:not(.dark-mode) .drop-zone:hover,
body:not(.dark-mode) .file-drop-zone:hover {
  border-color: rgba(0, 0, 0, 0.3) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Remove Board/Timeline button boxes */
body:not(.dark-mode) .view-toggle,
body:not(.dark-mode) .view-buttons {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body:not(.dark-mode) .view-toggle-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  border: none !important;
}

body:not(.dark-mode) .view-toggle-btn.active {
  background: rgba(0, 0, 0, 0.12) !important;
}

body:not(.dark-mode) .view-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.10) !important;
}

/* Remove search box borders */
body:not(.dark-mode) .search-container,
body:not(.dark-mode) .search-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Make sort section match main background */
body:not(.dark-mode) .sort-section,
body:not(.dark-mode) .filters-section,
body:not(.dark-mode) .filters-bar {
  background: #E8E6E3 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure ALL white containers match background */
body:not(.dark-mode) [style*="background: white"]:not(.kanban-card):not(.modal-content),
body:not(.dark-mode) [style*="background: #fff"]:not(.kanban-card):not(.modal-content),
body:not(.dark-mode) [style*="background: #FFF"]:not(.kanban-card):not(.modal-content),
body:not(.dark-mode) [style*="background-color: white"]:not(.kanban-card):not(.modal-content),
body:not(.dark-mode) [style*="background-color: #fff"]:not(.kanban-card):not(.modal-content) {
  background: #E8E6E3 !important;
}

/* ===== MODERN LAYOUT IMPROVEMENTS ===== */

/* Header spacing and alignment */
header {
  padding: 24px 0 !important;
  margin-bottom: 32px !important;
}

/* Main layout optimization */
.main-layout {
  gap: 32px !important;
  padding: 0 !important;
}

/* Jobs section spacing */
.jobs-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Filter bar modern layout */
.filters-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 16px 0 !important;
  margin-bottom: 24px !important;
}

.filters-section {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Drop zone modern spacing */
.drop-zone {
  margin: 32px 0 !important;
}

/* Kanban board improved layout */
.kanban-board {
  gap: 16px !important;
  margin-top: 24px !important;
}

/* Calendar section modern layout */
.actions-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.calendar-section {
  padding: 0 !important;
}

/* Board/Timeline toggle modern positioning */
.view-toggle {
  margin-bottom: 24px !important;
  gap: 4px !important;
}

/* Improved container spacing */
.container {
  padding: 24px 32px !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
}

/* Sort section alignment */
.sort-section {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Modal modern spacing */
.modal-content {
  padding: 0 !important;
}

.modal-body {
  padding: 32px !important;
}

/* Form improvements */
.form-group {
  margin-bottom: 24px !important;
}

/* ===== SMOOTH, MINIMAL DESIGN - REDUCE BOXES ===== */

/* Remove excessive borders from cards */
.kanban-card,
.card,
.form-card,
.stat-card,
.calendar-card,
.upcoming-event-card,
.agenda-item-card,
.reminder-card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
}

.kanban-card:hover,
.card:hover,
.upcoming-event-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* Smooth modal borders */
.modal-content {
  border: none !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.modal-header {
  border-radius: 24px 24px 0 0 !important;
}

/* Remove section divider lines - use spacing instead */
.job-details-header,
.timeline-filters,
.job-details-actions {
  border-bottom: none !important;
  border-top: none !important;
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
}

.job-details-section h4 {
  border-bottom: none !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

/* Smooth stat cards */
.stat-card {
  border-radius: 20px !important;
}

/* Smooth search and input fields */
.search-box,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="date"],
textarea,
select {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.search-box:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(157, 184, 205, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(157, 184, 205, 0.1) !important;
  outline: none !important;
}

/* Smooth buttons */
.btn,
.btn-primary,
.btn-secondary,
button {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.btn:hover,
button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Smooth kanban columns */
.kanban-column {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.kanban-header {
  border-radius: 16px 16px 0 0 !important;
}

/* Smooth timeline items */
.timeline-item {
  border: none !important;
  border-left: 4px solid var(--color-primary) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.timeline-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Smooth view toggle */
.view-toggle {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.view-toggle-btn {
  border-radius: 10px !important;
}

/* Smooth CV match section */
.cv-match {
  border: none !important;
  border-left: 4px solid #9DB8CD !important;
  border-radius: 12px !important;
}

/* Smooth status badges */
.status-badge,
.count-badge {
  border: none !important;
  border-radius: 8px !important;
}

/* Remove container borders */
.container {
  border: none !important;
}

/* Smooth calendar section */
.actions-column,
.calendar-section {
  border: none !important;
  border-radius: 20px !important;
}

/* Dark mode adjustments for smooth design */
body.dark-mode .kanban-card,
body.dark-mode .card,
body.dark-mode .form-card,
body.dark-mode .modal-content {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .search-box,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .search-box:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: rgba(157, 184, 205, 0.3) !important;
  box-shadow: 0 0 0 4px rgba(157, 184, 205, 0.15) !important;
}

/* ========================================
   COMPREHENSIVE BACKGROUND AUDIT
   All white/light backgrounds → #E8E6E3
   Exception: Content cards stay white
   ======================================== */

/* Search Results Dropdown - match main background */
body:not(.dark-mode) .search-results {
  background: #E8E6E3 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body:not(.dark-mode) .search-result-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Form Cards - blend into background (NOT content cards) */
body:not(.dark-mode) .form-card {
  background: #E8E6E3 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Drop Zone - already handled but reinforcing */
body:not(.dark-mode) .drop-zone {
  background: transparent !important;
  border: 2px dashed rgba(0, 0, 0, 0.15) !important;
}

body:not(.dark-mode) .drop-zone.drag-over {
  background: rgba(157, 184, 205, 0.1) !important;
  border-color: #9DB8CD !important;
}

/* Kanban Column Background - blend into main */
body:not(.dark-mode) .kanban-column {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Calendar Day Cells - match main background */
body:not(.dark-mode) .calendar-day {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body:not(.dark-mode) .calendar-day:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(157, 184, 205, 0.3) !important;
}

body:not(.dark-mode) .calendar-day.other-month {
  background: transparent !important;
  opacity: 0.5 !important;
}

/* Calendar Popup Grid Days */
body:not(.dark-mode) .calendar-popup-grid .calendar-day {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body:not(.dark-mode) .calendar-popup-grid .calendar-day:hover {
  background: rgba(157, 184, 205, 0.15) !important;
}

/* Agenda Calendar Widget - blend into background */
body:not(.dark-mode) .agenda-calendar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Meta Tags - blend into background */
body:not(.dark-mode) .meta-tag {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Job Summary Boxes - blend into background */
body:not(.dark-mode) .job-summary {
  background: rgba(157, 184, 205, 0.1) !important;
  border-left: 4px solid #9DB8CD !important;
}

/* Status Badge Backgrounds - keep muted but adjust for main bg */
body:not(.dark-mode) .status-applied {
  background: rgba(211, 155, 141, 0.25) !important;
}

body:not(.dark-mode) .status-screening,
body:not(.dark-mode) .status-onsite {
  background: rgba(212, 165, 116, 0.25) !important;
}

body:not(.dark-mode) .status-interviewing,
body:not(.dark-mode) .status-technical {
  background: rgba(229, 193, 133, 0.25) !important;
}

body:not(.dark-mode) .status-rejected,
body:not(.dark-mode) .status-cancelled {
  background: rgba(217, 160, 154, 0.25) !important;
}

body:not(.dark-mode) .status-inbound,
body:not(.dark-mode) .status-video {
  background: rgba(157, 184, 205, 0.25) !important;
}

/* Upcoming Events Compact - blend into background */
body:not(.dark-mode) .upcoming-events-compact {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Event Cards - match main background color */
body:not(.dark-mode) .event-card {
  background: #E8E6E3 !important;
  border-left: 4px solid #9DB8CD !important;
}

/* Calendar Nav Hover - subtle */
body:not(.dark-mode) .calendar-nav:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Reminder Cards - match main background color */
body:not(.dark-mode) .reminder-card,
body:not(.dark-mode) .reminder-item {
  background: #E8E6E3 !important;
  border-left: 4px solid #E8C48A !important;
}

/* Settings Panel - blend into background */
body:not(.dark-mode) .settings-panel,
body:not(.dark-mode) .settings-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Side Panel - blend into background */
body:not(.dark-mode) .side-panel {
  background: #E8E6E3 !important;
  border: none !important;
}

/* Tooltips - match main background color */
body:not(.dark-mode) .tooltip {
  background: #E8E6E3 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Empty State - blend into background */
body:not(.dark-mode) .empty-state {
  background: transparent !important;
}

/* All light gray backgrounds → main background */
body:not(.dark-mode) [style*="background: #f8f9fa"],
body:not(.dark-mode) [style*="background: #f5f7fa"],
body:not(.dark-mode) [style*="background: #f8f9ff"],
body:not(.dark-mode) [style*="background: #f3e5f5"],
body:not(.dark-mode) [style*="background: #fff3e0"],
body:not(.dark-mode) [style*="background: #fff9c4"],
body:not(.dark-mode) [style*="background: #ffcdd2"],
body:not(.dark-mode) [style*="background: #f0f0f0"],
body:not(.dark-mode) [style*="background: #fafafa"],
body:not(.dark-mode) [style*="background: #fff4e6"],
body:not(.dark-mode) [style*="background: #ffe8cc"],
body:not(.dark-mode) [style*="background: #f5f5f5"],
body:not(.dark-mode) [style*="background: #fff5f5"],
body:not(.dark-mode) [style*="background: #f5f5f7"],
body:not(.dark-mode) [style*="background: #f9fafb"],
body:not(.dark-mode) [style*="background: #f5f7ff"],
body:not(.dark-mode) [style*="background: #fef2f2"] {
  background: #E8E6E3 !important;
}

/* Navigation backgrounds - blend */
body:not(.dark-mode) nav,
body:not(.dark-mode) .nav-container {
  background: transparent !important;
}

/* Agenda items - blend into background */
body:not(.dark-mode) .agenda-item {
  background: transparent !important;
  border-left: 4px solid #9DB8CD !important;
  padding-left: 16px !important;
}

/* Filter result info - blend */
body:not(.dark-mode) .filter-result-info,
body:not(.dark-mode) .search-info {
  background: transparent !important;
}

/* Help panel - blend */
body:not(.dark-mode) .help-panel,
body:not(.dark-mode) .help-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Stats that were removed but may have remnants */
body:not(.dark-mode) .stat-card,
body:not(.dark-mode) .stats-dashboard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Import/Export panels - blend */
body:not(.dark-mode) .import-panel,
body:not(.dark-mode) .export-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Print Styles */
@media print {
  header {
    background: white !important;
    color: black !important;
  }

  .btn-floating-quick-add,
  .btn-floating-help,
  .btn-settings {
    display: none !important;
  }
}

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */

.language-switcher {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.language-select {
  background: var(--color-surface, #FFFFFF) !important;
  border: 1px solid var(--color-border-light, #D1C9BF) !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 0.5rem 1rem !important;
  font-size: var(--text-sm, 14px) !important;
  font-weight: var(--weight-medium, 500) !important;
  color: var(--color-text-primary, #1A1814) !important;
  cursor: pointer !important;
  transition: all var(--transition-base, 0.2s ease) !important;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
  outline: none !important;
  min-width: 150px !important;
}

.language-select:hover {
  border-color: var(--color-primary, #9DB8CD) !important;
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1)) !important;
}

.language-select:focus {
  border-color: var(--color-primary, #9DB8CD) !important;
  box-shadow: 0 0 0 3px rgba(157, 184, 205, 0.2) !important;
}

.language-select option {
  padding: 0.5rem !important;
  font-size: var(--text-sm, 14px) !important;
}

/* Dark mode support */
body.dark-mode .language-select {
  background: var(--color-surface-dark, #2A2621) !important;
  border-color: var(--color-border-dark, #3D3731) !important;
  color: var(--color-text-primary-dark, #E8E6E3) !important;
}

body.dark-mode .language-select:hover {
  border-color: var(--color-primary-dark, #B8CDDE) !important;
}

body.dark-mode .language-select:focus {
  box-shadow: 0 0 0 3px rgba(184, 205, 222, 0.2) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .language-switcher {
    margin-left: 0.5rem;
  }

  .language-select {
    min-width: 120px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .language-select {
    min-width: 100px !important;
    font-size: 12px !important;
  }
}