/* public/css/style.css */
body { font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; background: #f4f6f9; height: 100vh; overflow: hidden; }

/* SIDEBAR */
#sidebar-container { width: 250px; background: #1e293b; color: white; display: flex; flex-direction: column; padding: 20px; flex-shrink: 0; }
.brand { font-size: 20px; font-weight: bold; margin-bottom: 30px; text-align: center; color: #60a5fa; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 12px; color: #cbd5e1; text-decoration: none; border-radius: 8px; margin-bottom: 5px; cursor: pointer; transition: 0.2s; }
.menu-item:hover { background: #334155; color: white; }
.menu-item.active { background: #2563eb; color: white; }
.logout { margin-top: auto; color: #ef4444; }
.logout:hover { background: #451a1a; }

/* MAIN CONTENT */
.main-content { flex-grow: 1; padding: 30px; overflow-y: auto; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.page-title { font-size: 24px; font-weight: bold; color: #1e293b; }
.user-badge { background: #e2e8f0; padding: 5px 15px; border-radius: 20px; font-weight: 600; color: #475569; }

/* CARDS & TABLES */
.card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th { text-align: left; padding: 12px; background: #f8fafc; border-bottom: 2px solid #e2e8f0; color: #64748b; font-size: 13px; }
td { padding: 12px; border-bottom: 1px solid #e2e8f0; color: #334155; }
input, select { padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; width: 100%; margin-bottom: 15px; box-sizing: border-box; }
.btn { padding: 10px 20px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; }
.btn:hover { background: #1d4ed8; }
/* LOGO STYLES */
.login-logo {
    max-width: 150px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}