/* JobMap Pro - Stylesheet - Modern Cartoon Dark Mode */
/* تم توحيد الشادو في هذا الملف حسب الطلب */

:root {
    --bg-color: #191919;
    --bg-secondary: #151515;
    --card-color: #0f0f0f;
    --accent-primary: #e9e9e9;
    --accent-secondary: #e9e9e9;
    --accent-ind: #e9e9e9;
    --accent-bus: #e9e9e9;
    --border-color: #000000;
    --border-highlight: #e9e9e9;
    --text-main: #e9e9e9;
    --text-sec: #b1b1b1;
    --danger: #ff6b6b;
    --success: #e9e9e9;
    --warning: #e0f000;
    --nav-height: 80px;
    --border-radius: 18px;

    /* ========== إعدادات الشادو الموحد ========== */
    /* يمكنك تعديل الأرقام هنا لتنعكس على البطاقات والعناصر العامة */
    --shadow: 0 1px 4px rgba(43, 43, 43, 0.559);

    --shadow-glow: 0 0 10px rgba(98, 129, 65, 0);

    /* ========== إعدادات الشعار ========== */
    --logo-size-login: 60px;
    --logo-size-header: 32px;
    --logo-font: 'Poppins', sans-serif;
    --logo-weight: 900;
    --logo-spacing: -2px;
    --logo-color: #dedede;
    --logo-stroke: #242424;
    --logo-glow: #333532;
    --logo-stroke-width: 7px;
    --logo-glow-width: 8px;
    --logo-glow-opacity: 0.0;

    /* ========== إعدادات أيقونات البار السفلي ========== */
    --nav-icon-stroke: 0px;
    --nav-icon-stroke-active: 1.5px;
}

/* ========== الشعار النصي ========== */
.logo-text {
    font-family: var(--logo-font);
    font-weight: var(--logo-weight);
    color: var(--logo-color);
    letter-spacing: var(--logo-spacing);
    text-align: center;

    /* الحواف السوداء */
    -webkit-text-stroke: var(--logo-stroke-width) var(--logo-stroke);
    paint-order: stroke fill;

    /* إعدادات المحفور + الشادو الخاص بك */
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.9),
        /* ⬅️ ظل علوي غامق (يصنع عمق الحفر) */
        0 1px 1px rgba(255, 255, 255, 0.1),
        /* ⬅️ إضاءة سفلية خافتة (حافة الحفر) */

        /* التوهج القديم (اختياري) */
        0 0 var(--logo-glow-width) rgba(111, 174, 74, var(--logo-glow-opacity)),

        /* الشادو العام الذي أضفته سابقاً */
        0 1px 1px rgba(43, 43, 43, 0.828);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo-login {
    font-size: var(--logo-size-login);
}

.logo-header {
    font-size: var(--logo-size-header);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-main);
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    z-index: 6000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-box {
    width: 100%;
    max-width: 380px;
    text-align: center;
    background: var(--card-color);
    padding: 30px;
    border-radius: 24px;
    border: 2px solid var(--border-color);

    /* الشادو الموحد لصندوق الدخول */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

.remember-me-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--text-sec);
    font-size: 14px;
    margin: 10px 0;
    cursor: pointer;
}

.remember-me-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

header {
    background-color: #131313;
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    z-index: 2500;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    /* الشادو الموحد للهيدر */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

header h3 {
    color: var(--text-main);
    font-weight: 700;
    margin: 0;
    font-size: 20px;
}

#content-area {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 80px;
    overflow: hidden;
    z-index: 1;
}

.page-section {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.page-section.active {
    display: block;
}

.scollable-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    padding-bottom: 30px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.card {
    background: var(--card-color);
    padding: 18px;
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    border: 2px solid var(--border-color);

    /* يستخدم المتغير العام الذي يحتوي نفس القيم */
    box-shadow: var(--shadow);

    transition: all 0.3s ease;
}

.card:active {
    transform: translateY(2px);
    border-color: var(--accent-primary);
}

.form-input {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-main);
    font-family: 'Cairo';
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    transition: all 0.3s ease;

    /* الشادو الموحد لحقول الإدخال */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(92, 225, 196, 0.024);
}

.form-input::placeholder {
    color: var(--text-sec);
}

.chat-input-field {
    font-size: 16px !important;
    transform: none !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    font-size: 16px !important;
}

.save-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: var(--accent-primary);
    color: #0d1117;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Cairo';
    margin-top: 10px;
    transition: all 0.2s ease;

    /* الشادو الموحد للأزرار */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

.save-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 10px rgba(92, 225, 197, 0.2);
}

.save-btn:hover {
    background: var(--accent-secondary);
}

.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.skill-tag {
    background: var(--bg-secondary);
    color: var(--accent-primary);
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    font-weight: 500;
}

.skill-tag i {
    cursor: pointer;
    color: var(--danger);
}

.add-skill-box {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.add-skill-btn {
    background: var(--accent-primary);
    border: none;
    width: 50px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 22px;
    color: #0d1117;
    transition: all 0.2s ease;

    /* الشادو الموحد لزر الإضافة */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

.add-skill-btn:active {
    transform: scale(0.95);
}

.file-upload-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}

.file-upload-btn {
    border: 2px dashed #444;
    color: #888;
    background: #222;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
}

.file-upload-wrapper input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-selected-text {
    color: var(--accent-ind);
    font-weight: bold;
    margin-top: 5px;
    font-size: 12px;
    display: block;
}

#map-individual,
#map-picker {
    width: 100%;
    border-radius: 12px;
}

#map-individual {
    height: 100%;
    background: #1a1a1a;
}

.map-tiles-lighter {
    filter: brightness(1.8) contrast(0.96);
}

#map-picker {
    height: 200px;
    margin-top: 10px;
    border: 2px solid #444;
    background: #1a1a1a;
}

.locate-me-btn {
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 56px;
    height: 56px;
    background-color: var(--card-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--accent-primary);
    z-index: 999;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;

    /* الشادو الموحد لزر الموقع */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

.locate-me-btn:active {
    transform: scale(0.95);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.popup-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--card-color);
    padding: 25px 20px;
    padding-bottom: 100px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    border-top: 2px solid var(--border-color);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

.popup-modal.show {
    transform: translateY(0);
}

#candidate-full-modal,
#chat-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    z-index: 5000;
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.chat-header {
    padding: 15px 20px;
    background: var(--card-color);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 15px;

    /* الشادو الموحد لهيدر الشات */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-color);
}

.chat-input-area {
    padding: 12px 15px;
    background: var(--card-color);
    border-top: 2px solid var(--border-color);
}

.chat-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 25px;
    padding: 5px 5px 5px 15px;
    width: 100%;
}

.chat-input-wrapper .chat-input-field {
    flex: 1;
    border: none;
    background: transparent;
    margin: 0;
    padding: 10px 0;
    font-size: 16px;
}

.chat-input-wrapper .chat-input-field:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.send-btn-inside {
    background: var(--accent-primary);
    color: #0d1117;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-btn-inside:active {
    transform: scale(0.95);
}

.send-btn-inside i {
    font-size: 16px;
}

.message-bubble {
    max-width: 75%;
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 14px;
}

.msg-me {
    align-self: flex-end;
    background: var(--accent-primary);
    color: #0d1117;
    font-weight: 500;
}

.msg-other {
    align-self: flex-start;
    background-color: var(--bg-secondary);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

/* ========== البار السفلي (Nav) ========== */
nav {
    background-color: #131313;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 2000;

    /* الشادو الموحد للبار السفلي */
    /* جعلت القيمة -1px ليرتفع الظل للأعلى ويصبح مرئياً */
    box-shadow: 0 -1px 4px rgba(43, 43, 43, 0.828);
}

nav button {
    background: none;
    border: none;
    color: var(--text-sec);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    cursor: pointer;
    padding: 10px 0;
    transition: color 0.2s ease;
}

nav button i {
    font-size: 22px;
    margin-bottom: 5px;
    transition: all 0.2s ease;
    -webkit-text-stroke: var(--nav-icon-stroke, 0px) #000;
    paint-order: stroke fill;

    /* الشادو الموحد لأيقونات البار السفلي */
    filter: drop-shadow(0 1px 4px rgba(43, 43, 43, 0.828));
}

nav button span {
    font-size: 11px;
    font-weight: 600;
}

nav button.active-btn {
    color: var(--accent-primary);
}

nav button.active-btn i {
    color: var(--accent-primary);
    -webkit-text-stroke: var(--nav-icon-stroke-active, 1px) #000;
}

.fab-add {
    position: absolute;
    bottom: 25px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--accent-primary);
    color: #0d1117;
    border: none;
    font-size: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;

    /* الشادو الموحد لزر الإضافة العائم */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

.fab-add:active {
    transform: scale(0.95);
    box-shadow: 0 2px 15px rgba(92, 225, 197, 0.3);
}

#profile-avatar {
    width: 80px;
    height: 80px;
    background: #333;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.empty-state {
    text-align: center;
    color: #666;
    padding: 40px 20px;
}

.status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.status-pending {
    background: rgba(240, 180, 41, 0.15);
    color: #eeae00;
}

.status-accepted {
    background: rgba(92, 225, 197, 0.15);
    color: var(--accent-primary);
}

.status-rejected {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
}

.location-btn {
    background: var(--accent-primary);
    color: #0d1117;
    border: none;
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Cairo';
    font-weight: bold;
    flex: 1;
    transition: all 0.2s ease;
}

.chat-btn {
    background: var(--bg-secondary);
    color: var(--accent-primary);
    border: 2px solid var(--border-color);
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Cairo';
    font-weight: bold;
    flex: 1;
    transition: all 0.2s ease;
}

.account-type-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 600;
    background: rgba(92, 225, 197, 0.15);
    color: var(--accent-primary);
}

.phone-link {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--success);
    color: white;
    padding: 12px 15px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s;
}

.phone-link:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.phone-link i {
    font-size: 18px;
}

.call-btn {
    background: var(--success);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cairo';
    font-weight: bold;
    flex: 1;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.card:active {
    background: #252525;
}

select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 35px;
}

textarea.form-input {
    resize: none;
}

.leaflet-container {
    background: #1a1a1a;
}

@media (hover: hover) {
    .card:hover {
        border-color: #444;
    }

    .save-btn:hover {
        opacity: 0.9;
    }

    .fab-add:hover {
        transform: scale(1.05);
    }

    .locate-me-btn:hover {
        background-color: #2a2a2a;
    }

    .phone-link:hover {
        opacity: 0.9;
    }
}

@media (max-width: 360px) {
    .form-input {
        padding: 10px;
        font-size: 16px;
    }

    .save-btn {
        padding: 10px;
        font-size: 14px;
    }

    nav button i {
        font-size: 20px;
    }

    nav button span {
        font-size: 10px;
    }
}

.select-mode-btn {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-sec);
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.select-mode-btn i {
    font-size: 16px;
}

.select-mode-btn.active {
    background: rgba(98, 129, 65, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.ind-select-btn.active {
    background: rgba(98, 129, 65, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.selection-toolbar {
    background: var(--card-color);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px 18px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* الشادو الموحد لشريط التحديد */
    box-shadow: 0 1px 4px rgba(43, 43, 43, 0.828);
}

.delete-selected-btn {
    background: var(--danger);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Cairo';
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
}

.delete-selected-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.delete-selected-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox .checkmark {
    height: 26px;
    width: 26px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.custom-checkbox:hover .checkmark {
    border-color: var(--accent-primary);
}

.custom-checkbox input:checked~.checkmark {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 9px;
    top: 4px;
    width: 7px;
    height: 12px;
    border: solid #0d1117;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.card-selectable {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.card-selectable .card-checkbox {
    padding-top: 5px;
}

.card-selectable .card-content {
    flex: 1;
}

.card.selected {
    border-color: var(--accent-primary);
    background: rgba(96, 153, 102, 0.08);
}

.card.selected-ind {
    border-color: var(--accent-primary);
    background: rgba(96, 153, 102, 0.08);
}

.ind-checkbox .checkmark {
    border-color: var(--border-color);
}

.ind-checkbox:hover .checkmark {
    border-color: var(--accent-primary);
}

.ind-checkbox input:checked~.checkmark {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}