/* ==========================================
   CAREERFLOW MOBILE-FIRST CSS v1.0
   Agent 2: CSS Modernization Specialist
   ========================================== */

/* ==========================================
   MOBILE CSS VARIABLES & TOKENS
   ========================================== */
:root {
  /* Mobile Breakpoints */
  --breakpoint-mobile-sm: 320px;
  --breakpoint-mobile-md: 375px;
  --breakpoint-mobile-lg: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 769px;

  /* Touch Targets */
  --touch-target-min: 44px;
  --touch-target-preferred: 48px;

  /* Mobile Z-Index Scale (Push Navigation Hierarchy) */
  --z-mobile-sidebar: 1998;          /* Below pushed content */
  --z-mobile-sidebar-backdrop: 1997; /* Below sidebar (unused in push nav) */
  --z-mobile-header: 2000;           /* Above sidebar when pushed */
  --z-mobile-bottom-nav: 2000;       /* Above sidebar when pushed */
  --z-bottom-sheet: 2001;            /* Above all mobile UI */
  --z-bottom-sheet-backdrop: 2000;   /* Same as header/nav */
  --z-toast: 3000;                   /* Topmost layer */

  /* Mobile Transitions (Optimized for 60fps smooth animations) */
  --transition-mobile-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-mobile-base: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Push navigation */
  --transition-mobile-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Safe Area Insets (iOS) */
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
}

/* ==========================================
   BASE MOBILE STYLES (320px+)
   ========================================== */

/* Mobile Body Adjustments */
@media (max-width: 768px) {
  body {
    padding-top: calc(16px + var(--safe-area-top));
    padding-bottom: var(--safe-area-bottom);
    overflow-x: hidden;
  }

  /* Prevent iOS auto-zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* Critical: prevents iOS zoom */
  }
}

/* ==========================================
   CLAUDE-STYLE MOBILE HEADER (Minimal)
   Clean, edge-to-edge design like Claude.ai
   ========================================== */

/* Main container - invisible wrapper, children handle their own positioning */
.mobile-header-claude {
  display: contents; /* Let children position themselves */
}

/* Thin vertical icon strip on left edge */
.mobile-icon-strip {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 100vh;
  height: 100dvh;
  padding-top: calc(16px + var(--safe-area-top, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2500;
  background: transparent;
  pointer-events: none; /* Let clicks through except on buttons */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Panel toggle button - Claude style */
.mobile-panel-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  cursor: pointer;
  color: #71717a;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto; /* Make clickable */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mobile-panel-toggle:active {
  transform: scale(0.92);
  background: rgba(240, 240, 240, 0.98);
}

.mobile-panel-toggle svg {
  width: 20px;
  height: 20px;
}

/* When sidebar is open, rotate icon slightly */
.sidebar.mobile-open ~ .mobile-header-claude .mobile-panel-toggle,
body.sidebar-mobile-open .mobile-panel-toggle {
  color: var(--color-primary, #d4735e);
  background: rgba(212, 115, 94, 0.1);
  border-color: rgba(212, 115, 94, 0.2);
}

/* Subtle vertical divider line */
.mobile-strip-divider {
  width: 1px;
  flex: 1;
  max-height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.04) 50%,
    transparent 100%
  );
  margin-top: 8px;
  pointer-events: none;
}

/* Floating AI button (top right) */
.mobile-ai-fab {
  position: fixed;
  top: calc(16px + var(--safe-area-top, 0px));
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d4735e 0%, #b8513d 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: white;
  z-index: 2500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(212, 115, 94, 0.3);
}

.mobile-ai-fab:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(212, 115, 94, 0.4);
}

.mobile-ai-fab svg {
  width: 18px;
  height: 18px;
}

/* Show Claude-style header on mobile */
@media (max-width: 768px) {
  /* Icon strip and AI fab are visible by default via fixed positioning */
  /* Just need to hide desktop header */
  header {
    display: none !important;
  }

  /* Adjust body padding - no traditional header, just safe area */
  body {
    padding-top: var(--safe-area-top, 0px) !important;
  }

  /* Content layout handled by mobile-layout.css */
}

/* Dark mode support */
body.dark-mode .mobile-panel-toggle {
  background: rgba(39, 39, 42, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

body.dark-mode .mobile-panel-toggle:active {
  background: rgba(50, 50, 55, 0.98);
}

body.dark-mode .mobile-strip-divider {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
}

body.dark-mode .mobile-ai-fab {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* When sidebar is open - hide icon strip, keep AI button visible */
body.sidebar-mobile-open .mobile-icon-strip {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* AI button stays but shifts right when sidebar opens (optional) */
body.sidebar-mobile-open .mobile-ai-fab {
  opacity: 0.3;
  pointer-events: none;
}

/* LEGACY: Hide old mobile header */
.mobile-header {
  display: none !important;
}

/* ==========================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================== */

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(64px + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  background: var(--color-surface, #FDFCFB);
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  display: none;
  justify-content: space-around;
  align-items: stretch;
  z-index: 2000; /* Above sidebar when pushed */
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

.mobile-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  min-width: 64px;
  flex: 1;
  cursor: pointer;
  transition: all var(--transition-mobile-fast);
  background: transparent;
  border: none;
  position: relative;
}

/* Top indicator bar for active state (like desktop sidebar) */
.mobile-bottom-nav__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--color-primary);
  border-radius: 0 0 3px 3px;
  transition: width 0.2s ease;
}

.mobile-bottom-nav__item--active::before {
  width: 32px;
}

.mobile-bottom-nav__item:active {
  background: rgba(212, 115, 94, 0.08);
}

.mobile-bottom-nav__icon {
  width: 24px;
  height: 24px;
  color: #a1a1aa;
  transition: color var(--transition-mobile-fast);
}

.mobile-bottom-nav__label {
  font-size: 11px;
  color: #a1a1aa;
  font-weight: 500;
  transition: color var(--transition-mobile-fast);
  font-family: var(--font-sans);
}

.mobile-bottom-nav__item--active .mobile-bottom-nav__icon {
  color: var(--color-primary);
}

.mobile-bottom-nav__item--active .mobile-bottom-nav__label {
  color: var(--color-primary);
  font-weight: 600;
}

/* Show bottom nav on mobile */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
  }
}

/* Small phones: Hide labels, icons only */
@media (max-width: 480px) {
  .mobile-bottom-nav__label {
    display: none;
  }

  .mobile-bottom-nav {
    height: calc(56px + var(--safe-area-bottom));
  }

  .mobile-bottom-nav__item {
    min-width: 56px;
    min-height: 56px;
  }
}

/* ==========================================
   MOBILE SIDEBAR (Slide-out)
   ========================================== */

.mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  background: #18181b; /* Dark like desktop sidebar */
  transform: translateX(-100%) !important; /* Force off-screen by default */
  transition: transform var(--transition-mobile-base);
  z-index: 1998; /* Below pushed content */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  display: none; /* Hidden on desktop */
  scroll-behavior: smooth;
}

.mobile-sidebar--open {
  transform: translateX(0) !important;
}

.mobile-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-sidebar__title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  font-family: var(--font-sans);
  margin: 0;
}

.mobile-sidebar__close {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 12px;
  transition: all var(--transition-mobile-fast);
  background: transparent;
  border: none;
  color: #a1a1aa;
}

.mobile-sidebar__close:active {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.95);
}

.mobile-sidebar__content {
  padding: 16px;
}

.mobile-sidebar__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-mobile-base), visibility var(--transition-mobile-base);
  z-index: var(--z-mobile-sidebar-backdrop);
  display: none; /* Hidden on desktop */
}

.mobile-sidebar__backdrop--visible {
  opacity: 1;
  visibility: visible;
}

/* ==========================================
   MOBILE SIDEBAR - Claude/ChatGPT Style
   World-Class Implementation
   ========================================== */

@media (max-width: 767px) {
  /* ===========================================
     CORE PRINCIPLE: Sidebar HIDDEN by default
     Content FULL WIDTH
     Hamburger menu to OPEN
     Sidebar OVERLAYS when open
     =========================================== */

  /* SIDEBAR: Hidden off-screen by default */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    height: 100% !important; /* Explicit height for iOS Safari */
    transform: translateX(-100%) !important; /* HIDDEN */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 3000 !important;
    margin-left: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important; /* iPhone notch */
    display: flex !important; /* Flex container for full-height content */
    flex-direction: column !important;
  }

  /* Sidebar content MUST fill remaining height for flex layout to work */
  .sidebar .sidebar-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important; /* Allow flex item to shrink */
    height: calc(100% - env(safe-area-inset-top, 0px)) !important;
  }

  /* Remove header border on mobile - cleaner look */
  .sidebar .sidebar-header {
    border-bottom: none !important;
    padding-top: 0.75rem !important;
    min-height: auto !important;
  }

  /* Hide search field on mobile - URL input is enough */
  .sidebar .sidebar-search {
    display: none !important;
  }

  /* URL input - fit within sidebar, button must not overflow */
  .sidebar .sidebar-url-input {
    margin: 0 0 0.75rem 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 4px !important;
    border-radius: 10px !important;
    background: #1f1f23 !important;
    border: 1px solid #3f3f46 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent button overflow */
  }

  .sidebar .sidebar-url-input__wrapper {
    padding-left: 10px !important;
    flex: 1 !important;
    min-width: 0 !important; /* Allow flex item to shrink below content size */
    overflow: hidden !important;
  }

  .sidebar .sidebar-url-input__field {
    font-size: 14px !important;
    padding: 8px 0 !important;
    min-width: 0 !important;
  }

  .sidebar .sidebar-url-input__btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important; /* Prevent shrinking */
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }

  /* Sidebar top section - tighter spacing */
  .sidebar .sidebar-top {
    padding: 0.75rem 1rem 1rem 1rem !important;
    gap: 0.75rem !important;
  }

  /* SIDEBAR: Visible when open */
  .sidebar.mobile-open {
    transform: translateX(0) !important; /* VISIBLE */
  }

  /* Reset collapsed state on mobile - we use mobile-open instead */
  .sidebar.collapsed {
    width: 280px !important;
    transform: translateX(-100%) !important;
    margin-left: 0 !important;
  }

  .sidebar.collapsed.mobile-open {
    transform: translateX(0) !important;
  }

  /* Show all sidebar content when open (not collapsed view) */
  .sidebar.mobile-open .sidebar-brand,
  .sidebar.mobile-open .sidebar-search,
  .sidebar.mobile-open .sidebar-add-btn span,
  .sidebar.mobile-open .sidebar-nav-item span,
  .sidebar.mobile-open .sidebar-section-header,
  .sidebar.mobile-open .sidebar-user-info,
  .sidebar.mobile-open .sidebar-user-arrow,
  .sidebar.mobile-open .sidebar-login-btn span {
    display: flex !important;
  }

  .sidebar.mobile-open .sidebar-section-header {
    display: block !important;
  }

  /* Reset collapsed styles when mobile-open */
  .sidebar.mobile-open .sidebar-header {
    justify-content: flex-start !important;
    padding: 1.25rem 1rem !important;
  }

  .sidebar.mobile-open .sidebar-toggle {
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  .sidebar.mobile-open .sidebar-top {
    padding: 1.5rem 1rem !important;
    align-items: stretch !important;
  }

  .sidebar.mobile-open .sidebar-add-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.125rem !important;
  }

  .sidebar.mobile-open .sidebar-middle {
    padding: 0.5rem 1rem !important;
    align-items: stretch !important;
  }

  .sidebar.mobile-open .sidebar-nav-item {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0.75rem 1.125rem !important;
    margin: 0 0 0.5rem 0 !important;
    justify-content: flex-start !important;
    /* FIX: Reduce touch sensitivity */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.1s ease, background 0.1s ease !important;
  }

  /* Only show active state after deliberate press */
  .sidebar.mobile-open .sidebar-nav-item:active {
    transform: scale(0.98) !important;
    transition-delay: 0.03s !important;
  }

  /* Sidebar content - proper flex layout for mobile */
  .sidebar.mobile-open .sidebar-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Middle section - scrollable to fit content */
  .sidebar.mobile-open .sidebar-middle {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important; /* Important for flex scroll */
  }

  /* Bottom section - always visible at bottom */
  .sidebar.mobile-open .sidebar-bottom {
    display: block !important; /* FORCE visible */
    flex-shrink: 0 !important;
    padding: 1rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #18181b !important;
    margin-top: auto !important; /* Push to bottom if flex doesn't work */
  }

  /* Sidebar top section must not grow */
  .sidebar.mobile-open .sidebar-top {
    flex-shrink: 0 !important;
  }

  .sidebar.mobile-open .sidebar-user-trigger {
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 0.75rem !important;
    justify-content: flex-start !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
  }

  /* Ensure user menu is visible when logged in */
  .sidebar.mobile-open .sidebar-user-menu {
    width: 100% !important;
  }

  .sidebar.mobile-open .sidebar-user-avatar {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .sidebar.mobile-open .sidebar-user-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .sidebar.mobile-open .sidebar-user-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fafafa !important;
  }

  .sidebar.mobile-open .sidebar-user-tier {
    font-size: 13px !important;
    color: #a1a1aa !important;
  }

  .sidebar.mobile-open .sidebar-login-btn {
    width: 100% !important;
    height: auto !important;
    padding: 0.625rem 1rem !important;
    border-radius: 0.5rem !important;
  }

  /* BACKDROP: Darkens content when sidebar open */
  .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 2999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  /* CLAUDE-STYLE: No traditional header bar */
  /* The mobile-header-claude handles this with floating elements */

  /* Hide old mobile header completely */
  .mobile-header {
    display: none !important;
  }

  /* Hide desktop header on mobile */
  header:not(.mobile-header):not(.mobile-header-claude) {
    display: none !important;
  }

  /* Claude-style header uses display: contents - children position themselves */

  /* CONTENT: Layout handled by mobile-layout.css (CSS Grid centering system)
     No padding hacks needed - floating chrome doesn't affect content flow */

  /* BODY: No traditional header, just safe area spacing */
  body {
    padding-top: calc(16px + var(--safe-area-top, 0px)) !important;
    padding-bottom: var(--safe-area-bottom, 0px) !important;
    overflow-x: hidden !important;
  }

  /* Prevent body scroll when sidebar open */
  body.sidebar-mobile-open {
    overflow: hidden !important;
  }

  /* Hide the old mobile sidebar component */
  .mobile-sidebar {
    display: none !important;
  }

  .mobile-sidebar__backdrop {
    display: none !important;
  }

  /* Hide bottom nav - use hamburger menu instead */
  .mobile-bottom-nav {
    display: none !important;
  }

  /* Hide sidebar toggle arrow on mobile - use hamburger instead */
  .sidebar .sidebar-toggle {
    display: none !important;
  }
}

/* ==========================================
   BOTTOM SHEET MODAL
   ========================================== */

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16);
  transform: translateY(100%);
  transition: transform var(--transition-mobile-base);
  z-index: var(--z-bottom-sheet);
  max-height: 90vh;
  overflow-y: auto;
  padding-bottom: var(--safe-area-bottom);
  display: none;
}

.bottom-sheet--visible {
  transform: translateY(0);
}

.bottom-sheet--expanded {
  height: 90vh;
}

.bottom-sheet__drag-handle {
  width: 40px;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  margin: 12px auto;
}

.bottom-sheet__content {
  padding: 40px 16px 16px 16px; /* Top padding clears drag handle */
}

.bottom-sheet__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-mobile-base), visibility var(--transition-mobile-base);
  z-index: var(--z-bottom-sheet-backdrop);
  display: none;
}

.bottom-sheet__backdrop--visible {
  opacity: 1;
  visibility: visible;
}

/* Enable bottom sheet display on mobile (only when visible class is added) */
@media (max-width: 768px) {
  .bottom-sheet--visible {
    display: block;
  }

  .bottom-sheet__backdrop--visible {
    display: block;
  }
}

/* Desktop: Convert to centered modal */
@media (min-width: 769px) {
  .bottom-sheet {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%) scale(0.9);
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
  }

  .bottom-sheet--visible {
    transform: translate(-50%, -50%) scale(1);
  }

  .bottom-sheet__drag-handle {
    display: none; /* No drag handle on desktop */
  }
}

/* ==========================================
   JOB DETAIL PAGE (Slide from Right)
   ========================================== */

.job-detail-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* Full screen - sidebar is now hidden by default */
  background: var(--bg-primary, #fff);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.job-detail-page--visible {
  transform: translateX(0);
}

.job-detail-page--closing {
  transform: translateX(100%);
}

/* Swipe feedback - moves with finger during swipe */
.job-detail-page--swiping {
  transition: none;
}

.job-detail-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--bg-primary, #fff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  min-height: 56px;
}

.job-detail-page__back,
.job-detail-page__more,
.job-detail-page__minimize {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.2s ease;
}

.job-detail-page__back:active,
.job-detail-page__more:active,
.job-detail-page__minimize:active {
  background: rgba(0, 0, 0, 0.05);
}

.job-detail-page__title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

.job-detail-page__content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Job Detail Sections */
.job-detail-hero {
  text-align: center;
  margin-bottom: 24px;
}

.job-detail-hero__company {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

.job-detail-hero__position {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 12px 0;
  color: var(--text-secondary, #71717a);
}

.job-detail-hero__match {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, var(--color-primary)));
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
}

.job-detail-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.job-detail-actions button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.job-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}

.job-detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.job-detail-info-item__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary, #a1a1aa);
}

.job-detail-info-item__value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.job-detail-section {
  margin-bottom: 24px;
}

.job-detail-section__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text-primary);
}

.job-detail-section__content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #3f3f46);
}

.job-detail-section__list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

.job-detail-section__list li {
  margin-bottom: 4px;
}

/* AI Actions Section */
.job-detail-ai-actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.job-detail-ai-actions__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary, #71717a);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.job-detail-ai-actions .btn-mobile-primary {
  width: 100%;
  margin-bottom: 12px;
}

.job-detail-ai-actions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Dark mode */
body.dark-mode .job-detail-page {
  background: var(--bg-primary, #1a1a1a);
}

body.dark-mode .job-detail-page__header {
  background: var(--bg-primary, #1a1a1a);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .job-detail-info-grid {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .job-detail-ai-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================
   MOBILE ACCORDION SECTIONS
   ========================================== */

.mob-accordion {
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--bg-primary, #E8E6E3);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.mob-accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary, #3C3835);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.mob-accordion__header:active {
  background: rgba(0, 0, 0, 0.03);
}

.mob-accordion__title {
  flex: 1;
}

.mob-accordion__chevron {
  font-size: 14px;
  color: var(--color-text-tertiary, #A39B94);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.mob-accordion--open .mob-accordion__chevron {
  transform: rotate(90deg);
}

.mob-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}

.mob-accordion--open .mob-accordion__body {
  max-height: 2000px;
  padding: 0 16px 14px;
}

/* Accordion accent dots — colored dot before title text */
.mob-accordion__title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  background: var(--color-text-tertiary, #A39B94);
  opacity: 0.4;
  vertical-align: middle;
}

/* Per-section accent dot colors */
.mob-accordion[data-accordion="summary"] .mob-accordion__title::before { background: var(--color-primary, #d4735e); opacity: 0.6; }
.mob-accordion[data-accordion="tech"] .mob-accordion__title::before { background: var(--color-info, #9DB8CD); opacity: 0.7; }
.mob-accordion[data-accordion="reqskills"] .mob-accordion__title::before { background: var(--color-success, #A8C89A); opacity: 0.7; }
.mob-accordion[data-accordion="prefskills"] .mob-accordion__title::before { background: var(--color-success, #A8C89A); opacity: 0.6; }
.mob-accordion[data-accordion="resp"] .mob-accordion__title::before { background: var(--color-primary, #d4735e); opacity: 0.5; }
.mob-accordion[data-accordion="company"] .mob-accordion__title::before { background: var(--color-tertiary, #C5D9E0); opacity: 0.7; }
.mob-accordion[data-accordion="role"] .mob-accordion__title::before { background: var(--color-accent, #E5B5A8); opacity: 0.7; }
.mob-accordion[data-accordion="insights"] .mob-accordion__title::before { background: var(--color-warning, #E8C48A); opacity: 0.7; }
.mob-accordion[data-accordion="cvmatch"] .mob-accordion__title::before { background: var(--color-info, #9DB8CD); opacity: 0.7; }
.mob-accordion[data-accordion="notes"] .mob-accordion__title::before { background: var(--color-warning, #E8C48A); opacity: 0.7; }
.mob-accordion[data-accordion="emails"] .mob-accordion__title::before { background: var(--color-info, #9DB8CD); opacity: 0.6; }

/* Dark mode accordion */
body.dark-mode .mob-accordion {
  background: #1a1a1a;
  border-color: #2a2a2a;
}

body.dark-mode .mob-accordion__header {
  color: #e4e4e7;
}

body.dark-mode .mob-accordion__header:active {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .mob-accordion__chevron {
  color: #71717a;
}

/* Hide on desktop */
@media (min-width: 769px) {
  .job-detail-page {
    display: none !important;
    left: 0; /* Reset for desktop */
  }
}

/* ==========================================
   JOB CARD (Mobile)
   ========================================== */

.job-card-mobile {
  width: 100%;
  background: rgba(232, 230, 227, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  min-height: 120px;
  display: none;

  /* Enhanced micro-interactions */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              opacity 0.3s ease;
  will-change: transform;
  animation: cardSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Lift effect when tapped */
.job-card-mobile:active {
  transform: translateY(-4px) scale(0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Better shadow on hover (for devices with mouse) */
@media (hover: hover) {
  .job-card-mobile:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
}

/* Slide in animation when card appears */
@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Stagger animation for multiple cards - creates cascading effect */
.job-card-mobile:nth-child(1) { animation-delay: 0ms; }
.job-card-mobile:nth-child(2) { animation-delay: 50ms; }
.job-card-mobile:nth-child(3) { animation-delay: 100ms; }
.job-card-mobile:nth-child(4) { animation-delay: 150ms; }
.job-card-mobile:nth-child(5) { animation-delay: 200ms; }
.job-card-mobile:nth-child(6) { animation-delay: 250ms; }
.job-card-mobile:nth-child(7) { animation-delay: 300ms; }
.job-card-mobile:nth-child(8) { animation-delay: 350ms; }
.job-card-mobile:nth-child(9) { animation-delay: 400ms; }
.job-card-mobile:nth-child(10) { animation-delay: 450ms; }

/* Reduced motion support (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .job-card-mobile {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

.job-card-mobile__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.job-card-mobile__company {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  margin: 0;
}

.job-card-mobile__star {
  width: 24px;
  height: 24px;
  min-width: 24px;
  color: #E8C48A;
  cursor: pointer;
  transition: all var(--transition-mobile-fast);
}

.job-card-mobile__star:active {
  transform: scale(0.9);
}

.job-card-mobile__position {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
}

.job-card-mobile__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.job-card-mobile__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-tertiary);
}

.job-card-mobile__meta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.job-card-mobile__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.job-card-mobile__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
}

.job-card-mobile__status--interested {
  background: rgba(232, 196, 138, 0.2);
  color: #C4A564;
}

.job-card-mobile__status--applied {
  background: rgba(157, 184, 205, 0.2);
  color: #7D9CB9;
}

.job-card-mobile__status--interviewing {
  background: rgba(208, 155, 141, 0.2);
  color: #B8877D;
}

.job-card-mobile__status--offer {
  background: rgba(168, 200, 154, 0.2);
  color: #88AA7A;
}

.job-card-mobile__status--rejected {
  background: rgba(217, 160, 154, 0.2);
  color: #C9887E;
}

.job-card-mobile__match {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
}

/* Show mobile job cards on mobile */
@media (max-width: 768px) {
  .job-card-mobile {
    display: block;
  }
}

/* ==========================================
   LOADING SKELETON SCREENS
   ========================================== */

.job-card-skeleton {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  min-height: 120px;
  animation: skeletonFadeIn 0.3s ease;
}

@keyframes skeletonFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.skeleton-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.skeleton-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Base skeleton element with shimmer animation */
.skeleton {
  background: linear-gradient(
    90deg,
    #E8E6E3 0%,
    #F0EEEB 50%,
    #E8E6E3 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Shimmer animation (wave effect) */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Different skeleton shapes */
.skeleton--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton--title {
  height: 20px;
  flex: 1;
  max-width: 180px;
}

.skeleton--subtitle {
  height: 18px;
  width: 100%;
  margin-bottom: 12px;
}

.skeleton--text {
  height: 14px;
  width: 100%;
  margin-bottom: 6px;
}

.skeleton--text.short {
  width: 60%;
}

.skeleton--badge {
  height: 28px;
  width: 100px;
  border-radius: 8px;
}

.skeleton--badge.short {
  width: 70px;
}

/* Dark mode support */
body.dark-mode .skeleton {
  background: linear-gradient(
    90deg,
    #1a1a1a 0%,
    #262626 50%,
    #1a1a1a 100%
  );
  background-size: 200% 100%;
}

body.dark-mode .job-card-skeleton {
  background: rgba(39, 39, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .skeleton-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: #E8E6E3;
  }

  body.dark-mode .skeleton {
    background: #262626;
  }
}

/* ==========================================
   TOUCH-OPTIMIZED BUTTONS & INPUTS
   ========================================== */

/* Primary Button (Mobile) */
.btn-mobile-primary {
  height: var(--touch-target-preferred);
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  width: 100%;
  cursor: pointer;
  transition: all var(--transition-mobile-fast);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-inverse);
  border: none;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
}

.btn-mobile-primary:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-xs);
}

/* Secondary Button (Mobile) */
.btn-mobile-secondary {
  height: var(--touch-target-preferred);
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  width: 100%;
  cursor: pointer;
  transition: all var(--transition-mobile-fast);
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
}

.btn-mobile-secondary:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.05);
}

/* Icon Button (Mobile) */
.icon-btn-mobile {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-mobile-fast);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
}

.icon-btn-mobile:active {
  background: rgba(0, 0, 0, 0.08);
  transform: scale(0.95);
}

/* ==========================================
   NEW MOBILE NAVIGATION STYLES (Terracotta Theme)
   ========================================== */

/* Primary Navigation Button (Vacature Toevoegen) */
/* Primary Action Button (Add Job) - Terracotta gradient like desktop */
.mobile-nav-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1.125rem;
  background: linear-gradient(135deg, #d4735e 0%, #b8513d 100%);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  min-height: 44px;
  margin-bottom: 1rem;
}

.mobile-nav-primary:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 115, 94, 0.4);
}

/* Navigation Items - Clean style matching desktop sidebar */
.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: transparent;
  color: #e4e4e7;
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  min-height: 44px;
  margin-bottom: 0.25rem;
  text-align: left;
  justify-content: flex-start;
}

.mobile-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-nav-item:active {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-item svg {
  flex-shrink: 0;
  color: #d4735e; /* Terracotta icons */
  width: 20px;
  height: 20px;
}

.mobile-nav-item.active {
  background: rgba(212, 115, 94, 0.15);
  color: #ffffff;
}

.mobile-nav-item.active svg {
  color: #d4735e;
}

/* Mobile Submenu (Kanban Status Navigation) */
.mobile-nav-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mobile-nav-parent {
  position: relative;
}

.mobile-nav-arrow {
  margin-left: auto;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.mobile-nav-parent.expanded .mobile-nav-arrow {
  transform: rotate(180deg);
}

.mobile-submenu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0 8px 16px;
  margin-top: 4px;
}

.mobile-submenu.open {
  display: flex;
}

.mobile-submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(63, 63, 70, 0.6); /* Better contrast - darker gray */
  border: none;
  border-radius: 8px;
  color: #fafafa; /* Brighter text */
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
  min-height: 44px;
  margin-bottom: 4px;
}

.mobile-submenu-item:active {
  background: rgba(212, 115, 94, 0.4);
  color: #ffffff;
}

.mobile-submenu-item.active {
  background: rgba(212, 115, 94, 0.35);
  color: #ffffff;
  font-weight: 600;
}

/* ==========================================
   MOBILE USER PROFILE CARD
   ========================================== */

.mobile-user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 16px;
}

.mobile-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 115, 94, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #d4735e;
}

.mobile-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.mobile-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mobile-user-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-user-tier {
  font-size: 0.75rem;
  color: #a1a1aa;
  font-weight: 500;
}

.mobile-user-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #a1a1aa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.mobile-user-menu-btn:active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ==========================================
   FILTERED KANBAN VIEW (Status-specific)
   ========================================== */

.filtered-kanban-view {
  min-height: 100vh;
  background: var(--bg-primary, #fafafa);
  padding-bottom: 100px; /* Space for bottom nav */
}

.filtered-kanban-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1rem 0.75rem;
  background: var(--bg-primary, #fafafa);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.filtered-kanban-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--text-secondary, #71717a);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.2s;
}

.filtered-kanban-back:active {
  color: var(--text-primary, #1a1a1a);
}

.filtered-kanban-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.filtered-kanban-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.filtered-kanban-title h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin: 0;
  line-height: 1;
}

.filtered-kanban-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary, #71717a);
}

.filtered-kanban-cards {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Empty state */
.filtered-kanban-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.filtered-kanban-empty-icon {
  margin-bottom: 1rem;
  color: var(--text-tertiary, #a1a1aa);
}

.filtered-kanban-empty p {
  font-size: 1rem;
  color: var(--text-secondary, #71717a);
  margin: 0 0 1.5rem 0;
}

.filtered-kanban-add-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #d4735e 0%, #c45a47 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filtered-kanban-add-btn:active {
  transform: scale(0.98);
}

/* Desktop filtered job cards */
.filtered-job-card {
  background: white;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.filtered-job-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

.filtered-job-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.filtered-job-card-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  margin: 0;
  line-height: 1.3;
}

.filtered-job-match {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(168, 200, 154, 0.25);
  color: #4a7c3a;
  border-radius: 6px;
  flex-shrink: 0;
}

.filtered-job-company {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary, #71717a);
  margin: 0 0 0.25rem 0;
}

.filtered-job-location {
  font-size: 0.8125rem;
  color: var(--text-tertiary, #a1a1aa);
  margin: 0 0 0.5rem 0;
}

.filtered-job-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary, #a1a1aa);
}

/* Dark mode */
body.dark-mode .filtered-kanban-view {
  background: #18181b;
}

body.dark-mode .filtered-kanban-header {
  background: #18181b;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .filtered-kanban-back {
  color: #a1a1aa;
}

body.dark-mode .filtered-kanban-back:active {
  color: #fafafa;
}

body.dark-mode .filtered-kanban-title h1 {
  color: #fafafa;
}

body.dark-mode .filtered-kanban-count {
  background: rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

body.dark-mode .filtered-job-card {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .filtered-job-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .filtered-job-card-header h3 {
  color: #fafafa;
}

/* Section Headers - Matches desktop */
.mobile-section-header {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #71717a;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  padding: 0 1rem;
}

/* Account Buttons */
.mobile-account-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: transparent;
  color: #e4e4e7;
  border: 1px solid #3f3f46;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  min-height: 44px;
  margin-bottom: 0.5rem;
}

.mobile-account-btn:active {
  background: #27272a;
  transform: scale(0.98);
}

.mobile-account-btn svg {
  flex-shrink: 0;
}

/* Light mode text color adjustments */
@media (prefers-color-scheme: light) {
  .mobile-nav-item,
  .mobile-nav-primary {
    color: #18181b;
  }

  .mobile-account-btn {
    color: #18181b;
    border-color: #d4d4d8;
  }

  .mobile-account-btn:active {
    background: #f4f4f5;
  }
}

/* Input Fields (Mobile) */
.input-mobile {
  height: var(--touch-target-preferred);
  padding: 12px 16px;
  font-size: 16px; /* Critical: prevents iOS zoom */
  border: 1px solid var(--color-border);
  border-radius: 12px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  transition: all 200ms ease;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}

.input-mobile:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 165, 154, 0.1);
}

.input-mobile::placeholder {
  color: var(--color-text-tertiary);
}

/* ==========================================
   STATS CARD (Mobile Grid)
   ========================================== */

.stats-grid-mobile {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card-mobile {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all var(--transition-mobile-fast);
}

.stat-card-mobile:active {
  transform: scale(0.98);
}

.stat-card-mobile__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  margin: 0 0 4px 0;
}

.stat-card-mobile__label {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}

.stat-card-mobile__icon {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .stats-grid-mobile {
    display: grid;
  }
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */

.toast-notification {
  position: fixed;
  bottom: calc(80px + var(--safe-area-bottom));
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: var(--z-toast);
  animation: toastSlideUp 300ms ease-out;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

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

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

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

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

.toast-notification__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.toast-notification__message {
  flex: 1;
  font-size: 15px;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}

.toast-notification__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: all var(--transition-mobile-fast);
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
}

.toast-notification__close:active {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(0.9);
}

/* ==========================================
   LOADING SKELETON
   ========================================== */

.skeleton-loader {
  animation: shimmer 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, #E8E6E3 0%, #F0EEEB 50%, #E8E6E3 100%);
  background-size: 400% 100%;
  border-radius: 8px;
}

.skeleton-loader--text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-loader--title {
  height: 24px;
  margin-bottom: 12px;
}

.skeleton-loader--card {
  height: 120px;
  border-radius: 16px;
  margin-bottom: 12px;
}

/* ==========================================
   FLOATING ACTION BUTTON (FAB)
   ========================================== */

.fab-mobile {
  position: fixed;
  bottom: calc(80px + var(--safe-area-bottom));
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(212, 165, 154, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-mobile-base);
  z-index: 100;
}

.fab-mobile:active {
  transform: scale(0.9);
}

.fab-mobile svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .fab-mobile {
    display: flex;
  }
}

/* ==========================================
   EMPTY STATES
   ========================================== */

.empty-state-mobile {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-state-mobile__icon {
  font-size: 64px;
  opacity: 0.3;
  color: var(--color-text-tertiary);
}

.empty-state-mobile__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  margin: 0;
}

.empty-state-mobile__message {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin: 0 0 24px 0;
  max-width: 320px;
}

.empty-state-mobile__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-primary);
  color: white;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-mobile-fast);
  border: none;
  font-family: var(--font-sans);
}

.empty-state-mobile__action:active {
  transform: scale(0.95);
}

/* ==========================================
   PULL-TO-REFRESH INDICATOR
   ========================================== */

.pull-to-refresh {
  position: fixed;
  top: calc(56px + var(--safe-area-top));
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  opacity: 0;
  transition: all var(--transition-mobile-base);
  z-index: 100;
  pointer-events: none;
}

.pull-to-refresh--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.pull-to-refresh__icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  animation: spin 1s linear infinite;
}

/* ==========================================
   SWIPE ACTION OVERLAYS
   ========================================== */

.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  opacity: 0;
  transition: opacity var(--transition-mobile-fast);
}

.swipe-actions--visible {
  opacity: 1;
}

.swipe-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  min-width: 80px;
  cursor: pointer;
  transition: all var(--transition-mobile-fast);
}

.swipe-action--delete {
  background: var(--color-error);
  color: white;
}

.swipe-action--archive {
  background: var(--color-warning);
  color: white;
}

.swipe-action:active {
  filter: brightness(0.9);
}

/* ==========================================
   CONTEXT MENU (Dropdown)
   ========================================== */

.context-menu-mobile {
  position: fixed;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  padding: 8px 0;
  min-width: 200px;
  z-index: var(--z-toast);
  opacity: 0;
  transform: scale(0.9);
  transition: all var(--transition-mobile-fast);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.context-menu-mobile--visible {
  opacity: 1;
  transform: scale(1);
}

.context-menu-mobile__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all var(--transition-mobile-fast);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--color-text-primary);
  font-size: 15px;
  font-family: var(--font-sans);
}

.context-menu-mobile__item:active {
  background: rgba(0, 0, 0, 0.05);
}

.context-menu-mobile__item-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
}

.context-menu-mobile__item--danger {
  color: var(--color-error);
}

.context-menu-mobile__item--danger .context-menu-mobile__item-icon {
  color: var(--color-error);
}

/* ==========================================
   DRAG-TO-REORDER STYLES
   ========================================== */

/* Placeholder shown while dragging */
.drag-placeholder {
  background: linear-gradient(135deg, rgba(212, 165, 154, 0.1) 0%, rgba(212, 165, 154, 0.05) 100%);
  border: 2px dashed rgba(212, 165, 154, 0.3);
  border-radius: 16px;
  margin-bottom: 12px;
  transition: all 200ms ease;
}

/* Job card being dragged */
.job-card-mobile.dragging {
  opacity: 0.95;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  transform: scale(1.05) rotate(2deg);
  z-index: 1000;
  cursor: grabbing;
  transition: box-shadow 200ms ease, opacity 200ms ease;
}

/* Disable pointer events on cards while dragging */
.job-card-mobile.dragging * {
  pointer-events: none;
}

/* Add grab cursor on long-press */
.job-card-mobile:active {
  cursor: grab;
}

/* ==========================================
   ANIMATIONS & KEYFRAMES
   ========================================== */

/* Sidebar slide */
@keyframes slideInLeft {
  from { transform: translateX(-280px); }
  to { transform: translateX(0); }
}

/* Bottom sheet slide */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Shimmer loading */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Button press */
@keyframes buttonPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Shake error */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.input-error {
  animation: shake 0.4s ease-in-out;
  border-color: var(--color-error);
}

/* Toast slide up */
@keyframes toastSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================
   DARK MODE (Mobile Components)
   ========================================== */

body.dark-mode .mobile-header {
  background: #18181b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .mobile-header__title {
  color: #e4e4e7;
}

body.dark-mode .mobile-header__hamburger {
  color: #a1a1aa;
}

body.dark-mode .mobile-header__hamburger:active {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .mobile-header__ai-btn {
  background: var(--color-primary);
}

body.dark-mode .mobile-header__ai-btn:active {
  background: var(--color-primary-dark);
}

body.dark-mode .mobile-bottom-nav {
  background: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .mobile-bottom-nav__icon,
body.dark-mode .mobile-bottom-nav__label {
  color: #71717a;
}

body.dark-mode .mobile-bottom-nav__item--active .mobile-bottom-nav__icon,
body.dark-mode .mobile-bottom-nav__item--active .mobile-bottom-nav__label {
  color: var(--color-primary);
}

body.dark-mode .mobile-bottom-nav__item:active {
  background: rgba(212, 115, 94, 0.15);
}

/* Mobile sidebar is always dark - no dark mode overrides needed */

body.dark-mode .bottom-sheet {
  background: rgba(24, 24, 27, 0.98);
}

body.dark-mode .bottom-sheet__drag-handle {
  background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .bottom-sheet__backdrop {
  background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .job-card-mobile {
  background: rgba(39, 39, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .job-card-mobile__company {
  color: #e4e4e7;
}

body.dark-mode .job-card-mobile__position {
  color: #a1a1aa;
}

body.dark-mode .job-card-mobile__meta-item {
  color: #71717a;
}

body.dark-mode .job-card-mobile__footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.dark-mode .btn-mobile-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

body.dark-mode .btn-mobile-secondary {
  background: #27272a;
  border-color: #3f3f46;
  color: #e4e4e7;
}

body.dark-mode .btn-mobile-secondary:active {
  background: #3f3f46;
}

body.dark-mode .input-mobile {
  background: #27272a;
  border-color: #3f3f46;
  color: #e4e4e7;
}

body.dark-mode .input-mobile:focus {
  border-color: var(--color-primary);
}

body.dark-mode .stat-card-mobile {
  background: rgba(39, 39, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .stat-card-mobile__value {
  color: #e4e4e7;
}

body.dark-mode .stat-card-mobile__label {
  color: #a1a1aa;
}

body.dark-mode .toast-notification {
  background: rgba(39, 39, 42, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .toast-notification__message {
  color: #e4e4e7;
}

body.dark-mode .skeleton-loader {
  background: linear-gradient(90deg, #1a1a1a 0%, #262626 50%, #1a1a1a 100%);
  background-size: 400% 100%;
}

body.dark-mode .empty-state-mobile__title {
  color: #e4e4e7;
}

body.dark-mode .empty-state-mobile__message {
  color: #a1a1aa;
}

body.dark-mode .context-menu-mobile {
  background: rgba(39, 39, 42, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .context-menu-mobile__item {
  color: #e4e4e7;
}

body.dark-mode .context-menu-mobile__item:active {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .context-menu-mobile__item-icon {
  color: #a1a1aa;
}

body.dark-mode .drag-placeholder {
  background: linear-gradient(135deg, rgba(212, 165, 154, 0.15) 0%, rgba(212, 165, 154, 0.08) 100%);
  border-color: rgba(212, 165, 154, 0.4);
}

body.dark-mode .job-card-mobile.dragging {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   ACCESSIBILITY - FOCUS STATES
   ========================================== */

/* Focus indicators for keyboard navigation */
.mobile-header__hamburger:focus-visible,
.mobile-header__icon-btn:focus-visible,
.mobile-panel-toggle:focus-visible,
.mobile-ai-fab:focus-visible,
.mobile-bottom-nav__item:focus-visible,
.mobile-sidebar__close:focus-visible,
.btn-mobile-primary:focus-visible,
.btn-mobile-secondary:focus-visible,
.icon-btn-mobile:focus-visible,
.input-mobile:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================
   REDUCED MOTION SUPPORT
   ========================================== */

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

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Small phones (320-480px) */
@media (max-width: 480px) {
  .mobile-header__title {
    font-size: 16px;
  }

  .job-card-mobile {
    padding: 12px;
  }

  .stat-card-mobile__value {
    font-size: 28px;
  }
}

/* Large phones & tablets (481-768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .mobile-sidebar {
    width: 320px; /* Wider sidebar */
  }
}

/* Desktop (769px+) - Hide all mobile elements */
@media (min-width: 769px) {
  .mobile-header,
  .mobile-header-claude,
  .mobile-icon-strip,
  .mobile-ai-fab,
  .mobile-bottom-nav,
  .mobile-sidebar,
  .mobile-sidebar__backdrop,
  .job-card-mobile,
  .stats-grid-mobile,
  .fab-mobile {
    display: none !important;
  }
}

/* ==========================================
   FILTER CHIPS - IMPROVED VISUAL HIERARCHY
   Quick Win #2
   ========================================== */

@media (max-width: 768px) {
  /* Better filter chip styles for mobile */
  .filter-btn {
    background: transparent !important;
    border: 1.5px solid #E4E4E7 !important;
    color: #71717A !important;
    font-weight: 400 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    transition: all var(--transition-mobile-fast) !important;
  }

  .filter-btn:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.03) !important;
  }

  .filter-btn.active {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  }

  .filter-btn .filter-count {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 400;
    margin-left: 4px;
  }

  .filter-btn.active .filter-count {
    opacity: 0.9;
    font-weight: 600;
  }

  /* Improved filters bar layout for mobile */
  .filters-bar {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

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

  .sort-section {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .sort-section label {
    font-size: 14px !important;
    color: #71717A !important;
    font-weight: 500 !important;
  }

  .sort-section select {
    flex: 1 !important;
    padding: 10px 12px !important;
    border: 1.5px solid #E4E4E7 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    background: white !important;
    color: var(--color-text-primary) !important;
  }

  /* Move trash/reset icon to better location or hide it */
  .sort-section .icon-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1.5px solid #E4E4E7 !important;
    color: #71717A !important;
    transition: all var(--transition-mobile-fast) !important;
  }

  .sort-section .icon-btn:active {
    transform: scale(0.95);
    background: rgba(217, 160, 154, 0.1) !important;
    border-color: #D9A09A !important;
    color: #C9887E !important;
  }
}

/* ==========================================
   IMPROVED TEXT CONTRAST
   Quick Win #6
   ========================================== */

@media (max-width: 768px) {
  /* Darken secondary text for better accessibility */
  .job-card-mobile__position,
  .mobile-bottom-nav__label,
  .stat-card-mobile__label {
    color: #52525B !important; /* Darker than #71717A */
  }

  .job-card-mobile__meta-item {
    color: #52525B !important;
  }

  body.dark-mode .job-card-mobile__position,
  body.dark-mode .stat-card-mobile__label {
    color: #D4D4D8 !important; /* Lighter for dark mode */
  }
}

/* ==========================================
   FULLSCREEN MODALS ON MOBILE
   ========================================== */

@media (max-width: 767px) {
  /* Modal backdrop - highest z-index to cover everything */
  .modal {
    z-index: 9999 !important;
  }

  /* Make all modals fullscreen on mobile */
  .modal-content,
  .job-details-modal,
  .settings-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    z-index: 10000 !important;
  }

  /* Modal header sticky on mobile */
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-primary, #fff);
    padding: 16px !important;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  body.dark-mode .modal-header {
    background: var(--bg-primary, #1a1a1a);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  /* Modal body scrollable */
  .modal-body {
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Modal close button - larger touch target */
  .modal-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Settings tabs - horizontal scroll on mobile */
  .settings-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 0 16px 16px 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .settings-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-height: 44px;
  }
}

/* ==========================================
   EMAIL PANEL MOBILE - Full screen slide-in
   ========================================== */

@media (max-width: 767px) {
  .email-sidebar,
  .email-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 4000 !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Use .active class (matches JavaScript) */
  .email-sidebar.active,
  .email-panel.active {
    transform: translateX(0) !important;
  }

  /* Also support .open class for backwards compatibility */
  .email-sidebar.open,
  .email-panel.open {
    transform: translateX(0) !important;
  }

  /* Email sidebar backdrop on mobile */
  .email-sidebar-backdrop.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 3999 !important;
  }

  /* Dark mode support */
  body.dark-mode .email-sidebar,
  body.dark-mode .email-panel {
    background: #1a1a1a !important;
  }
}

/* ==========================================
   STATS CARDS MOBILE
   ========================================== */

@media (max-width: 767px) {
  .stats-grid,
  .dashboard-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px;
  }

  .stat-card {
    padding: 16px !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }

  .stat-card__value {
    font-size: 24px !important;
    font-weight: 700 !important;
  }

  .stat-card__label {
    font-size: 12px !important;
    color: #71717a;
  }
}