/* ============================================================
   Mobile Responsiveness Fixes
   সব পাবলিক পেজ ও প্যানেলে (candidate/employer/admin/staff) লোড হয়
   ============================================================ */

/* ---------- সব ডিভাইসে হরাইজন্টাল স্ক্রল বন্ধ রাখা ---------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ---------- ছবি/চার্ট কখনো কন্টেইনারের বাইরে যাবে না ---------- */
img, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* ---------- লম্বা টেক্সট (জব টাইটেল, ইমেইল, ব্রেডক্রাম্ব) র‍্যাপ হবে, ভাঙবে না ---------- */
.job-title, .breadcrumb-nav, td, .panel-box-title, h1, h2, h3, h4, h5 {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---------- Company Logo (আপলোড করা আসল লোগো) — বিদ্যমান .company-logo সাইজ/শেপ ইনহেরিট করে ---------- */
img.company-logo {
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--pj-border, #E5E9F0);
}

@media (max-width: 767.98px) {
    /* -------- ইনলাইন fixed-width ফর্ম ফিল্ড (ফিল্টার/সার্চ বক্স) মোবাইলে ফুল-উইথ হবে --------
       এভাটার/আইকন সার্কেল (span) স্পর্শ করবে না, শুধু input/select টার্গেট করা হয়েছে */
    input.form-control[style*="width:"],
    input.form-control-sm[style*="width:"],
    select.form-select[style*="width:"],
    select.form-select-sm[style*="width:"] {
        width: 100% !important;
    }

    /* -------- ফিল্টার/সার্চ ফর্ম যেগুলো d-flex দিয়ে সাজানো, মোবাইলে র‍্যাপ ও স্ট্যাক হবে -------- */
    form.d-flex:not(.navbar-collapse *) {
        flex-wrap: wrap;
    }
    form.d-flex > input,
    form.d-flex > select,
    form.d-flex > button {
        flex: 1 1 auto;
        min-width: 120px;
    }

    /* -------- টেবিলের ভেতরের ফন্ট একটু ছোট করে পড়ার সুবিধা -------- */
    .panel-table { font-size: 0.82rem; }
    .panel-table th, .panel-table td { padding: 0.5rem 0.6rem; white-space: nowrap; }

    /* -------- ইনলাইন অ্যাকশন বাটন গ্রুপ (Approve/Reject ইত্যাদি) স্ট্যাক হবে -------- */
    .d-flex.gap-1 > form,
    .d-flex.gap-2 > form {
        margin-bottom: 0.25rem;
    }

    /* -------- চার্ট (Chart.js canvas) কন্টেইনার ছোট স্ক্রিনে ঠিকমতো ফিট হবে -------- */
    canvas { max-height: 260px !important; }

    /* -------- প্যানেল হেডিং ও প্যাডিং মোবাইলে একটু কমানো -------- */
    .panel-box, .dash-panel { padding: 1rem !important; }
    .page-banner { padding: 2rem 0 !important; }
    .page-banner h1 { font-size: 1.4rem !important; }

    /* -------- স্ট্যাট কার্ডের সংখ্যা ছোট স্ক্রিনে একটু ছোট -------- */
    .stat-card .value, .pstat-card .value { font-size: 1.1rem !important; }
}

@media (max-width: 480px) {
    /* -------- খুব ছোট স্ক্রিনে (পুরনো/ছোট ফোন) আরও কমপ্যাক্ট -------- */
    .panel-box, .dash-panel { padding: 0.75rem !important; }
    .btn-view-sm { padding: 0.35rem 0.6rem !important; font-size: 0.72rem !important; }
    h1 { font-size: 1.3rem !important; }
    h5.fw-bold { font-size: 1rem !important; }
}