/* ==========================================================
   RESPONSIVE CSS - পুরো সফটওয়্যারের জন্য Mobile/Tablet adjust করা
   ========================================================== */

/* ==========================================================
   TABLET - স্ক্রিন 992px বা তার কম (Dashboard এর জন্য)
   ========================================================== */
@media (max-width: 992px) {
    .cc-sidebar {
        position: fixed;
        left: -240px;
        top: 0;
        z-index: 100;
        transition: left 0.3s ease;
    }
    .cc-sidebar-open {
        left: 0;
    }
    .cc-menu-toggle {
        display: block;
    }
    .cc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------- Sidebar খোলা থাকলে পিছনে অন্ধকার Overlay ---------- */
    /* এই Overlay-টা Sidebar এর পিছনে ব্যাকগ্রাউন্ড হালকা কালো করে দেয়,
       যাতে বোঝা যায় Sidebar খোলা আছে, এবং বাইরে ক্লিক করলে বন্ধ করার
       জায়গা তৈরি হয় (dashboard.js এ ইতিমধ্যে ক্লিক লজিক না থাকলে,
       এটা শুধু ভিজ্যুয়াল ইফেক্ট হিসেবে কাজ করবে) */
    .cc-sidebar-open::after {
        content: '';
    }
}

/* ==========================================================
   TABLET - স্ক্রিন 768px বা তার কম (Login page + সব মডিউলের ফর্ম/টেবিল)
   ========================================================== */
@media (max-width: 768px) {
    .cc-login-card {
        max-width: 340px;
        padding: 28px 24px;
    }
    .cc-login-logo {
        width: 80px;
        height: 80px;
    }
    .cc-login-title {
        font-size: 18px;
    }

    /* ---------- সব ফর্মের ২-কলাম Row একটাতে নামিয়ে আনা ---------- */
    .cc-form-row-2 {
        grid-template-columns: 1fr;
        display: grid;
        gap: 12px;
    }
    .cc-form-row {
        grid-template-columns: 1fr;
    }

    /* ---------- List Header (শিরোনাম + বাটন) সাজানো ---------- */
    .cc-list-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .cc-list-header > div:last-child {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cc-list-header .cc-btn-primary,
    .cc-list-header .cc-btn-secondary {
        text-align: center;
        width: 100%;
    }

    /* ---------- Form Card প্যাডিং কমানো ---------- */
    .cc-form-card {
        padding: 16px;
    }

    /* ---------- Form Actions (Submit/বাতিল বাটন) ---------- */
    .cc-form-actions {
        flex-direction: column;
        gap: 10px;
    }
    .cc-form-actions .cc-btn-primary,
    .cc-form-actions .cc-btn-secondary {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

    /* ---------- Table গুলো পাশে Scroll করা যাবে, ভাঙবে না ---------- */
    .cc-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cc-dealer-table {
        min-width: 640px;
        /* min-width দিলে টেবিলের কলামগুলো জোর করে সংকুচিত হবে না,
           বরং পুরো টেবিলটা পাশে স্ক্রল হবে - এতে লেখা পড়া সহজ থাকে */
    }

    /* ---------- Action বাটন (এডিট/ডিলিট) Touch-friendly করা ---------- */
    .cc-action-cell {
        white-space: nowrap;
    }
    .cc-action-edit,
    .cc-action-delete {
        display: inline-block;
        padding: 4px 6px;
    }
}

/* ==========================================================
   MOBILE - স্ক্রিন 480px বা তার কম
   ========================================================== */
@media (max-width: 480px) {
    /* ---------- Login Page ---------- */
    .cc-login-page {
        padding: 12px;
    }
    .cc-login-card {
        max-width: 100%;
        padding: 24px 18px;
        box-shadow: none;
    }
    .cc-login-logo {
        width: 70px;
        height: 70px;
    }
    .cc-login-title {
        font-size: 17px;
    }
    .cc-login-subtitle {
        font-size: 12px;
    }
    .cc-form-input {
        font-size: 16px;
        /* 16px রাখা জরুরি - এর কম হলে iPhone Safari নিজে থেকে Zoom
           করে ফেলে, যেটা ব্যবহারকারীর জন্য বিরক্তিকর */
    }
    .cc-form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .cc-login-footer span {
        font-size: 10px;
        line-height: 1.6;
    }

    /* ---------- Dashboard Page ---------- */
    .cc-content {
        padding: 16px;
    }
    .cc-stats-grid {
        grid-template-columns: 1fr;
    }
    .cc-user-name {
        display: none;
    }

    /* ---------- Topbar ছোট স্ক্রিনে গুছিয়ে রাখা ---------- */
    .cc-topbar {
        padding: 0 14px;
    }
    .cc-topbar-title {
        font-size: 14px;
    }
    .cc-topbar-right {
        gap: 10px;
    }
    .cc-logout-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* ---------- Add Dealer / সব ফর্ম ---------- */
    .cc-form-row {
        grid-template-columns: 1fr;
    }
    .cc-form-card {
        padding: 14px;
    }
    .cc-form-card-title {
        font-size: 15px;
    }
    .cc-section-label {
        font-size: 14px;
    }

    /* ---------- List/Table Card ---------- */
    .cc-list-card {
        padding: 14px;
    }
    .cc-empty-message {
        font-size: 13px;
        padding: 20px 10px;
        text-align: center;
    }

    /* ---------- Product Grid (Inventory) ---------- */
    .cc-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .cc-product-card img {
        height: 130px;
    }
    .cc-product-card-body {
        padding: 10px;
    }
    .cc-product-card-body h4 {
        font-size: 13px;
    }

    /* ---------- Badge গুলো একটু ছোট করে সাজানো ---------- */
    .cc-badge {
        font-size: 11px;
        padding: 3px 8px;
        display: inline-block;
        margin-bottom: 2px;
    }

    /* ---------- Alert/Success/Error মেসেজ ---------- */
    .cc-alert-success,
    .cc-alert-danger {
        font-size: 13px;
        padding: 10px;
    }
}