/*
 * এই CSS কোডটি styles.css ফাইলে রাখুন
 * এটি আপনার Windows 8-এর মতো বাটনগুলির ডিজাইন তৈরি করবে।
*/

body {
    font-family: 'Segoe UI', Arial, sans-serif; /* Windows 8 এর কাছাকাছি ফন্ট */
    background-color: #0078d7; /* Windows 8 এর ডিফল্ট ব্যাকগ্রাউন্ড কালার */
    color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* পুরো স্ক্রিন জুড়ে কেন্দ্রিক করার জন্য */
}

#admin-panel-container {
    text-align: center;
    padding: 20px;
}
/*
 * এই CSS কোডটি styles.css ফাইলে যোগ করুন
*/

/* লোগো কনটেইনারের স্টাইল */
.logo-container {
    margin: 0 0 20px 0; /* কোম্পানির নামের সাথে দূরত্ব */
    padding: 0;
}

/* লোগো ছবির স্টাইল */
.company-logo {
    max-width: 150px; /* লোগোর সর্বোচ্চ আকার (আপনার প্রয়োজন অনুযায়ী পরিবর্তন করুন) */
    height: auto;
    display: block; /* কেন্দ্রিক করার জন্য */
    margin: 0 auto; /* কেন্দ্রিক করার জন্য */
    background-color: ; /* লোগোর পিছনে সাদা ব্যাকগ্রাউন্ড (যদি প্রয়োজন হয়) */
    border-radius: 8px; /* সামান্য কোণা গোলাকার */
}

/* প্রধান হেডারের স্টাইল */
h1 {
    font-size: 2.2em;
    font-weight: 300; /* হালকা ফন্ট ওয়েট */
    color: #fff; /* সাদা ফন্ট */
    margin-bottom: 5px;
}

h2 {
    font-size: 1.5em;
    font-weight: 300;
    color: #fff;
    margin-top: 0;
    margin-bottom: 25px;
}

/* কন্ট্রোল প্যানেল কন্টেইনার */
#control-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 গ্রিড */
    gap: 20px; /* বাটনগুলির মধ্যে ফাঁকা জায়গা */
    max-width: 500px;
    margin: 0 auto; /* কেন্দ্রিক করার জন্য */
}

/* প্যানেল লিঙ্কের স্টাইল */
.panel-link {
    text-decoration: none; /* লিংক আন্ডারলাইন সরান */
}

/* প্যানেল বাটনগুলির স্টাইল */
.panel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px; /* বাটনগুলির উচ্চতা */
    background-color: #0099ff; /* ডিফল্ট বাটন কালার */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* হালকা ছায়া */
}

/* বাটনগুলির হোভার স্টাইল */
.panel-btn:hover {
    background-color: #007acc; /* হোভারে একটু গাঢ় রঙ */
    transform: translateY(-2px); /* সামান্য উপরে উঠে আসা */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

/* বাটনগুলির আইকন স্টাইল */
.panel-btn .icon {
    font-size: 2.5em; /* আইকনের আকার */
    margin-bottom: 5px;
    line-height: 1; /* লাইন উচ্চতা ঠিক করা */
}

/* সক্রিয় বাটনের জন্য স্টাইল */


/* সক্রিয় বাটনের আইকন স্টাইল */
.panel-btn.active .icon {
    color: #000; /* আইকনের রঙ কালো */
}

/* বিল বাটনের জন্য বিশেষ রঙ */
.tile-bill { background-color: #004d99; } /* Deep Blue */
.tile-bill:hover { background-color: #003366; }

/* রিপোর্ট বাটনের জন্য বিশেষ রঙ */
.tile-report { background-color:#0c111e; } /* Dark Orange */
.tile-report:hover { background-color: #cc7000; }


/* কোটেশন বাটনের জন্য বিশেষ রঙ */
.tile-quotation { background-color: #7cbb00; } /* Lime Green */
.tile-quotation:hover { background-color: #629400; }

/* ইনভয়েস বাটনের জন্য বিশেষ রঙ */
.tile-invoice { background-color: #990099; } /* Dark Magenta */
.tile-invoice:hover { background-color: #660066; }

/* ডিজাইন ফুটার স্টাইল */
h3 {
    font-size: 0.8em;
    font-weight: 300;
    color: #ccc;
    margin-top: 30px;
}





/*
 * লগইন ফর্মের স্টাইল
*/

/* পুরো লগইন কন্টেইনার */

/* ইনপুট গ্রুপ */
.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 300;
    color: #fff;
}

/* ইনপুট ফিল্ড */
.input-group input[type="text"],
.input-group input[type="password"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box; /* Padding যেন প্রস্থের অংশ হয় */
    background-color: #f0f0f0; /* হালকা ব্যাকগ্রাউন্ড */
    color: #333;
    font-size: 1em;
}

/* লগইন বাটন */
#login-button {
    width: 100%;
    padding: 12px;
    background-color: #7cbb00; /* কোটেশন বাটনের মতো রঙ */
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    margin-top: 10px;
}

#login-button:hover {
    background-color: #629400;
    transform: translateY(-1px);
}

/* ত্রুটির মেসেজ */
.error-msg {
    color: #ff3333;
    font-size: 0.9em;
    margin-top: -10px;
    margin-bottom: 15px;
    font-weight: 500;
}

/*
 * লগআউট বাটনের স্টাইল
*/
.logout-btn {
    /* বাটনের মূল স্টাইল */
    padding: 10px 20px;
    margin-top: 30px; /* প্যানেল থেকে দূরত্ব */
    background-color: #e74c3c; /* একটি সতর্কীকরণ রঙ (লাল) */
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    display: inline-flex; /* আইকন এবং টেক্সট পাশাপাশি রাখার জন্য */
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.logout-btn:hover {
    background-color: #c0392b; /* হোভারে গাঢ় লাল */
    transform: translateY(-1px);
}

.logout-btn .icon {
    font-size: 1.2em;
    margin-right: 8px;
    line-height: 1;
}
/* --- invoice list button style --- */
.tile-invoice-list { background-color: #f1c40f; } /* Orange/Yellow */
.tile-invoice-list:hover { background-color: #d8ac0b; }

/* ... (অন্যান্য CSS কোড) ... */

/* --- লোগো স্টাইল --- */
.logo-container {
    margin: 0 0 20px 0; 
    padding: 0;
    text-align: center; /* লোগোকে কেন্দ্রিক করার জন্য */
}

.company-logo {
    max-width: 150px; 
    height: auto;
    display: block; 
    margin: 0 auto; 
    border-radius: 8px; /* লোগোর চারপাশে সামান্য বাঁকা */
   
}

/* --- লগইন কন্টেইনার স্টাইল (আপডেট করা হয়েছে) --- */
.login-container {
    background: #fdfdfd24;
    padding: 30px 40px; /* প্যাডিং বাড়ানো হলো */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 380px; /* প্রস্থ সামান্য বাড়ানো হলো */
    text-align: center;
    
    /* লোগো ও ফর্মকে সেন্টারে আনার জন্য */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- ইনপুট গ্রুপ স্টাইল (Select ড্রপডাউনের জন্য) --- */

.input-group label {
    display: block;
    text-align: left; /* বাম দিকে লেবেল সারিবদ্ধ */
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 1em;
}

.login-container input[type="text"],
.login-container input[type="password"],
.login-container select { /* **Select ট্যাগ যোগ করা হয়েছে** */
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* padding/border যেন width না বাড়ায় */
    margin-bottom: 20px;
    font-size: 1em;
    color: #333;
    background-color: #f9f9f9;
    transition: border-color 0.3s;
}

.login-container select {
    /* ড্রপডাউন এর জন্য বিশেষ স্টাইল */
    appearance: none; /* ডিফল্ট ব্রাউজার স্টাইল অপসারণ */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%230078d7" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 40px;
    cursor: pointer;
}

.login-container input:focus,
.login-container select:focus {
    border-color: #0078d7; /* ফোকাস রঙ পরিবর্তন */
    outline: none;
}


/* ... (লগইন বাটনের বাকি কোড) ... */