@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

:root {
    --primary-color: #00C853; --primary-hover: #00A550; --primary-light: rgba(0, 200, 83, 0.12); --bg-color: #F5F5F5;
    --surface-color: #FFFFFF; --text-color: #1A1A1A; --danger-color: #ff3b30;
    --border-color: #e0e0e0; --input-bg: #FFFFFF; --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1); --radius: 10px; --radius-lg: 20px;
}

body.dark-mode {
    --bg-color: #121212; --text-color: #e0e0e0; --surface-color: #1e1e1e; --primary-light: rgba(0, 200, 83, 0.18);
    --border-color: #333; --input-bg: #2c2c2c; --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Tajawal', sans-serif; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
body { background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; }
::selection { background: var(--primary-color); color: #fff; }

:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background-color: color-mix(in srgb, var(--surface-color) 90%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; }
.logo { font-size: 1.5rem; font-weight: 900; color: var(--text-color); display: flex; align-items: center; gap: 8px; }
.logo::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); box-shadow: 0 0 0 4px var(--primary-light); }
.logo span { color: var(--primary-color); }
.theme-btn { background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 50%; width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.25s; color: var(--text-color); }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn:hover { background-color: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); transform: scale(1.08) rotate(8deg); }
.theme-btn:active { transform: scale(0.95); }

/* Buttons */
.btn { padding: 0.7rem 1.4rem; border: none; border-radius: var(--radius); cursor: pointer; font-weight: 700; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; transition: 0.2s ease-in-out; }
.btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: #fff; box-shadow: 0 4px 14px rgba(0, 200, 83, 0.3); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 200, 83, 0.38); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; }
.btn-outline:hover { background-color: var(--primary-color); color: #fff; transform: translateY(-2px); }
.btn-danger { background-color: var(--danger-color); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3); }
.btn-whatsapp { background: linear-gradient(135deg, #25D366, #1DA851); box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
.w-100 { width: 100%; }
.mb-2 { margin-bottom: 10px; }

/* Pages */
.page { display: none; padding: 3rem 5%; animation: fadeIn 0.45s ease-in-out; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.container { max-width: 1200px; margin: 0 auto; }
.header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.text-center { text-align: center; }

/* Home hero */
#home-page { position: relative; overflow: hidden; min-height: 80vh; }
#home-page.active { display: flex; align-items: center; }
#home-page::before, #home-page::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; opacity: 0.5; }
#home-page::before { width: 380px; height: 380px; background: var(--primary-color); top: -120px; inset-inline-end: -100px; opacity: 0.18; }
#home-page::after { width: 300px; height: 300px; background: var(--primary-hover); bottom: -100px; inset-inline-start: -80px; opacity: 0.15; }
.hero-section { position: relative; z-index: 1; text-align: center; max-width: 600px; margin: 0 auto; }
.hero-section h1 { font-size: 3rem; font-weight: 900; margin-bottom: 1rem; color: var(--text-color); }
.hero-section h1 span { color: var(--primary-color); }
.hero-section p { font-size: 1.2rem; margin-bottom: 2rem; color: #666; }
body.dark-mode .hero-section p { color: #aaa; }
.hero-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* Login page */
#login-page { position: relative; overflow: hidden; min-height: 80vh; background: radial-gradient(circle at 15% 20%, var(--primary-light), transparent 45%), radial-gradient(circle at 85% 80%, var(--primary-light), transparent 45%); }
#login-page.active { display: flex; align-items: center; }
#login-page::before, #login-page::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; }
#login-page::before { width: 320px; height: 320px; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); top: -80px; inset-inline-start: -100px; opacity: 0.22; }
#login-page::after { width: 260px; height: 260px; background: var(--primary-hover); bottom: -60px; inset-inline-end: -80px; opacity: 0.18; }

.form-container { position: relative; z-index: 1; max-width: 400px; margin: 5vh auto; background: var(--surface-color); padding: 2.75rem 2.25rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); }
.form-container::before { content: ''; display: block; width: 56px; height: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)); margin: 0 auto 1.5rem; }
.form-container h2 { text-align: center; margin-bottom: 1.5rem; color: var(--primary-color); font-weight: 900; }

/* Forms */
.input-group { margin-bottom: 1.2rem; }
.input-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.92rem; }
.input-group input, .input-group select, .input-group textarea { width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--border-color); border-radius: var(--radius); background-color: var(--input-bg); color: var(--text-color); outline: none; font-size: 0.97rem; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-light); }
.error-msg { color: var(--danger-color); font-size: 0.9rem; margin-bottom: 1rem; display: none; text-align: center; }

.tag-input { border: 1.5px solid var(--border-color); border-radius: var(--radius); padding: 0.6rem; background: var(--input-bg); }
.tag-input:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-light); }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chips:not(:empty) { margin-bottom: 6px; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-light); color: var(--primary-hover); padding: 4px 6px 4px 10px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; }
.tag-chip button { background: rgba(0,0,0,0.08); border: none; color: inherit; cursor: pointer; font-size: 0.9rem; line-height: 1; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tag-chip button:hover { background: var(--danger-color); color: #fff; }
.tag-input input { border: none; outline: none; background: transparent; width: 100%; padding: 0.3rem; font-size: 0.95rem; color: var(--text-color); }

.password-wrapper { position: relative; }
.password-wrapper input { padding-inline-end: 44px; }
.password-toggle { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #888; display: flex; padding: 4px; border-radius: 6px; }
.password-toggle:hover { color: var(--primary-color); }

/* Job filters */
.search-bar-container { display: flex; gap: 1rem; margin-bottom: 1rem; position: sticky; top: 78px; z-index: 90; background: var(--bg-color); padding: 0.75rem 0; }
.search-bar-container input, .pref-select { padding: 0.85rem 1rem; border: 1.5px solid var(--border-color); border-radius: var(--radius); background: var(--surface-color); color: var(--text-color); outline: none; }
.search-bar-container input:focus, .pref-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-light); }
.search-bar-container input { flex: 1; }
.pref-select { width: 200px; }

.admin-search-input { width: 100%; padding: 0.8rem 1rem; border: 1.5px solid var(--border-color); border-radius: var(--radius); background: var(--input-bg); color: var(--text-color); outline: none; margin-bottom: 1rem; }
.admin-search-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--primary-light); }

/* Tabs */
.tabs-container { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border-color); }
.tab-btn { padding: 0.7rem 1.5rem; border: none; background: transparent; color: var(--text-color); font-weight: 700; font-size: 1rem; cursor: pointer; border-radius: 8px 8px 0 0; white-space: nowrap; transition: 0.25s; opacity: 0.6; }
.tab-btn:hover { opacity: 1; }
.tab-btn.active { opacity: 1; color: var(--primary-color); border-bottom: 3px solid var(--primary-color); background: var(--surface-color); }
.sector-tabs .tab-btn { border-radius: 50px; border: 1px solid var(--border-color); background: var(--surface-color); margin-bottom: 0.5rem; }
.sector-tabs .tab-btn.active { background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: #fff !important; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3); }
.sector-tabs { border-bottom: none; }

.admin-tab-content { display: none; animation: fadeIn 0.3s; }
.admin-tab-content.active { display: block; }

/* Job cards */
.full-width-list, .jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.job-card, .admin-card { background: var(--surface-color); padding: 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.job-card { position: relative; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.job-card::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)); transform: scaleX(0); transform-origin: right; transition: transform 0.3s; }
.job-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-color); }
.job-card:hover::before { transform: scaleX(1); }
.job-card h3 { color: var(--text-color); margin-bottom: 0.3rem; font-size: 1.25rem; }
.job-company, .modal-company { color: var(--primary-hover); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.7rem; }
.job-card .btn { margin-top: auto; }
.badge { font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: 6px; font-weight: 700; }
.badge-primary { background: var(--primary-light); color: var(--primary-hover); border: 1px solid var(--primary-color); }
.badge-secondary { background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); }

/* Skeleton loading */
.skeleton-card { pointer-events: none; }
.skeleton { position: relative; overflow: hidden; background: var(--border-color); border-radius: 6px; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation: shimmer 1.4s infinite; }
body.dark-mode .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-title { height: 22px; width: 70%; margin-bottom: 14px; }
.skeleton-badge { height: 16px; width: 45%; margin-bottom: 20px; }
.skeleton-btn { height: 42px; width: 100%; margin-top: auto; }

/* Empty state */
.empty-state { grid-column: 1 / -1; text-align: center; padding: 3.5rem 1rem; color: #888; }
.empty-state svg { width: 56px; height: 56px; margin-bottom: 1rem; color: var(--border-color); }
.empty-state p { font-size: 1.05rem; }

.text-link { color: var(--primary-color); text-decoration: underline; cursor: pointer; font-weight: bold; transition: 0.2s; }
.text-link:hover { color: var(--primary-hover); }

/* Admin */
.admin-card h3 { margin-bottom: 1.5rem; color: var(--primary-hover); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 1rem; text-align: right; border-bottom: 1px solid var(--border-color); }
.admin-table th { background-color: var(--bg-color); color: var(--primary-hover); }
.admin-table tbody tr { transition: background-color 0.2s; }
.admin-table tbody tr:hover { background-color: var(--primary-light); }
.users-list { list-style: none; }
.users-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0.4rem; border-bottom: 1px solid var(--border-color); font-weight: 500; border-radius: 8px; transition: background-color 0.2s; }
.users-list li:hover { background-color: var(--primary-light); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat-card { background: var(--surface-color); padding: 1.5rem; border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border-color); transition: transform 0.25s, box-shadow 0.25s; }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat-card h3 { font-size: 1rem; color: #666; margin-bottom: 0.5rem; }
body.dark-mode .stat-card h3 { color: #999; }
.stat-card h2 { font-size: 2.5rem; color: var(--primary-color); font-weight: 900; }
.user-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Modals */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease; }
.modal-content { background: var(--surface-color); padding: 2.5rem; border-radius: var(--radius-lg); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; position: relative; animation: modalPop 0.25s ease; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
@keyframes modalPop { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.close-btn { position: absolute; top: 15px; left: 15px; font-size: 1.8rem; cursor: pointer; color: var(--text-color); opacity: 0.6; line-height: 1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s; }
.close-btn:hover { opacity: 1; color: #fff; background: var(--danger-color); }
.modal-tags { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.modal-body { margin-bottom: 1.5rem; white-space: pre-wrap; color: #555; }
body.dark-mode .modal-body { color: #ccc; }
.profile-content { text-align: center; }
.profile-header-icon { width: 76px; height: 76px; margin: 0 auto 1rem; border-radius: 50%; background: var(--primary-light); color: var(--primary-color); display: flex; align-items: center; justify-content: center; }
.profile-header-icon svg { width: 36px; height: 36px; }
.profile-details-grid p { margin-bottom: 8px; font-size: 1.1rem; text-align: right;}
.text-right { text-align: right; }
.hidden { display: none !important; }

/* Confirm modal */
.confirm-content { max-width: 400px; text-align: center; }
.confirm-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: rgba(255, 59, 48, 0.12); color: var(--danger-color); display: flex; align-items: center; justify-content: center; }
.confirm-message { color: #666; margin: 0.75rem 0 1.5rem; }
body.dark-mode .confirm-message { color: #aaa; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; }

/* Toasts & loader */
#toast-container { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast { background: var(--text-color); color: var(--surface-color); padding: 12px 20px; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-weight: 500; opacity: 0; transform: translateX(50px); animation: slideIn 0.3s forwards; }
.toast.success { background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: #fff; }
.toast.error { background: var(--danger-color); color: #fff; }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
.loader-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.7); z-index: 10000; display: flex; justify-content: center; align-items: center; }
body.dark-mode .loader-overlay { background: rgba(0,0,0,0.7); }
.spinner { width: 46px; height: 46px; border: 4px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
    .user-form-grid { grid-template-columns: 1fr; }
    .search-bar-container { flex-direction: column; top: 70px; }
    .pref-select { width: 100%; }
    .hero-section h1 { font-size: 2.1rem; }
    .full-width-list, .jobs-grid { grid-template-columns: 1fr; }
    .confirm-actions { flex-direction: column-reverse; }
}