/* css/style.css */

/* --- আগের বেসিক স্টাইলগুলো --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* আধুনিক ফন্ট স্ট্যাক */
    margin: 0; /* মোবাইল ডিভাইসের জন্য মার্জিন ০ করা ভালো */
    padding: 0; /* এবং প্যাডিংও */
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6; /* পঠনযোগ্যতার জন্য লাইন হাইট */
}

/* কন্টেইনারগুলোর জন্য সাধারণ স্টাইল */
.container { /* .login-container, .dashboard-container ইত্যাদির জন্য একটি সাধারণ ক্লাস হতে পারে */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 90%; /* ডিফল্ট প্রস্থ পার্সেন্টেজে */
    max-width: 400px; /* ডেস্কটপের জন্য সর্বোচ্চ প্রস্থ */
    margin: 20px auto; /* উপরে-নিচে মার্জিন, ডানে-বামে অটো (সেন্টার করার জন্য) */
    box-sizing: border-box; /* প্যাডিং ও বর্ডার যেন প্রস্থের ভেতরে থাকে */
}

h2 {
    text-align: center;
    color: #333;
    margin-top: 0; /* কন্টেইনারের উপরের প্যাডিং এর সাথে অতিরিক্ত মার্জিন কমানো */
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%; /* সম্পূর্ণ প্রস্থ নেবে */
    padding: 12px; /* প্যাডিং একটু বাড়ানো হলো */
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* গুরুত্বপূর্ণ: প্যাডিং ও বর্ডার যেন প্রস্থের ভেতরে থাকে */
    font-size: 16px; /* মোবাইল ডিভাইসে পড়ার সুবিধার জন্য */
}

button {
    background-color: #007bff;
    color: white;
    padding: 12px 15px; /* প্যাডিং একটু বাড়ানো হলো */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* সম্পূর্ণ প্রস্থ নেবে */
    font-size: 16px; /* মোবাইল ডিভাইসে পড়ার সুবিধার জন্য */
    font-weight: bold;
}

button:hover {
    background-color: #0056b3;
}

.error {
    color: red;
    background-color: #ffe0e0;
    border: 1px solid red;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: center;
}

p {
    line-height: 1.6;
    margin-bottom: 15px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- মিডিয়া কোয়েরি (Media Queries) - মোবাইল ডিভাইসের জন্য বিশেষ স্টাইল --- */

/* ছোট স্ক্রিনের জন্য (যেমন মোবাইল ফোন - 600px এর কম প্রস্থ) */
@media (max-width: 600px) {
    body {
        font-size: 16px; /* মোবাইলের জন্য বেস ফন্ট সাইজ */
    }

    .container {
        width: 90%; /* স্ক্রিনের বেশিরভাগ অংশ জুড়ে থাকবে */
        margin: 15px auto; /* মার্জিন একটু কমানো */
        padding: 15px; /* প্যাডিং একটু কমানো */
    }

    h2 {
        font-size: 1.5em; /* হেডিং এর ফন্ট সাইজ মোবাইলের জন্য অ্যাডজাস্ট করা */
    }

    input[type="email"],
    input[type="password"],
    input[type="text"],
    button {
        font-size: 1em; /* ইনপুট ও বাটনের ফন্ট সাইজ */
        padding: 12px; /* টাচ করার সুবিধার জন্য ভালো প্যাডিং */
    }
    
    /* যদি কোনো ডেস্কটপ-স্পেসিফিক বড় মার্জিন বা প্যাডিং থাকে, এখানে কমাতে পারেন */
}

/* মাঝারী স্ক্রিনের জন্য (যেমন ট্যাবলেট - 768px এর কম প্রস্থ) */
@media (max-width: 768px) {
    /* এখানে ট্যাবলেটের জন্য বিশেষ কোনো স্টাইল প্রয়োজন হলে দিতে পারেন */
    /* সাধারণত 600px এর নিচের স্টাইলগুলোই ট্যাবলেটেও কাজ করে যায়,
       তবে লেআউটে বড় পরিবর্তন দরকার হলে এখানে আলাদা করে লিখতে পারেন। */
}

/* --- আপনার login-container, dashboard-container ক্লাসগুলোর জন্য --- */
/* যেহেতু আমরা .container নামে একটি সাধারণ ক্লাস তৈরি করেছি, 
   আপনি আপনার HTML এ .login-container এর পরিবর্তে .container ব্যবহার করতে পারেন 
   অথবা .login-container কে .container এর মতো করে স্টাইল করতে পারেন। */

.login-container,
.dashboard-container,
.admin-user-form-container { /* add_user.php ফাইলের ফর্মের কন্টেইনারের জন্য একটা ক্লাস দিতে পারেন */
    /* .container ক্লাসের স্টাইলগুলো এখানেও প্রযোজ্য হবে যদি আপনি ওভাবেই রাখেন */
    /* অথবা, আপনি যদি আলাদা স্টাইল চান: */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 90%; 
    max-width: 400px; 
    margin: 20px auto;
    box-sizing: border-box;
}

/* মিডিয়া কোয়েরির ভেতরে এই নির্দিষ্ট কন্টেইনারগুলোর জন্য স্টাইলও অ্যাডজাস্ট করতে পারেন */
@media (max-width: 600px) {
    .login-container,
    .dashboard-container,
    .admin-user-form-container {
        width: 90%;
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 15px;
    }
}