/* ═══════════════════════════════════════════════════════
   map-scale-fix.css
   إصلاح حجم عناصر الواجهة على الشاشات المختلفة
   للصفحات التي تعتمد على الخريطة (home, contribute, contribute-gps, profile, route-edit)
   ═══════════════════════════════════════════════════════ */

/* ═══ 1. شاشات اللابتوب العادية (1024px - 1599px) ═══ 
   (هذا الجزء هو الذي سيحل مشكلتك على شاشة Dell 15.6) 
   المقاسات هنا مصغرة بحوالي 20-25% من الحجم الافتراضي
*/
@media (min-width: 1024px) and (max-width: 1599px) {
    /* Search Widget */
    .search-widget { width: 340px !important; }
    .search-header-text { font-size: 15px !important; }
    .search-header-icon { width: 34px !important; height: 34px !important; font-size: 13px !important; }
    .search-input-row { padding: 9px 11px !important; gap: 9px !important; margin-bottom: 8px !important; }
    .search-input-text, .search-input-field { font-size: 12px !important; }
    .search-dot { width: 11px !important; height: 11px !important; }
    .search-btn { padding: 11px !important; font-size: 13px !important; }
    .search-header { padding: 12px 16px 8px !important; }
    .search-body { padding: 0 16px 12px !important; }
    .collapse-btn { width: 28px !important; height: 28px !important; font-size: 11px !important; }

    .map-controls.shifted { right: 360px !important; }
    .map-style-popup.shifted { right: 415px !important; }

    /* Mini bar */
    .search-mini { height: 42px !important; max-width: 480px !important; }
    .mini-input { font-size: 11px !important; }
    .mini-search-btn { height: 30px !important; padding: 0 12px !important; font-size: 11px !important; }
    .expand-btn { width: 30px !important; height: 30px !important; font-size: 11px !important; }

    /* Top Controls */
    .ctrl-pill { height: 36px !important; padding: 0 12px !important; font-size: 11px !important; }
    .user-pill { height: 36px !important; }
    .user-pill-avatar { width: 28px !important; height: 28px !important; }
    .user-pill-name { font-size: 11px !important; }
    .user-pill-points { font-size: 9px !important; }
    .user-dropdown { min-width: 180px !important; }
    .dropdown-header .name { font-size: 13px !important; }
    .dropdown-header .points { font-size: 11px !important; }
    .dropdown-item { padding: 10px 14px !important; font-size: 12px !important; }

    /* Map Controls */
    .map-ctrl-btn { width: 36px !important; height: 36px !important; font-size: 13px !important; }
    .logo-float img { width: 34px !important; height: 34px !important; }

    /* Results Panel */
    .results-panel { width: 340px !important; }
    .rp-title { font-size: 14px !important; }
    .rp-close { width: 28px !important; height: 28px !important; font-size: 13px !important; }
    .rp-trip-summary { font-size: 11px !important; padding: 7px 9px !important; }
    .sort-tab { padding: 6px 4px !important; font-size: 10px !important; }
    .rc { padding: 12px 16px !important; }
    .rc-rank { width: 20px !important; height: 20px !important; font-size: 10px !important; }
    .rc-badge { font-size: 9px !important; padding: 2px 6px !important; }
    .rc-cost { font-size: 13px !important; }
    .rc-chip { font-size: 10px !important; padding: 3px 6px !important; }
    .rc-step { font-size: 11px !important; }

    /* ════ إضافات صفحة "ساهم معنا" (Contribute Page) ════ */
    .draw-panel { width: 288px !important; }
    .pill { height: 36px !important; padding: 0 12px !important; font-size: 11px !important; }
    .fab { width: 52px !important; height: 52px !important; font-size: 20px !important; }
    .fab-option { padding: 11px 17px !important; font-size: 11px !important; }
    .map-ctrl { width: 36px !important; height: 36px !important; font-size: 13px !important; }
    .map-style-btn { width: 36px !important; height: 36px !important; font-size: 14px !important; }
    .draw-panel-title { font-size: 14px !important; }
    .draw-hint { font-size: 11px !important; padding: 11px 16px !important; }
    .station-number { width: 24px !important; height: 24px !important; font-size: 11px !important; }
    .station-name { font-size: 11px !important; }
    .btn-submit { padding: 11px !important; font-size: 13px !important; }
    .rec-status { padding: 12px 18px !important; }
    .rec-timer { font-size: 22px !important; }
    .rec-stat-value { font-size: 19px !important; }
    .overlay-toggle { padding: 9px 20px !important; font-size: 13px !important; }

    /* Modals */
    .modal { max-width: 340px !important; }
    .modal-header h2 { font-size: 18px !important; }
    .modal-header p { font-size: 12px !important; }
    .modal-header { padding: 20px 18px !important; }
    .modal-body { padding: 18px !important; }
    .form-group label { font-size: 12px !important; }
    .form-group input, .form-group select { padding: 10px 12px !important; font-size: 13px !important; }
    .modal-submit-btn { padding: 11px !important; font-size: 13px !important; }
    .pin-input { width: 36px !important; height: 44px !important; font-size: 18px !important; }

    /* Report modal */
    .report-modal { max-width: 360px !important; }
    .rpt-head h2 { font-size: 16px !important; }
    .rpt-cat { font-size: 10px !important; padding: 4px 8px !important; }
    .rpt-textarea { font-size: 12px !important; }

    /* Toast */
    .toast { font-size: 12px !important; padding: 10px 18px !important; }

    /* Contribute invite modal */
    .invite-benefit { padding: 8px !important; }
    .benefit-icon { width: 34px !important; height: 34px !important; font-size: 18px !important; }
    .benefit-text strong { font-size: 12px !important; }
    .benefit-text span { font-size: 10px !important; }

    /* Favorites */
    .fav-chip { font-size: 10px !important; padding: 4px 8px !important; }
    .fav-route { padding: 6px 8px !important; }
    .fav-route-icon { width: 26px !important; height: 26px !important; font-size: 11px !important; }
    .fav-route-name { font-size: 11px !important; }

    /* Autocomplete */
    .autocomplete-item { padding: 8px 10px !important; font-size: 11px !important; }

    /* Navigation overlay */
    .nav-card-main { padding: 14px !important; min-height: 68px !important; }
    .nav-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; }
    .nav-text-main { font-size: 14px !important; }
    .nav-text-sub { font-size: 10px !important; }
    .nav-distance-badge { font-size: 18px !important; }
    .nav-stat-val { font-size: 18px !important; }
    .nav-stat-lbl { font-size: 8px !important; }
    .nav-start-btn { padding: 10px !important; font-size: 13px !important; }

    /* ════ 3. إضافات صفحة "حسابي / البروفايل" ════ */
    /* تصغير عرض الحاويات الأساسية من 700px إلى 560px (تقريباً 80%) */
    .nav-inner, .hero, .tabs-wrap, .content-wrap { max-width: 560px !important; }
    
    /* تصغير بطاقة المستخدم (Hero) */
    .hero-bg { height: 72px !important; }
    .hero-avatar { width: 60px !important; height: 60px !important; margin-top: -30px !important; font-size: 24px !important; }
    .hero-name { font-size: 18px !important; }
    .hero-role { font-size: 11px !important; padding: 2px 10px !important; }
    .h-stat { padding: 14px 6px !important; }
    .h-stat-val { font-size: 20px !important; }
    .h-stat-lbl { font-size: 10px !important; }

    /* تصغير التبويبات (Tabs) */
    .tab { padding: 8px 0 !important; font-size: 12px !important; }
    .tab i { font-size: 11px !important; }

    /* تصغير الكروت الداخلية (Cards) */
    .card { padding: 16px !important; }
    .card-title { font-size: 13px !important; margin-bottom: 12px !important; }
    .card-title i { font-size: 12px !important; }
    .form-group label { font-size: 11px !important; margin-bottom: 4px !important; }
    .form-input { padding: 10px 12px !important; font-size: 13px !important; }
    .btn { padding: 10px 16px !important; font-size: 12px !important; }

    /* الإنجازات (Achievements) */
    .ach { padding: 12px 6px 8px !important; }
    .ach-icon { font-size: 24px !important; }
    .ach-name { font-size: 10px !important; }

    /* المتصدرون (Leaderboard) */
    .lb-month-select { padding: 6px 10px !important; font-size: 11px !important; min-width: 120px !important; }
    .lb-countdown { font-size: 10px !important; }
    .pod-avatar { width: 38px !important; height: 38px !important; font-size: 14px !important; }
    .pod-1 .pod-avatar { width: 48px !important; height: 48px !important; font-size: 18px !important; }
    .pod-rank { width: 20px !important; height: 20px !important; font-size: 9px !important; margin-top: -10px !important; }
    .pod-1 .pod-rank { width: 22px !important; height: 22px !important; font-size: 11px !important; margin-top: -12px !important; }
    .pod-name { font-size: 10px !important; }
    .pod-pts { font-size: 9px !important; }
    .lb-item { padding: 10px 12px !important; }
    .lb-name { font-size: 12px !important; }
    .lb-pts { font-size: 13px !important; }
    .lb-city { font-size: 10px !important; }

    /* الرحلات والأماكن */
    .trip, .fav-item { padding: 10px 12px !important; }
    .trip-icon, .fav-item-icon { width: 32px !important; height: 32px !important; font-size: 14px !important; }
    .trip-name, .fav-item-name { font-size: 12px !important; }
    .trip-meta, .fav-item-meta { font-size: 10px !important; }
    .trip-badge { font-size: 9px !important; padding: 3px 8px !important; }
    .fav-act-btn { width: 26px !important; height: 26px !important; font-size: 10px !important; }
    .fav-mgmt-header h4 { font-size: 12px !important; }
    
    /* المودال الخريطة الداخلي في البروفايل */
    .epm { max-width: 380px !important; }
    .epm-head { padding: 14px 16px 0 !important; }
    .epm-head h3 { font-size: 14px !important; }
    .epm-body { padding: 12px 16px 16px !important; }
    .epm-input { padding: 8px 12px !important; font-size: 12px !important; }
    .epm-map { height: 160px !important; }
    .epm-icon-opt { width: 30px !important; height: 30px !important; font-size: 13px !important; }
}

/* ═══ 2. شاشات 1600px+ ═══ */
@media (min-width: 1600px) {

    .map-controls.shifted { right: 400px !important; }
    .map-style-popup.shifted { right: 455px !important; }

    /* Search Widget — تصغير مربع البحث */
    .search-widget {
        width: 380px !important;
    }
    .search-header-text {
        font-size: 16px !important;
    }
    .search-header-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .search-input-row {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .search-input-text,
    .search-input-field {
        font-size: 13px !important;
    }
    .search-dot {
        width: 12px !important;
        height: 12px !important;
    }
    .search-btn {
        padding: 12px !important;
        font-size: 14px !important;
    }
    .search-header {
        padding: 14px 18px 8px !important;
    }
    .search-body {
        padding: 0 18px 14px !important;
    }
    .collapse-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }

    /* Mini bar */
    .search-mini {
        height: 44px !important;
        max-width: 540px !important;
    }
    .mini-input {
        font-size: 12px !important;
    }
    .mini-search-btn {
        height: 32px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }
    .expand-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    /* Top Controls — تسجيل دخول وأزرار */
    .ctrl-pill {
        height: 40px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }
    .user-pill {
        height: 40px !important;
    }
    .user-pill-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    .user-pill-name {
        font-size: 12px !important;
    }
    .user-pill-points {
        font-size: 10px !important;
    }
    .user-dropdown {
        min-width: 200px !important;
    }
    .dropdown-header .name {
        font-size: 14px !important;
    }
    .dropdown-header .points {
        font-size: 12px !important;
    }
.dropdown-item {
        padding: 11px 16px !important;
        font-size: 13px !important;
    }

    /* Map Controls */
    .map-ctrl-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }
    .logo-float img {
        width: 38px !important;
        height: 38px !important;
    }

    /* Results Panel */
    .results-panel {
        width: 380px !important;
    }
    .rp-title {
        font-size: 15px !important;
    }
    .rp-close {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
    .rp-trip-summary {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    .sort-tab {
        padding: 7px 5px !important;
        font-size: 11px !important;
    }
    .rc {
        padding: 14px 18px !important;
    }
    .rc-rank {
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
    }
    .rc-badge {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }
    .rc-cost {
        font-size: 14px !important;
    }
    .rc-chip {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    .rc-step {
        font-size: 12px !important;
    }

    /* Modals */
    .modal {
        max-width: 360px !important;
    }
    .modal-header h2 {
        font-size: 20px !important;
    }
    .modal-header p {
        font-size: 13px !important;
    }
    .modal-header {
        padding: 24px 20px !important;
    }
    .modal-body {
        padding: 20px !important;
    }
    .form-group label {
        font-size: 13px !important;
    }
    .form-group input,
    .form-group select {
        padding: 11px 14px !important;
        font-size: 14px !important;
    }
    .modal-submit-btn {
        padding: 12px !important;
        font-size: 14px !important;
    }
    .pin-input {
        width: 40px !important;
        height: 48px !important;
        font-size: 20px !important;
    }

    /* Report modal */
    .report-modal {
        max-width: 400px !important;
    }
    .rpt-head h2 {
        font-size: 18px !important;
    }
    .rpt-cat {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
    .rpt-textarea {
        font-size: 13px !important;
    }

    /* Toast */
    .toast {
        font-size: 13px !important;
        padding: 12px 20px !important;
    }

    /* Contribute invite modal */
    .invite-benefit {
        padding: 10px !important;
    }
    .benefit-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 20px !important;
    }
    .benefit-text strong {
        font-size: 13px !important;
    }
    .benefit-text span {
        font-size: 11px !important;
    }

    /* Favorites */
    .fav-chip {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
    .fav-route {
        padding: 8px 10px !important;
    }
    .fav-route-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
    .fav-route-name {
        font-size: 12px !important;
    }

    /* Autocomplete */
    .autocomplete-item {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* Navigation overlay */
    .nav-card-main {
        padding: 16px !important;
        min-height: 76px !important;
    }
    .nav-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    .nav-text-main {
        font-size: 15px !important;
    }
    .nav-text-sub {
        font-size: 11px !important;
    }
    .nav-distance-badge {
        font-size: 20px !important;
    }
    .nav-stat-val {
        font-size: 20px !important;
    }
    .nav-stat-lbl {
        font-size: 9px !important;
    }
    .nav-start-btn {
        padding: 11px !important;
        font-size: 14px !important;
    }
}


/* ═══ 3. شاشات 1920px+ (Full HD وأكبر) ═══ */
@media (min-width: 1920px) {

    .map-controls.shifted { right: 380px !important; }
    .map-style-popup.shifted { right: 435px !important; }

    .search-widget {
        width: 360px !important;
    }
    .search-header-text {
        font-size: 15px !important;
    }
    .search-header-icon {
        width: 34px !important;
        height: 34px !important;
    }
    .search-input-row {
        padding: 9px 11px !important;
        margin-bottom: 8px !important;
    }
    .search-input-text,
    .search-input-field {
        font-size: 12px !important;
    }
    .search-dot {
        width: 11px !important;
        height: 11px !important;
    }
    .search-btn {
        padding: 11px !important;
        font-size: 13px !important;
    }

    .ctrl-pill {
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
    }
    .user-pill {
        height: 36px !important;
    }
    .user-pill-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    .map-ctrl-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }
    .logo-float img {
        width: 34px !important;
        height: 34px !important;
    }

    .results-panel {
        width: 360px !important;
    }
    .modal {
        max-width: 340px !important;
    }
    .report-modal {
        max-width: 380px !important;
    }
}


/* ═══ 4. شاشات 2560px+ (2K/4K) ═══ */
@media (min-width: 2560px) {

    .map-controls.shifted { right: 360px !important; }
    .map-style-popup.shifted { right: 415px !important; }

    .search-widget {
        width: 340px !important;
    }
    .search-header-text {
        font-size: 14px !important;
    }
    .search-input-row {
        padding: 8px 10px !important;
        margin-bottom: 6px !important;
    }
    .search-input-text,
    .search-input-field {
        font-size: 11px !important;
    }
    .search-btn {
        padding: 10px !important;
        font-size: 12px !important;
    }

    .ctrl-pill {
        height: 34px !important;
        font-size: 10px !important;
    }
    .user-pill {
        height: 34px !important;
    }
    .user-pill-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    .map-ctrl-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }

    .results-panel {
        width: 340px !important;
    }
    .rc {
        padding: 12px 16px !important;
    }
    .rc-step {
        font-size: 11px !important;
    }

    .modal {
        max-width: 320px !important;
    }
    .modal-header h2 {
        font-size: 18px !important;
    }
}


/* ═══ شاشات عادية (أقل من 1600px) - تم التصغير بنسبة 20% ═══ */
@media (min-width: 769px) and (max-width: 1599px) {
    /* 1. إضافات الصفحة الرئيسية (Home) */
    .search-widget { width: 272px !important; }
    .search-header-text { font-size: 12px !important; }
    .search-header-icon { width: 27px !important; height: 27px !important; font-size: 10px !important; }
    .search-input-row { padding: 7px 9px !important; gap: 7px !important; margin-bottom: 6px !important; }
    .search-input-text, .search-input-field { font-size: 10px !important; }
    .search-dot { width: 9px !important; height: 9px !important; }
    .search-btn { padding: 9px !important; font-size: 10px !important; }
    .search-header { padding: 10px 13px 6px !important; }
    .search-body { padding: 0 13px 10px !important; }
    .collapse-btn { width: 22px !important; height: 22px !important; font-size: 9px !important; }
    .ctrl-pill { height: 29px !important; padding: 0 10px !important; font-size: 9px !important; }
    .user-pill { height: 29px !important; }
    .user-pill-avatar { width: 22px !important; height: 22px !important; }
    .user-pill-name { font-size: 9px !important; }
    .user-pill-points { font-size: 8px !important; }
    .map-ctrl-btn { width: 29px !important; height: 29px !important; font-size: 10px !important; }
    .logo-float img { width: 27px !important; height: 27px !important; }
    .results-panel { width: 272px !important; }
    .rp-title { font-size: 11px !important; }
    .rc { padding: 10px 13px !important; }
    .rc-cost { font-size: 11px !important; }
    .rc-chip { font-size: 8px !important; padding: 3px 6px !important; }
    .rc-step { font-size: 9px !important; }
    .modal { max-width: 256px !important; }
    .modal-header h2 { font-size: 14px !important; }
    .modal-header { padding: 16px 14px !important; }
    .modal-body { padding: 14px !important; }
    .form-group input, .form-group select { padding: 8px 10px !important; font-size: 10px !important; }
    .modal-submit-btn { padding: 9px !important; font-size: 10px !important; }
    .toast { font-size: 10px !important; padding: 8px 14px !important; }
    .search-mini { height: 32px !important; }
    .mini-search-btn { height: 24px !important; font-size: 9px !important; }
    .map-controls.shifted { right: 292px !important; } /* 272px عرض اللوحة + 20px هامش */
    .map-style-popup.shifted { right: 347px !important; } /* 292px إزاحة الأزرار + 55px مسافة النافذة */

    /* 2. إضافات صفحة ساهم معنا (Contribute) */
    .draw-panel { width: 288px !important; }
    .pill { height: 36px !important; padding: 0 14px !important; font-size: 11px !important; }
    .fab { width: 52px !important; height: 52px !important; font-size: 20px !important; }
    .fab-option { padding: 11px 17px !important; font-size: 11px !important; }
    .map-ctrl { width: 36px !important; height: 36px !important; font-size: 12px !important; }
    .draw-panel-title { font-size: 14px !important; }
    .draw-hint { font-size: 11px !important; padding: 11px 16px !important; }
    .station-number { width: 24px !important; height: 24px !important; font-size: 10px !important; }
    .station-name { font-size: 11px !important; }
    .btn-submit { padding: 11px !important; font-size: 12px !important; }
    .rec-status { padding: 12px 19px !important; }
    .rec-timer { font-size: 22px !important; }
    .rec-stat-value { font-size: 19px !important; }
    .overlay-toggle { padding: 9px 22px !important; font-size: 12px !important; }
}