/* =========================================================================
   THEME: FOCUSED (F) — HIGH-LEGIBILITY ACCESSIBLE THEME
   Tailored specifically for older staff and non-tech-savvy workers
   Maximum contrast, clean typography, bold borders, zero clutter
   ========================================================================= */

body.theme-focused {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --border-color: #cbd5e1;
    --border-highlight: #059669;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --accent-emerald: #059669;
    --accent-emerald-dark: #065f46;
    --accent-sky: #0284c7;
    --accent-amber: #d97706;
    
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

body.theme-focused *,
body.theme-focused input,
body.theme-focused button,
body.theme-focused select,
body.theme-focused textarea,
body.theme-focused span,
body.theme-focused div,
body.theme-focused strong,
body.theme-focused b {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Sidebar in FOCUSED mode — High-Contrast Dark Navy (#0B1021) */
body.theme-focused #sidebar,
body.theme-focused aside.sidebar,
body.theme-focused .sidebar {
    background-color: #0b1021 !important;
    border-right: 1px solid #161f33 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}

body.theme-focused #sidebar-header,
body.theme-focused .sidebar-header {
    background-color: #0b1021 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

body.theme-focused #sidebar .sidebar-header .text-slate-900,
body.theme-focused .sidebar .sidebar-header .text-slate-900,
body.theme-focused .sidebar [class*="text-slate-900"],
body.theme-focused .sidebar .sidebar-brand-title {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
}

/* Header Agency Logo Circle */
body.theme-focused #sidebar .sidebar-header .rounded-full,
body.theme-focused .sidebar .sidebar-header .rounded-full {
    border-color: rgba(34, 211, 238, 0.3) !important;
    background: #10192e !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.2) !important;
}

/* License Badge in FOCUSED mode: Soft Cyan Background with Dark Text & Neon Glow */
body.theme-focused #sidebar .text-emerald-800,
body.theme-focused #sidebar [class*="bg-emerald-100"],
body.theme-focused .sidebar .text-emerald-800,
body.theme-focused .sidebar [class*="bg-emerald-100"],
body.theme-focused .sidebar span:contains("RL - 680") {
    background-color: #22d3ee !important;
    color: #082f49 !important;
    border: 1px solid #67e8f9 !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.5) !important;
}

body.theme-focused #sidebar .sidebar-header .bg-emerald-500,
body.theme-focused .sidebar .sidebar-header .bg-emerald-500 {
    background-color: #10b981 !important;
    box-shadow: 0 0 8px #10b981 !important;
}

/* Section Header Labels ("CORE SYSTEM" & "EXTERNAL PORTALS HUB") */
body.theme-focused #sidebar .nav-group-label,
body.theme-focused #sidebar [data-i18n="nav_core_system"],
body.theme-focused #sidebar .text-slate-400,
body.theme-focused .sidebar .nav-group-label,
body.theme-focused .sidebar [data-i18n="nav_core_system"],
body.theme-focused .sidebar .text-slate-400 {
    color: #64748b !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
}

/* Inactive Navigation Items: Translucent Dark Slate with Crisp White Text */
body.theme-focused #sidebar .main-tab-btn,
body.theme-focused .sidebar .main-tab-btn {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: #161f33 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

body.theme-focused #sidebar .main-tab-btn span,
body.theme-focused #sidebar .main-tab-btn div,
body.theme-focused #sidebar .main-tab-btn [class*="text-slate-"],
body.theme-focused .sidebar .main-tab-btn span,
body.theme-focused .sidebar .main-tab-btn div,
body.theme-focused .sidebar .main-tab-btn [class*="text-slate-"] {
    color: #ffffff !important;
    font-weight: 700 !important;
}

body.theme-focused #sidebar .main-tab-btn svg,
body.theme-focused #sidebar .main-tab-btn svg.text-slate-400,
body.theme-focused .sidebar .main-tab-btn svg,
body.theme-focused .sidebar .main-tab-btn svg.text-slate-400 {
    color: #cbd5e1 !important;
    stroke-width: 2.2 !important;
}

body.theme-focused #sidebar .main-tab-btn:hover,
body.theme-focused .sidebar .main-tab-btn:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    transform: translateX(3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.theme-focused #sidebar .main-tab-btn:hover span,
body.theme-focused #sidebar .main-tab-btn:hover svg,
body.theme-focused .sidebar .main-tab-btn:hover span,
body.theme-focused .sidebar .main-tab-btn:hover svg {
    color: #ffffff !important;
}

/* Active Navigation Item: Radiant Vibrant Orange Gradient with Bold Solid White Text & Glowing Green Dot */
body.theme-focused #sidebar .main-tab-btn.active,
body.theme-focused .sidebar .main-tab-btn.active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    font-weight: 900 !important;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.theme-focused #sidebar .main-tab-btn.active svg,
body.theme-focused .sidebar .main-tab-btn.active svg {
    color: #ffffff !important;
    stroke-width: 2.5 !important;
}

body.theme-focused #sidebar .main-tab-btn.active span,
body.theme-focused .sidebar .main-tab-btn.active span {
    color: #ffffff !important;
}

body.theme-focused #sidebar .main-tab-btn.active .bg-emerald-400,
body.theme-focused #sidebar .main-tab-btn.active span[class*="bg-emerald-400"],
body.theme-focused .sidebar .main-tab-btn.active .bg-emerald-400,
body.theme-focused .sidebar .main-tab-btn.active span[class*="bg-emerald-400"] {
    background-color: #10b981 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.9) !important;
}

/* External Portals Hub (Bottom Section) in FOCUSED mode */
body.theme-focused .sidebar .space-y-2\.5 a,
body.theme-focused .sidebar a[onclick*="launchExternalPortal"] {
    background-color: #161f33 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"]:hover {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .text-slate-800 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .text-emerald-600 {
    color: #34d399 !important;
    font-weight: 700 !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .text-blue-600 {
    color: #60a5fa !important;
    font-weight: 700 !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .text-purple-600 {
    color: #c084fc !important;
    font-weight: 700 !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .text-amber-600 {
    color: #fb923c !important;
    font-weight: 700 !important;
}

/* Portal Letter Avatars with Glowing Circular Badges */
body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .bg-emerald-50 {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border: 1.5px solid #34d399 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.45) !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .bg-blue-50 {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: 1.5px solid #60a5fa !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.45) !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .bg-purple-50 {
    background-color: #a855f7 !important;
    color: #ffffff !important;
    border: 1.5px solid #c084fc !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.45) !important;
}

body.theme-focused .sidebar a[onclick*="launchExternalPortal"] .bg-amber-50 {
    background-color: #f97316 !important;
    color: #ffffff !important;
    border: 1.5px solid #fb923c !important;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.45) !important;
}

/* Header in FOCUSED mode — Clean Crisp White with border */
body.theme-focused header,
body.theme-focused .header {
    background-color: #ffffff !important;
    border-bottom: 2px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body.theme-focused .header-controls-capsule {
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

body.theme-focused .header-glass-pill {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Clean Worker Search Cards in FOCUSED mode */
body.theme-focused .clean-worker-search-card {
    background-color: #ffffff !important;
    border: 2px solid rgba(203, 213, 225, 0.95) !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06) !important;
}

body.theme-focused .clean-worker-search-card:hover {
    border-color: #059669 !important;
    box-shadow: 0 12px 30px -4px rgba(5, 150, 105, 0.12) !important;
}

/* Form Inputs & Controls in FOCUSED mode */
body.theme-focused input[type="text"],
body.theme-focused input[type="search"],
body.theme-focused input[type="password"],
body.theme-focused input[type="number"],
body.theme-focused input[type="date"],
body.theme-focused input[type="tel"],
body.theme-focused select,
body.theme-focused textarea {
    background-color: #ffffff !important;
    border: 2px solid #94a3b8 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}

/* Remove all placeholder text in FOCUSED mode to avoid worker confusion */
body.theme-focused input::placeholder,
body.theme-focused textarea::placeholder,
body.theme-focused select::placeholder,
body.theme-focused ::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

body.theme-focused input:focus,
body.theme-focused select:focus,
body.theme-focused textarea:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.2) !important;
    outline: none !important;
}

/* Modern Pill Search Bar in FOCUSED mode: Clean, seamless, zero inner green boxes or borders */
body.theme-focused .modern-pill-search-card {
    background: linear-gradient(115deg, #42c8f5 0%, #5cbcf7 28%, #85b0fb 50%, #b29afc 75%, #df8af6 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 12px 32px -6px rgba(56, 189, 248, 0.35), 0 4px 16px rgba(168, 85, 247, 0.2) !important;
}

body.theme-focused .modern-pill-search-wrapper {
    background: linear-gradient(180deg, #f2f6fc 0%, #e6effa 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 14px 28px -6px rgba(100, 116, 139, 0.28), 
                inset 0 2px 4px rgba(255, 255, 255, 0.95), 
                inset 0 -2px 5px rgba(148, 163, 184, 0.22) !important;
}

body.theme-focused .modern-pill-search-wrapper:focus-within {
    box-shadow: 0 18px 36px -4px rgba(59, 130, 246, 0.35), 
                0 0 0 3px rgba(96, 165, 250, 0.45), 
                inset 0 2px 4px rgba(255, 255, 255, 0.95) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0f5fc 100%) !important;
}

body.theme-focused .modern-pill-search-input,
body.theme-focused #universal-search-input,
body.theme-focused .modern-pill-search-input:focus,
body.theme-focused #universal-search-input:focus,
body.theme-focused .modern-pill-search-input:active,
body.theme-focused #universal-search-input:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 9999px !important;
    color: #1e293b !important;
}

body.theme-focused .modern-pill-search-input::placeholder,
body.theme-focused #universal-search-input::placeholder {
    color: #64748b !important;
    opacity: 0.95 !important;
}

/* Next-Up Target Guidance State in FOCUSED mode */
body.theme-focused .field-next-up,
body.theme-focused input.field-next-up,
body.theme-focused select.field-next-up,
body.theme-focused textarea.field-next-up {
    background-color: #fefce8 !important;
    border: 2.5px dashed #d97706 !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22) !important;
    color: #0f172a !important;
}

body.theme-focused .next-up-badge {
    background: #fef08a !important;
    color: #78350f !important;
    border: 1.5px solid #f59e0b !important;
    font-weight: 900 !important;
    font-size: 11px !important;
}



/* Buttons in FOCUSED mode */
body.theme-focused button {
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

/* Badges & Status in FOCUSED mode */
body.theme-focused .status-badge-fit {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 2px solid #059669 !important;
    font-weight: 900 !important;
}

body.theme-focused .status-badge-unfit {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 2px solid #dc2626 !important;
    font-weight: 900 !important;
}

body.theme-focused .status-badge-pending {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 2px solid #d97706 !important;
    font-weight: 900 !important;
}

/* Zoom Container Styling */
.header-zoom-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid #cbd5e1;
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.header-zoom-control button {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.header-zoom-control button:hover {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

.header-zoom-control input[type="range"] {
    width: 80px;
    height: 6px;
    cursor: pointer;
    accent-color: #059669;
}

.header-zoom-control .zoom-label {
    font-family: monospace;
    font-weight: 800;
    font-size: 13px;
    color: #065f46;
    min-width: 42px;
    text-align: center;
}

.header-zoom-control .zoom-reset-btn {
    font-size: 11px;
    padding: 2px 6px;
    width: auto;
    height: 22px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
}

/* =========================================================================
   THEME-SPECIFIC DASHBOARD AND SEARCH CARD VISIBILITY RULES
   ========================================================================= */

/* Default (Classic Green & Neumorphic): Clean cards hidden, standard view visible */
#clean-search-cards-container {
    display: none;
}

/* FOCUSED Theme: Hide Live Metrics Cards and verbose table, show clean 3-line cards */
body.theme-focused #dash-metrics-section,
body.theme-focused [data-purpose="metrics-dashboard"] {
    display: none !important;
}

body.theme-focused #clean-search-cards-container {
    display: block !important;
}

body.theme-focused [data-purpose="visa-record"],
body.theme-focused #visa-passenger-assignments,
body.theme-focused [data-purpose="passenger-information-hub"] {
    display: none !important;
}

/* In FOCUSED theme, order Search Box at the top, then 4 Big Action Buttons below */
body.theme-focused #view-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

body.theme-focused #view-dashboard > [data-purpose="search-worker"] {
    order: 1 !important;
}

body.theme-focused #view-dashboard > [data-purpose="quick-entry-hub"] {
    order: 2 !important;
}

body.theme-focused #search-prompt-state,
body.theme-focused #view-dashboard > #search-prompt-state {
    display: none !important;
}

body.theme-focused #view-dashboard > #search-results-area {
    order: 3 !important;
}