/* style.css - FINAL INTEGRATED CODE with Teal Theme (#1abc9c) */

/* --- 1. GLOBAL STYLES & LOGIN ALIGNMENT --- */
body {
    font-family: 'Arial', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #f0f2f5 !important;

    /* CRITICAL FIX for Login Page Centering */
    
    justify-content: center !important; /* Center horizontally */
    align-items: center !important; /* Center vertically */
    min-height: 100vh !important;
    height: 100vh !important; /* Forces full height context */
    flex-wrap: wrap !important;
}

/* 2. Login Container: The central card */
.login-container {
    background-color: #ffffff !important; /* White card background */
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important; /* Stronger, modern shadow */
    width: 100% !important;
    max-width: 400px !important;
    text-align: center !important;
    margin: auto !important;
}

.login-container h2 {
    color: #333 !important;
    margin-bottom: 25px !important;
    font-size: 1.8em !important;
    border-bottom: 2px solid #1abc9c !important; /* NEW TEAL COLOR */
    padding-bottom: 10px !important;
}

/* Input styling within the login form for better appearance */
.login-container form {
    display: flex !important;
    flex-direction: column !important;
}

.login-container label {
    text-align: left !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
    color: #555 !important;
}

.login-container input:focus {
    border-color: #1abc9c !important; /* NEW TEAL COLOR */
    box-shadow: 0 0 0 1px #1abc9c !important; /* NEW TEAL COLOR */
    outline: none !important;
}


/* --- 3. CRM GENERAL STYLES (NO CHANGES HERE) --- */

/* Header/Navigation */
header {
    background: #333;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}
header .logo { font-size: 1.5em; font-weight: bold; }
header nav a { color: white; margin-left: 20px; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition: background 0.3s; }
header nav a:hover { background: #555; }

/* Main content area (Used on all non-login pages) */
main {
    padding: 20px;
    max-width: 1200px;
    margin: 20px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
footer {
    text-align: center;
    padding: 10px;
    color: #666;
    font-size: 0.8em;
    margin-top: 20px;
}

/* --- 4. FORMS & INPUTS (General CRM and Login) --- */
form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

/* Standard Input Fields */
form input[type="text"],
form input[type="password"],
form input[type="date"],
form select,
form textarea {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
}

/* Login Button Styling (UPDATED COLOR) */
.login-container button[type="submit"] {
    background-color: #1abc9c !important; /* NEW TEAL COLOR */
    color: white !important;
    padding: 12px !important;
    font-size: 1.1em !important;
    margin-top: 30px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
}
.login-container button[type="submit"]:hover {
    background-color: #16a085 !important; /* SLIGHTLY DARKER TEAL */
}

/* Base button styling for consistency in main content */
form button {
    background-color: #1abc9c; /* APPLIED TEAL TO GENERAL BUTTONS TOO */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
form button:hover { background-color: #16a085; }


/* --- 5. CRM Reporting/Task Specifics (NO CHANGES HERE) --- */
.success-message { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; padding: 10px; border-radius: 4px; margin-bottom: 15px; }
.error-message { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 10px; border-radius: 4px; margin-bottom: 15px; }
table { border-collapse: collapse; margin-top: 15px; }
table th, table td { padding: 10px; border: 1px solid #ccc; }
table thead th { background-color: #eee; }
.dashboard-stats { display: flex; gap: 20px; margin-top: 20px; }
.stat-box { flex: 1; padding: 20px; background: #f8f8f8; border: 1px solid #ddd; border-radius: 6px; text-align: center; }
.stat-box h2 { color: #1abc9c; margin: 0 0 5px 0; } /* APPLIED TEAL */
.stat-box p { font-size: 2em; font-weight: bold; margin: 0 0 10px 0; }
.stat-box a { display: inline-block; padding: 5px 10px; background: #5bc0de; color: white; text-decoration: none; border-radius: 3px; }
.task-card { border: 1px solid #ccc; padding: 15px; margin-bottom: 10px; border-radius: 5px; }
.task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.task-card h3 { margin: 0; color: #333; }
.task-card .due-date { font-weight: bold; color: #d9534f; }
.task-card .status-form { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.status-to-do { border-left: 5px solid #d9534f; }
.status-in-progress { border-left: 5px solid #f0ad4e; }
.status-done { border-left: 5px solid #5cb85c; }