@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@600;700&display=swap');


body { font-family: 'Inter', sans-serif; margin: 0; display: flex; height: 100vh; background-color: #f8f9fa; color: #2d3436; }
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; color: #1e73be;  }


.sidebar {
    width: 250px;
    background: linear-gradient(180deg, #2581c4 0%, #155a96 100%); 
    color: white; padding: 25px 20px; box-shadow: 3px 0 20px rgba(0,0,0,0.08); z-index: 10;
}
.sidebar h2 { font-size: 22px; text-align: center; letter-spacing: 1px; border-bottom: 2px solid rgba(255, 255, 255, 0.15); padding-bottom: 15px; margin-bottom: 25px; color: #ffffff; }
.sidebar a { display: block; color: #e0f2f1; text-decoration: none; padding: 14px 18px; margin: 10px 0; border-radius: 8px; font-weight: 500; transition: all 0.3s ease; }
.sidebar a:hover, .sidebar a.active { background-color: rgba(255, 255, 255, 0.15); color: #f1c40f; transform: translateX(6px); border-left: 4px solid #f1c40f; }


.content { flex: 1; padding: 40px; overflow-y: auto; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid #e2e8f0; padding-bottom: 15px; }
.card, .form-box { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #edf2f7; }


input[type="text"], input[type="password"], textarea, select, input[type="file"] {
    width: 100%; padding: 14px; margin-top: 8px; margin-bottom: 22px;
    border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; 
    font-family: 'Inter', sans-serif; transition: all 0.3s ease; background-color: #fbfbfc;
}
input:focus, textarea:focus, select:focus { border-color: #1e73be; background-color: #ffffff; box-shadow: 0 0 0 4px rgba(30, 115, 190, 0.1); outline: none; }


button, .btn-add {
    background-color: #f1c40f; color: #1a1a1a; padding: 14px 28px; border: none; border-radius: 8px; 
    cursor: pointer; font-weight: 600; font-family: 'Poppins', sans-serif; text-decoration: none; display: inline-block; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(241, 196, 15, 0.2);
}
button:hover, .btn-add:hover { background-color: #d4ac0d; transform: translateY(-2px); }
.btn-logout { background-color: #ef4444; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; transition: 0.3s; }


table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 25px; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
th, td { border-bottom: 1px solid #e2e8f0; padding: 16px; text-align: left; }
th { background-color: #155a96; color: white; font-family: 'Poppins', sans-serif; font-weight: 600; }
tr:hover td { background-color: #f8fafc; }