/* ================= BASE ================= */
body {
font-family: 'Segoe UI', sans-serif;
background: #f5f7fb;
margin: 0;
}

/* ================= LAYOUT ================= */
.layout {
display: flex;
}

/* ================= SIDEBAR ================= */
.sidebar {
width: 220px;
background: #0f172a;
color: white;
height: 100vh;
position: fixed;
transition: 0.3s;
overflow: hidden;
}

.sidebar.collapsed {
width: 70px;
}

.sidebar h2 {
padding: 20px;
font-size: 18px;
}

.sidebar a {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
color: #cbd5f5;
text-decoration: none;
font-size: 15px;
}

.sidebar a:hover {
background: #1e293b;
color: white;
}

/* ICON STYLE */
.sidebar i {
font-size: 20px;
min-width: 25px;
text-align: center;
}

/* HIDE TEXT WHEN COLLAPSED */
.sidebar.collapsed span {
display: none;
}

/* TOGGLE BUTTON */
.toggle-btn {
position: absolute;
top: 10px;
right: -15px;
background: #2563eb;
color: white;
border-radius: 50%;
padding: 5px 10px;
cursor: pointer;
}

/* ================= CONTENT ================= */
.main {
margin-left: 220px;
padding: 30px;
width: 100%;
transition: 0.3s;
}

.sidebar.collapsed + .main {
margin-left: 70px;
}

/* ================= CARD ================= */
.card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
max-width: 700px;
}

/* ================= FORM ================= */
label {
display: block;
margin-top: 15px;
font-weight: 500;
}

input, select {
width: 100%;
padding: 14px;
margin-top: 6px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 15px;
}

/* BIG BUTTON */
button {
margin-top: 20px;
padding: 14px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}

button:hover {
background: #1e40af;
}

/* ================= GRID ================= */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

.card-box {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
text-align: center;
font-size: 16px;
}

/* ================= SUCCESS ================= */
.success {
background: #16a34a;
color: white;
padding: 10px;
border-radius: 6px;
margin-bottom: 10px;
}

.error {
background: #dc2626;
color: white;
padding: 10px;
border-radius: 6px;
margin-bottom: 10px;
}