/* ==========================================================
   LOGIN PAGE CSS - শুধুমাত্র login.html এর জন্য নির্দিষ্ট স্টাইল
   ========================================================== */

/* ---------- পুরো পেজ Wrapper ---------- */
.cc-login-page {
    min-height: 100vh;
    /* 100vh মানে ব্রাউজারের পুরো height জুড়ে, যত ছোট/বড় স্ক্রিনই হোক না কেন */
    display: flex;
    align-items: center;      /* উপর-নিচ বরাবর মাঝখানে আনা */
    justify-content: center;  /* ডান-বাম বরাবর মাঝখানে আনা */
    padding: 20px;
}

/* ---------- সাদা Card বক্স ---------- */
.cc-login-card {
    width: 100%;
    max-width: 380px;
    /* max-width মানে কার্ডটা 380px এর বেশি চওড়া হবে না, কিন্তু ছোট স্ক্রিনে ছোট হয়ে যাবে */
    background-color: var(--cc-white);
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    /* box-shadow হালকা ছায়া দিয়ে কার্ডটাকে ব্যাকগ্রাউন্ড থেকে আলাদা দেখাবে */
}

/* ---------- হেডার অংশ (লগো + টাইটেল) ---------- */
.cc-login-header {
    text-align: center;
    margin-bottom: 28px;
}

.cc-login-logo {
    width: 90px;
    height: 90px;
    /* এখানেই আসল সমাধান - এতক্ষণ লগো বড় দেখাচ্ছিল কারণ width/height নির্দিষ্ট করা ছিল না */
    object-fit: contain;
    /* object-fit: contain - লগোর আসল অনুপাত (shape) নষ্ট না করে বক্সের ভিতরে বসাবে */
    margin-bottom: 10px;
}

.cc-login-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--cc-black);
    margin-bottom: 4px;
}

.cc-login-subtitle {
    font-size: 13px;
    color: var(--cc-text-secondary);
}

/* ---------- ফর্মের প্রতিটা গ্রুপ (label + input) ---------- */
.cc-form-group {
    margin-bottom: 16px;
}

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

/* ---------- ইনপুট বক্সের বাইরের wrapper (আইকন বসানোর জন্য) ---------- */
.cc-input-wrapper {
    position: relative;
    /* position: relative না দিলে ভিতরের আইকন সঠিক জায়গায় বসবে না */
}

.cc-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    /* এই দুই লাইন মিলে আইকনটাকে ঠিক উলম্বভাবে (vertically) মাঝখানে বসায় */
    color: var(--cc-text-muted);
    font-size: 16px;
}

.cc-form-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    /* বাম দিকে বেশি padding (36px) দেওয়া হয়েছে যাতে আইকনের সাথে লেখা না মিশে যায় */
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    font-size: 14px;
    font-family: var(--cc-font);
    outline: none;
    /* outline: none - ক্লিক করলে ব্রাউজারের ডিফল্ট নীল বর্ডার আসবে না */
    transition: border-color 0.2s ease;
}

.cc-form-input:focus {
    border-color: var(--cc-red);
    /* ইনপুট বক্সে ক্লিক করলে বর্ডার লাল হয়ে যাবে - ইউজার বুঝবে এটা active */
}

/* ---------- পাসওয়ার্ড দেখা/লুকানোর চোখের আইকন বাটন ---------- */
.cc-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    /* এই ৪ লাইন বাটনটাকে input বক্সের ভিতরে, ডান পাশে, উলম্বভাবে মাঝখানে বসাচ্ছে */
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cc-text-muted);
    font-size: 16px;
    padding: 0;
}

/* ---------- মনে রাখুন + পাসওয়ার্ড ভুলে গেছেন সারি ---------- */
.cc-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 0 20px;
    font-size: 13px;
}

.cc-remember-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--cc-text-secondary);
    cursor: pointer;
}

.cc-remember-label input[type="checkbox"] {
    accent-color: var(--cc-red);
    /* accent-color চেকবক্স টিক দেওয়ার রং নিয়ন্ত্রণ করে */
}

.cc-forgot-link {
    color: var(--cc-red);
    text-decoration: none;
    font-weight: 500;
}

.cc-forgot-link:hover {
    text-decoration: underline;
}

/* ---------- লগইন বাটন ---------- */
.cc-login-btn {
    width: 100%;
    background-color: var(--cc-black);
    color: var(--cc-white);
    border: none;
    border-radius: var(--cc-radius);
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--cc-font);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cc-login-btn:hover {
    background-color: var(--cc-red);
}

/* ---------- এরর মেসেজ (এখন খালি, PHP ধাপে ব্যবহার হবে) ---------- */
.cc-login-error {
    color: var(--cc-error);
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
}

/* ---------- ফুটার (Role তালিকা) ---------- */
.cc-login-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #F0F0F0;
    text-align: center;
}

.cc-login-footer span {
    font-size: 11px;
    color: var(--cc-text-muted);
}