/* style.css */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: #f4f7f6; color: #333; line-height: 1.6; }
.container { max-width: 1000px; margin: 30px auto; padding: 20px; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #ddd; padding-bottom: 10px; }
.card { background: #fff; padding: 20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
h1, h2, h3 { color: #2c3e50; margin-bottom: 15px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
th { background-color: #f8f9fa; }
.btn { display: inline-block; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; color: white; font-size: 14px; font-weight: bold; }
.btn-primary { background-color: #0056b3; }
.btn-primary:hover { background-color: #004494; }
.btn-success { background-color: #2ecc71; }
.btn-danger { background-color: #e74c3c; }
.btn-dark { background-color: #34495e; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; }
.form-control { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.alert { padding: 10px; border-radius: 4px; margin-bottom: 15px; }
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
body::before {
    content: "";
    background-image: url('Symbol .jpg'); /* Exact name, no spaces */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0.12; 
    z-index: -1; 
}
/* ================= SIDEBAR LAYOUT ================= */
body { margin: 0; padding: 0; } /* Resets default spacing */

.wrapper { 
    display: flex; 
    min-height: 100vh; 
    background-color: transparent; 
}

.sidebar { 
    width: 250px; 
    background-color: #2c3e50; 
    color: #fff; 
    position: fixed; 
    height: 100vh; 
    padding: 20px 0; 
    display: flex; 
    flex-direction: column; 
    box-shadow: 2px 0 5px rgba(0,0,0,0.2); 
    z-index: 100;
}

.sidebar h2 { 
    color: #ecf0f1; 
    text-align: center; 
    margin-bottom: 30px; 
    font-size: 22px; 
    padding: 0 20px; 
}

.sidebar a { 
    color: #bdc3c7; 
    text-decoration: none; 
    padding: 15px 25px; 
    display: block; 
    font-size: 15px; 
    border-left: 4px solid transparent; 
    transition: 0.2s; 
}

.sidebar a:hover, .sidebar a.active { 
    background-color: #34495e; 
    color: #fff; 
    border-left: 4px solid #3498db; 
}

.sidebar .badge { 
    background: #e74c3c; 
    color: white; 
    padding: 2px 8px; 
    border-radius: 12px; 
    font-size: 12px; 
    float: right; 
    margin-top: 2px; 
}

.main-content { 
    flex: 1; 
    margin-left: 250px; /* Leaves space for the fixed sidebar */
    padding: 30px; 
    max-width: 1200px;
}