/* ============================================================
   STAROVIA — COMPREHENSIVE MOBILE & CONTRAST FIX v2
   Deep scan fix: contrast, mobile nav, forms, admin, all pages
   ============================================================ */

/* ── 1. FORCE MOBILE-MENU-BTN VISIBLE ON SMALL SCREENS ────── */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    min-width: 40px;
    min-height: 40px;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .mobile-menu-btn:hover { background: rgba(0,0,0,0.08); }
  .hamburger-line {
    display: block !important;
    width: 22px;
    height: 2.5px;
    background: var(--primary-color, #1a365d);
    border-radius: 2px;
    transition: all 0.3s ease;
    pointer-events: none;
  }
  /* Animated X */
  .mobile-menu-btn.open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .mobile-menu-btn.open .hamburger-line:nth-child(2) {
    opacity: 0; transform: scaleX(0);
  }
  .mobile-menu-btn.open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  /* Hide desktop nav */
  header nav,
  header .user-menu { display: none !important; }
  .theme-toggle-btn { display: none !important; }
}

/* ── 2. MOBILE NAV DRAWER ──────────────────────────────────── */
.mobile-nav {
  position: fixed !important;
  top: 0 !important;
  left: -100% !important;
  width: min(320px, 85vw) !important;
  height: 100vh !important;
  background: #ffffff !important;
  z-index: 10000 !important;
  transition: left 0.35s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: 6px 0 40px rgba(0,0,0,0.25) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  -webkit-overflow-scrolling: touch !important;
}
.mobile-nav.active { left: 0 !important; }

.mobile-nav .mobile-nav-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px !important;
  background: var(--primary-color, #1a365d) !important;
  color: #fff !important;
  min-height: 70px;
  flex-shrink: 0;
}
.mobile-nav .mobile-nav-header .nav-logo,
.mobile-nav .mobile-nav-header span.nav-logo {
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
}
.mobile-nav .mobile-nav-header img {
  height: 36px !important;
  filter: brightness(10) !important;
  max-width: 140px;
  object-fit: contain;
}
.mobile-nav .mobile-nav-close {
  background: rgba(255,255,255,0.2) !important;
  border: none !important;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav .mobile-nav-close:hover {
  background: rgba(255,255,255,0.35) !important;
}
.mobile-nav .mobile-nav-menu {
  flex: 1 !important;
  padding: 8px 0 !important;
}
.mobile-nav .mobile-nav-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 24px !important;
  color: #1a202c !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: all 0.2s !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav .mobile-nav-menu a i {
  width: 20px !important;
  color: #e53e3e !important;
  font-size: 0.9rem !important;
}
.mobile-nav .mobile-nav-menu a:hover,
.mobile-nav .mobile-nav-menu a.active {
  background: #fef2f2 !important;
  color: #e53e3e !important;
  padding-left: 30px !important;
}
.mobile-nav .mobile-nav-footer {
  padding: 20px !important;
  border-top: 1px solid #f0f0f0 !important;
  flex-shrink: 0;
}
.mobile-nav .mobile-apply-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px !important;
  background: #e53e3e !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.mobile-nav .mobile-apply-btn:hover {
  background: #c53030 !important;
  padding-left: 14px !important;
}

/* Overlay */
.mobile-nav-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
.mobile-nav-overlay.active {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* ── 3. TEXT CONTRAST — FORM INPUTS ─────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea,
.form-group input,
.form-group select,
.form-group textarea,
.filter-group input,
.filter-group select,
.filter-input,
.filter-select,
.form-control {
  color: #1a202c !important;
  background-color: #ffffff !important;
  border-color: #cbd5e0 !important;
  -webkit-text-fill-color: #1a202c !important;
}
input::placeholder, textarea::placeholder {
  color: #718096 !important;
  -webkit-text-fill-color: #718096 !important;
  opacity: 1 !important;
}
input:focus, select:focus, textarea:focus {
  color: #1a202c !important;
  -webkit-text-fill-color: #1a202c !important;
  background-color: #ffffff !important;
}

/* Dark mode inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .filter-input,
[data-theme="dark"] .filter-select {
  color: #f0f2f8 !important;
  background-color: #1e2330 !important;
  border-color: rgba(255,255,255,0.18) !important;
  -webkit-text-fill-color: #f0f2f8 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}
[data-theme="dark"] select option {
  background: #1e2330 !important;
  color: #f0f2f8 !important;
}

/* ── 4. SEARCH INPUTS CONTRAST FIX ─────────────────────────── */
.search-input-group input,
.search-input-group select {
  color: #1a202c !important;
  -webkit-text-fill-color: #1a202c !important;
}
.advanced-search .search-input-group input,
.advanced-search .search-input-group select {
  background: #f8fafc !important;
  color: #1a202c !important;
  -webkit-text-fill-color: #1a202c !important;
}
.advanced-search .search-input-group input::placeholder {
  color: #718096 !important;
  -webkit-text-fill-color: #718096 !important;
}

/* ── 5. USER MENU (support/my-applications nav) ─────────────── */
.user-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}
.user-menu a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.user-menu a:hover { color: #ffffff !important; }
@media (max-width: 768px) {
  .user-menu { display: none !important; }
}

/* ── 6. FLUID TYPOGRAPHY ────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.hero h1 { font-size: clamp(1.75rem, 5vw, 3.5rem) !important; line-height: 1.2; }
.section-title h2 { font-size: clamp(1.5rem, 4vw, 2.5rem) !important; }
.search-hero h1 { font-size: clamp(1.5rem, 4vw, 2.4rem) !important; }
.page-header h1 { font-size: clamp(1.6rem, 4vw, 3rem) !important; }

/* ── 7. HERO ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { min-height: 80vh; padding-top: 80px; padding-bottom: 40px; }
  .hero p { font-size: clamp(0.95rem, 3vw, 1.2rem); }
  .hero-buttons { flex-direction: column !important; align-items: center !important; gap: 14px !important; }
  .hero-buttons .btn { width: 100% !important; max-width: 300px !important; justify-content: center !important; }
}

/* ── 8. SEARCH FORM RESPONSIVE ─────────────────────────────── */
@media (max-width: 992px) {
  .search-form-grid { grid-template-columns: 1fr 1fr !important; }
  .search-form-grid .search-btn { grid-column: span 2 !important; }
}
@media (max-width: 576px) {
  .search-form-grid { grid-template-columns: 1fr !important; padding: 12px !important; }
  .search-form-grid .search-btn { grid-column: 1 !important; width: 100% !important; justify-content: center !important; }
}

/* ── 9. CONTENT GRIDS ───────────────────────────────────────── */
@media (max-width: 768px) {
  .jobs-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .categories-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .why-choose-grid { grid-template-columns: repeat(2,1fr) !important; gap: 16px !important; }
  .footer-grid { grid-template-columns: repeat(2,1fr) !important; gap: 24px !important; }
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  .categories-grid,
  .why-choose-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .container { padding: 0 16px !important; }
}

/* ── 10. APPLY FORM ─────────────────────────────────────────── */
@media (max-width: 992px) {
  .apply-container { grid-template-columns: 1fr !important; gap: 20px !important; }
  .apply-info { position: static !important; }
}
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .form-group.full-width { grid-column: span 1 !important; }
  .apply-form { padding: 24px !important; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px !important; }
}

/* ── 11. LOGIN PAGE ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .login-box, .auth-card, .login-card {
    padding: 28px 20px !important;
    margin: 10px !important;
    border-radius: 14px !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* ── 12. TABLE RESPONSIVE ───────────────────────────────────── */
.applications-table,
.table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.applications-table table,
.table-wrap table { min-width: 600px; }
@media (max-width: 768px) {
  .table-filters { flex-direction: column !important; padding: 14px !important; gap: 10px !important; }
  .table-filters input, .table-filters select { width: 100% !important; font-size: 16px !important; }
}

/* ── 13. PAGINATION ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .pagination { flex-wrap: wrap !important; gap: 8px !important; }
  .pagination a { padding: 8px 12px !important; font-size: 0.85rem !important; }
}

/* ── 14. PAGE HEADER ────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header { padding: 110px 0 50px !important; }
}

/* ── 15. TOAST MOBILE ───────────────────────────────────────── */
@media (max-width: 576px) {
  .toast-container { top: auto !important; bottom: 20px !important; right: 12px !important; left: 12px !important; }
  .toast { min-width: auto !important; max-width: 100% !important; }
}

/* ── 16. MODAL MOBILE ───────────────────────────────────────── */
@media (max-width: 576px) {
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal { width: 100% !important; max-width: 100% !important; border-radius: 20px 20px 0 0 !important; max-height: 90vh !important; }
  .modal-footer { flex-direction: column-reverse !important; gap: 10px !important; }
  .modal-footer .btn { width: 100% !important; justify-content: center !important; }
}

/* ── 17. SECTION SPACING ────────────────────────────────────── */
@media (max-width: 768px) {
  .categories, .why-choose, .cta, .jobs-section, .apply-section { padding: 50px 0 !important; }
  .section-title { margin-bottom: 30px !important; }
  footer { padding: 40px 0 16px !important; }
}

/* ── 18. SCROLL TO TOP ──────────────────────────────────────── */
@media (max-width: 576px) {
  .scroll-top { bottom: 16px !important; right: 16px !important; width: 44px !important; height: 44px !important; }
}

/* ── 19. MIN TAP TARGETS ────────────────────────────────────── */
button, .btn, a.btn, .action-btn, .apply-btn, .submit-btn, .status-btn {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 20. SAFE OVERFLOW ──────────────────────────────────────── */
body { overflow-x: hidden; }

/* ===========================================================
   ADMIN PANEL FIXES
   =========================================================== */

/* ── 21. ADMIN SIDEBAR TOGGLE BTN ───────────────────────────── */
.sidebar-toggle-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  color: var(--text-dark, #111);
  font-size: 20px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-right: 8px;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: var(--bg-raised, #f0f4f8); }
@media (max-width: 900px) {
  .sidebar-toggle-btn { display: flex !important; }
}

/* ── 22. ADMIN SIDEBAR DRAWER (all mobile/tablet widths) ────── */
@media (max-width: 900px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 270px !important;
    transform: translateX(-270px) !important;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    display: flex !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.4) !important;
  }
  /* A real slide-in drawer keeps labels visible at tablet and phone widths. */
  .sidebar .sidebar-logo h2,
  .sidebar .sidebar-logo .logo-sub,
  .sidebar .sidebar-nav ul li a > span:nth-child(2),
  .sidebar .nav-section-label,
  .sidebar .sidebar-footer .user-info { display: block !important; }
  .sidebar .sidebar-nav ul li a {
    justify-content: flex-start !important;
    padding: 10px 16px !important;
  }
  .sidebar .sidebar-nav ul li a .nav-icon { flex: 0 0 36px; }
  .sidebar-logo { padding: 20px 52px 18px 20px !important; }
  .main-content { margin-left: 0 !important; }
  .sidebar-overlay {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 9998 !important;
    opacity: 0 !important; pointer-events: none !important;
    transition: opacity 0.3s !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  .sidebar-overlay.active { opacity: 1 !important; pointer-events: all !important; }
}

/* ── 24. ADMIN TOPBAR ────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar { padding: 0 14px !important; }
  .topbar-left { display: flex !important; align-items: center !important; gap: 0 !important; }
  .topbar-left h1 { font-size: 0.95rem !important; }
  .topbar-left .breadcrumb { display: none !important; }
}
@media (max-width: 480px) {
  .topbar { padding: 0 10px !important; }
  .topbar-left h1 { font-size: 0.88rem !important; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right .btn span, .topbar-right .btn-text { display: none; }
  .topbar-right .btn { padding: 0 10px !important; min-width: 36px; }
  .page-body { padding: 12px !important; }
}

/* ── 25. ADMIN STATS ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .stat-card { padding: 16px !important; }
  .stat-number { font-size: 1.8rem !important; }
}

/* ── 26. ADMIN TABLE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .card table { min-width: 580px !important; }
  table th { white-space: nowrap; }
}
@media (max-width: 576px) {
  .filters-row { flex-direction: column !important; padding: 12px !important; gap: 10px !important; }
  .filter-input, .filter-select { width: 100% !important; font-size: 16px !important; min-width: auto !important; }
}

/* ── 27. ADMIN FORMS ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr !important; }
}

/* ── 28. ADMIN SETTINGS ──────────────────────────────────────── */
@media (max-width: 900px) { .settings-cards-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 576px) {
  .settings-cards-grid { grid-template-columns: 1fr !important; }
  .settings-tabs { flex-direction: column !important; }
}

/* ── 29. ADMIN VIEW APPLICATION ──────────────────────────────── */
@media (max-width: 768px) {
  .application-detail { padding: 20px !important; }
  .detail-grid { grid-template-columns: 1fr !important; }
  .status-actions { flex-direction: column !important; gap: 12px !important; }
  .status-btn { width: 100% !important; text-align: center !important; }
  .file-downloads { flex-direction: column !important; gap: 10px !important; }
}
@media (max-width: 576px) {
  .card-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

/* ── 30. ADMIN INPUT CONTRAST ────────────────────────────────── */
.admin-wrapper input[type="text"],
.admin-wrapper input[type="email"],
.admin-wrapper input[type="search"],
.admin-wrapper input[type="password"],
.admin-wrapper input[type="number"],
.admin-wrapper select,
.admin-wrapper textarea {
  color: #111827 !important;
  background: #ffffff !important;
  -webkit-text-fill-color: #111827 !important;
}
.admin-wrapper input::placeholder,
.admin-wrapper textarea::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  opacity: 1 !important;
}

/* ── 31. DARK MODE MOBILE NAV ─────────────────────────────────── */
[data-theme="dark"] .mobile-nav { background: #111318 !important; }
[data-theme="dark"] .mobile-nav .mobile-nav-menu a {
  color: rgba(255,255,255,0.85) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  background: transparent !important;
}
[data-theme="dark"] .mobile-nav .mobile-nav-menu a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  padding-left: 30px !important;
}
[data-theme="dark"] .mobile-nav .mobile-nav-footer { border-top-color: rgba(255,255,255,0.08) !important; }

/* ── MOBILE LAYOUT PASS ─────────────────────────────────────────
   Keep page content inside the viewport; scroll only dense tables.
   These rules intentionally target containers, not arbitrary cards.
   ────────────────────────────────────────────────────────────── */
html { min-width: 320px; }
body { min-width: 320px; overflow-x: clip; }
img, video, iframe { max-width: 100%; }

@media (max-width: 768px) {
  /* Put the public-site hamburger at the leading edge, followed by the logo. */
  header .header-inner { width: 100%; gap: 10px; padding: 10px 0 !important; }
  header .mobile-menu-btn { order: -1; margin: 0; }
  header .logo { min-width: 0; margin-right: auto; }
  header .logo img { width: auto; height: 42px !important; max-width: min(48vw, 180px); object-fit: contain; }
  header .logo-text { font-size: clamp(1rem, 5vw, 1.35rem); }
  .container { width: 100%; max-width: 100%; }
  .page-header { padding-top: 100px !important; }
  .hero { min-height: min(760px, 88svh); padding: 92px 0 48px; }
  .hero-content { width: 100%; padding-inline: 4px; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; }
  .hero p { max-width: 36rem; margin: 0 auto 28px; }
  .section-title { padding-inline: 8px; }
  .category-card, .job-card, .application-card, .ticket-card { min-width: 0; }
  .job-card h3, .job-card p, .application-card p { overflow-wrap: anywhere; }
  .apply-form, .form-container, .apply-form-card { padding: clamp(16px, 5vw, 26px) !important; }
  .form-grid, .apply-container { min-width: 0; }
  .form-group, .form-row, .form-field { min-width: 0; }
  .form-group input, .form-group select, .form-group textarea,
  input, select, textarea { max-width: 100%; }
  .btn, button.btn { white-space: normal; }
  .modal { max-width: 100vw !important; overflow-y: auto; }
  .modal-body { overflow-wrap: anywhere; }

}

@media (max-width: 600px) {
  .container { padding-inline: 16px !important; }
  .auth-container, .reset-container { width: calc(100vw - 24px) !important; max-width: 460px !important; margin: 0 auto !important; padding: 22px 18px !important; }
  .auth-logo { padding: 20px 18px 0 !important; }
  .auth-tabs { margin-inline: -18px; }
  .auth-tab { min-width: 0; padding-inline: 10px; }
  .reset-container { padding: 26px 20px !important; }
  .apply-form, .apply-form-card, .form-container, .ticket-form-card { border-radius: 14px !important; }
  .apply-form .form-grid, .form-container .form-grid { grid-template-columns: minmax(0,1fr) !important; }
  .apply-form .form-group.full-width, .form-container .form-group.full-width { grid-column:1 !important; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 14px !important; }
  .toast { width: 100%; }
  .pagination { justify-content: center; }
}

@media (max-width: 380px) {
  .container { padding-inline: 12px !important; }
  .header-inner { gap: 6px !important; }
}

/* ── TRUE MOBILE-FIRST LAYOUT PASS ─────────────────────────────
   This makes mobile pages feel designed for phones rather than a
   desktop layout squeezed into a small viewport.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 320px !important;
    overflow-x: hidden !important;
  }

  body * {
    max-width: 100% !important;
    word-break: break-word;
  }

  .container,
  .header-inner,
  .hero-content,
  .section-inner,
  .page-content,
  .dashboard-layout,
  .dashboard-main-column,
  .apply-container,
  .auth-container,
  .login-box,
  .reset-container,
  .form-container,
  .apply-form,
  .application-detail,
  .page-body,
  .card,
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .jobs-grid,
  .categories-grid,
  .stats-grid,
  .why-choose-grid,
  .feature-grid,
  .footer-grid,
  .settings-cards-grid,
  .detail-grid,
  .grid-2,
  .search-form-grid,
  .form-grid,
  .dashboard-grid,
  .admin-grid,
  .two-col-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .job-card,
  .category-card,
  .stat-card,
  .feature-card,
  .ticket-card,
  .application-card,
  .support-card,
  .settings-card,
  .profile-card,
  .card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero,
  .page-header,
  .search-hero,
  .page-section,
  .job-search-section,
  .cta,
  .categories,
  .jobs-section,
  .why-choose,
  .apply-section,
  .login-page,
  .auth-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-buttons,
  .cta-buttons,
  .auth-footer,
  .button-row,
  .action-bar,
  .status-actions,
  .document-submit-row,
  .filter-actions,
  .table-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hero-buttons .btn,
  .cta-buttons .btn,
  .auth-footer .btn,
  .button-row .btn,
  .status-btn,
  .document-submit-btn,
  .filter-actions button,
  .table-actions button,
  .tab-btn,
  .sidebar-nav a,
  .submit-btn,
  .action-btn,
  .apply-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  .header-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  nav ul,
  .nav-links,
  .header-actions,
  .topbar-right,
  .filters-row,
  .settings-tabs {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .topbar,
  .admin-header,
  .page-topbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .admin-wrapper,
  .dashboard-sidebar,
  .sidebar,
  .sidebar-nav,
  .settings-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }

  .dashboard-layout,
  .admin-layout,
  .two-column {
    display: block !important;
  }

  .filter-group,
  .form-group,
  .field,
  .input-group,
  .search-group,
  .checkbox-group,
  .radio-group {
    width: 100% !important;
    min-width: 0 !important;
  }
}

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

/* Preserve the existing admin drawer and dashboard sizing on phones. */
@media (max-width: 768px) {
  /* Keep dense admin tables readable; the wrapper, not each cell, scrolls. */
  .admin-wrapper .card { overflow:hidden !important; }
  .admin-wrapper .table-wrapper,
  .admin-wrapper .ticket-table-wrapper,
  .admin-wrapper .flow-table-wrap {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .admin-wrapper .table-wrapper > table,
  .admin-wrapper .ticket-table-wrapper > table,
  .admin-wrapper .flow-table-wrap > table {
    display:table !important;
    width:100% !important;
    min-width:820px !important;
    max-width:none !important;
    table-layout:auto !important;
  }
  .admin-wrapper .table-wrapper th,
  .admin-wrapper .table-wrapper td,
  .admin-wrapper .ticket-table-wrapper th,
  .admin-wrapper .ticket-table-wrapper td {
    display:table-cell !important;
    max-width:none !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  .admin-wrapper .table-wrapper th,
  .admin-wrapper .ticket-table-wrapper th { white-space:nowrap !important; }
  .admin-wrapper .table-wrapper td .btn,
  .admin-wrapper .table-wrapper td button,
  .admin-wrapper .table-wrapper td form,
  .admin-wrapper .ticket-table-wrapper td .btn,
  .admin-wrapper .ticket-table-wrapper td button {
    display:inline-flex !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    vertical-align:middle;
  }
  .admin-wrapper .table-wrapper td .badge,
  .admin-wrapper .ticket-table-wrapper td .badge { white-space:nowrap !important; word-break:keep-all !important; }
  .admin-wrapper .table-wrapper .job-title-cell { min-width:250px; }
  .admin-wrapper .table-wrapper .job-title-name,
  .admin-wrapper .table-wrapper .job-title-sub { word-break:normal !important; overflow-wrap:break-word !important; }
}
@media (max-width: 768px) {
  .admin-wrapper .table-wrapper > .admin-jobs-table { min-width:1040px !important; }
  .admin-dashboard-page .table-wrapper > table { min-width:860px !important; }
}
@media (max-width: 900px) {
  .admin-wrapper { display:flex !important; width:100% !important; max-width:none !important; }
  .admin-wrapper .sidebar {
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;
    flex:0 0 270px !important;
  }
  .admin-wrapper .main-content { width:auto !important; max-width:none !important; min-width:0 !important; flex:1 1 auto !important; }
  .admin-wrapper .topbar-right { width:auto !important; max-width:none !important; flex-wrap:nowrap !important; }
}
@media (max-width: 768px) {
  .admin-wrapper .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .admin-wrapper .secondary-stats-row { grid-template-columns:1fr !important; }
  .admin-wrapper .sidebar-nav { width:auto !important; max-width:none !important; }
}
@media (max-width: 600px) {
  .admin-wrapper .settings-cards-grid { grid-template-columns:1fr !important; }
}

/* Admin dashboard must remain a full-width workspace when the generic
   phone rules above adapt the public and applicant sections. */
@media (max-width: 768px) {
  .admin-dashboard-page { display:flex !important; width:100% !important; min-width:0 !important; }
  .admin-dashboard-page .main-content { flex:1 1 auto !important; width:calc(100% - 0px) !important; min-width:0 !important; margin-left:0 !important; }
  .admin-dashboard-page .page-body { width:100% !important; padding:14px !important; }
  .admin-dashboard-page .topbar {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-height:64px !important;
    height:auto !important;
    padding:8px 12px !important;
  }
  .admin-dashboard-page .topbar-left { display:flex !important; flex:1 1 auto !important; align-items:center !important; width:auto !important; min-width:0 !important; gap:8px !important; }
  .admin-dashboard-page .topbar-left h1 { flex:1 1 auto; min-width:0; font-size:.96rem !important; white-space:nowrap; }
  .admin-dashboard-page .topbar-left .breadcrumb { display:none !important; }
  .admin-dashboard-page .topbar-right { display:flex !important; flex:0 0 auto !important; width:auto !important; max-width:none !important; flex-wrap:nowrap !important; gap:0 !important; }
  .admin-dashboard-page .topbar-right .btn { width:40px !important; min-width:40px !important; max-width:40px !important; height:40px !important; min-height:40px !important; padding:0 !important; justify-content:center !important; font-size:0 !important; }
  .admin-dashboard-page .topbar-right .btn i { font-size:1rem !important; margin:0 !important; }
  .admin-dashboard-page .stats-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; width:100% !important; }
  .admin-dashboard-page .stats-grid .stat-card { width:auto !important; min-width:0 !important; padding:14px 12px !important; }
  .admin-dashboard-page .stats-grid .stat-label { padding-right:26px; font-size:.64rem; letter-spacing:.35px; }
  .admin-dashboard-page .stats-grid .stat-number { font-size:1.8rem !important; }
  .admin-dashboard-page .stats-grid .stat-sub { font-size:.66rem; }
  .admin-dashboard-page .secondary-stats-row { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .admin-dashboard-page .secondary-stat-card { width:auto !important; min-width:0 !important; }
  .admin-dashboard-page .card { width:100% !important; max-width:100% !important; min-width:0 !important; }
  .admin-dashboard-page .card-header { display:flex !important; align-items:flex-start !important; flex-direction:column !important; width:100% !important; }
  .admin-dashboard-page .card-header > div { width:100% !important; max-width:100% !important; }
  .admin-dashboard-page .filters-row { display:flex !important; flex-direction:row !important; align-items:center !important; flex-wrap:wrap !important; width:100% !important; }
  .admin-dashboard-page .filters-row input { flex:1 1 100% !important; width:100% !important; }
  .admin-dashboard-page .filters-row select { flex:1 1 auto !important; width:auto !important; }
  .admin-dashboard-page .filters-row button,
  .admin-dashboard-page .filters-row a { width:40px !important; flex:0 0 40px !important; }
  .admin-dashboard-page .table-wrapper { display:block !important; width:100% !important; max-width:100% !important; overflow-x:auto !important; overscroll-behavior-x:contain; }
  .admin-dashboard-page .table-wrapper table { display:table !important; width:100% !important; min-width:860px !important; table-layout:fixed !important; }
  .admin-dashboard-page .table-wrapper thead { display:table-header-group !important; }
  .admin-dashboard-page .table-wrapper tbody { display:table-row-group !important; }
  .admin-dashboard-page .table-wrapper tr { display:table-row !important; }
  .admin-dashboard-page .table-wrapper th,
  .admin-dashboard-page .table-wrapper td { display:table-cell !important; max-width:none !important; white-space:normal; overflow-wrap:anywhere; }
  .admin-dashboard-page .table-wrapper th:nth-child(1), .admin-dashboard-page .table-wrapper td:nth-child(1) { width:58px; }
  .admin-dashboard-page .table-wrapper th:nth-child(2), .admin-dashboard-page .table-wrapper td:nth-child(2) { width:150px; }
  .admin-dashboard-page .table-wrapper th:nth-child(3), .admin-dashboard-page .table-wrapper td:nth-child(3) { width:210px; }
  .admin-dashboard-page .table-wrapper th:nth-child(4), .admin-dashboard-page .table-wrapper td:nth-child(4) { width:150px; }
  .admin-dashboard-page .table-wrapper th:nth-child(5), .admin-dashboard-page .table-wrapper td:nth-child(5) { width:145px; }
  .admin-dashboard-page .table-wrapper th:nth-child(6), .admin-dashboard-page .table-wrapper td:nth-child(6) { width:110px; }
  .admin-dashboard-page .table-wrapper th:nth-child(7), .admin-dashboard-page .table-wrapper td:nth-child(7) { width:125px; }
  .admin-dashboard-page .table-wrapper td:nth-child(7) .btn {
    display:inline-flex !important;
    width:max-content !important;
    min-width:76px !important;
    max-width:none !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    flex-wrap:nowrap !important;
  }
  .admin-dashboard-page .table-wrapper td::before { content:none !important; }
}
@media (max-width: 380px) {
  .admin-dashboard-page .page-body { padding:10px !important; }
  .admin-dashboard-page .stats-grid { gap:8px !important; }
  .admin-dashboard-page .stats-grid .stat-card { padding:11px 9px !important; }
  .admin-dashboard-page .stats-grid .stat-icon-bg { display:none !important; }
  .admin-dashboard-page .stats-grid .stat-label { padding-right:0; }
}

/* ── 32. LANDSCAPE MODE ──────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto !important; padding: 80px 0 40px !important; }
  .mobile-nav { overflow-y: auto !important; }
}

/* ── 33. SAFE AREA SUPPORT (NOTCHED PHONES) ──────────────────── */
@supports (padding: env(safe-area-inset-left)) {
  .mobile-nav { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── 34. ACCESSIBILITY ────────────────────────────────────────── */
*:focus-visible {
  outline: 3px solid var(--primary-color, #1a365d) !important;
  outline-offset: 2px !important;
}