/* ==========================================================
   BASE CSS - পুরো C&C Command Center সফটওয়্যারের জন্য কমন স্টাইল
   এই ফাইলটা প্রতিটা module (Dashboard, Dealer, Orders...) এ ব্যবহার হবে
   ========================================================== */

/* ---------- ব্র্যান্ড কালার ভ্যারিয়েবল ---------- */
/* :root মানে পুরো page এর জন্য এই ভ্যারিয়েবলগুলো সবজায়গা থেকে পাওয়া যাবে */
:root {
    --cc-red: #D62828;          /* প্রধান accent রং - লগো থেকে নেওয়া */
    --cc-red-dark: #B01E1E;     /* গাঢ় লাল - hover অবস্থায় ব্যবহার হবে */
    --cc-black: #1A1A1A;        /* মূল টেক্সট এবং বাটনের রং */
    --cc-white: #FFFFFF;        /* সাদা ব্যাকগ্রাউন্ড */
    --cc-bg-light: #F4F4F4;     /* পেজের হালকা ধূসর ব্যাকগ্রাউন্ড */
    --cc-text-secondary: #5A5A5A;  /* সাধারণ লেখার হালকা রং */
    --cc-text-muted: #B0B0B0;   /* খুব হালকা রং, placeholder এর জন্য */
    --cc-border: #E2E2E2;       /* ইনপুট বক্সের বর্ডার রং */
    --cc-error: #D62828;        /* এরর মেসেজের রং */

    --cc-radius: 8px;           /* সব জায়গায় একই গোলাকার কোণা ব্যবহার হবে */
    --cc-font: 'Hind Siliguri', 'Segoe UI', sans-serif;
    /* Hind Siliguri একটা জনপ্রিয় বাংলা ফন্ট, Google Fonts থেকে আসবে */
}

/* ---------- CSS Reset ---------- */
/* ব্রাউজার নিজে থেকে যে ডিফল্ট margin/padding দেয়, সেগুলো মুছে ফেলা */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* box-sizing: border-box মানে width/height হিসাব করার সময় padding-border যোগ হবে না,
       এতে লেআউট ভাঙার সম্ভাবনা কমে যায় - এটা প্রফেশনাল ডেভেলপমেন্টের একটা must-have নিয়ম */
}

body {
    font-family: var(--cc-font);
    /* var(--cc-font) মানে উপরে যে ফন্ট ভ্যারিয়েবল বানিয়েছি সেটা এখানে ব্যবহার হলো */
    background-color: var(--cc-bg-light);
    color: var(--cc-black);
    line-height: 1.6;
    /* line-height লাইনের মধ্যে ফাঁকা জায়গা, বাংলা লেখা পড়তে সহজ করার জন্য */
}

/* ---------- Reusable Button Style ---------- */
/* এই ক্লাসটা পুরো সফটওয়্যারে যেকোনো প্রধান বাটনে ব্যবহার করা যাবে */
.cc-btn-primary {
    background-color: var(--cc-black);
    color: var(--cc-white);
    border: none;
    border-radius: var(--cc-radius);
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--cc-font);
    cursor: pointer;
    /* cursor: pointer - মাউস হভার করলে হাতের আইকন দেখাবে, বোঝা যাবে এটা ক্লিকযোগ্য */
    transition: background-color 0.2s ease;
    /* transition - রং পরিবর্তন হঠাৎ না হয়ে মসৃণভাবে (0.2 সেকেন্ডে) হবে */
}

.cc-btn-primary:hover {
    background-color: var(--cc-red);
    /* মাউস হভার করলে কালো থেকে লাল রঙে বদলে যাবে */
}

/* ---------- Reusable Form Elements ---------- */
/* এই স্টাইলগুলো এখন থেকে যেকোনো module এর ফর্মে (Login, Dealer, Orders...) ব্যবহার করা যাবে */

.cc-form-group {
    margin-bottom: 16px;
}

.cc-form-label {
    display: block;
    font-size: 13px;
    color: var(--cc-text-secondary);
    margin-bottom: 6px;
}

.cc-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    font-size: 14px;
    font-family: var(--cc-font);
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.cc-form-input:focus {
    border-color: var(--cc-red);
}