/*body { font-family: Arial, sans-serif; margin: 0; background: #f8f8f8; }*/
/*header { background: #333; color: #fff; padding: 15px; }*/
/*nav a { color: #fff; margin: 0 10px; text-decoration: none; }*/
/*main { padding: 20px; }*/
/*.cards { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }*/
/*.card { background:#fff; padding:15px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.1); min-width:150px; }*/
/*table { width:100%; border-collapse: collapse; margin-top: 10px; background:#fff; }*/
/*th, td { border:1px solid #ddd; padding:8px; text-align:left; }*/
/*.btn { display:inline-block; padding:8px 12px; background:#333; color:#fff; text-decoration:none; border-radius:4px; }*/
/*form input, form select { padding:8px; margin:6px 0; width:100%; max-width:400px; }*/



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

:root{
  --sidebar-width-collapsed: 80px;
  --sidebar-width-expanded: 220px;
  --accent: #38bdf8;
}

* { box-sizing: border-box; }
body {
  margin:0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg,#eef2f3,#dfe9f3);
  color:#1f2937;
}

/* Sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--sidebar-width-collapsed);
  background: linear-gradient(180deg,#0f1724,#12263a);
  padding: 18px 8px;
  color: #fff;
  transition: width .25s ease;
  overflow: hidden;
  z-index: 200;
}
.sidebar.expanded, .sidebar:hover { width: var(--sidebar-width-expanded); }
.sidebar .logo { display:flex; align-items:center; justify-content:center; gap:8px; }
.sidebar .logo .title { display:none; font-weight:600; color:var(--accent); }
.sidebar.expanded .logo .title, .sidebar:hover .logo .title { display:inline-block; }

.sidebar .nav { margin-top:14px; padding-left:0; }
.sidebar .nav .nav-item { margin-bottom:6px; }
.sidebar .nav .nav-link {
  color: #cbd5e1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  transition: background .15s ease, color .15s ease;
  text-decoration:none;
}
.sidebar .nav .nav-link i { min-width:24px; text-align:center; }
.sidebar .nav .nav-link span { display:none; }
.sidebar.expanded .nav .nav-link span, .sidebar:hover .nav .nav-link span { display:inline-block; }

.sidebar .nav .nav-link:hover { background: rgba(255,255,255,0.08); color:#fff; }
.sidebar .nav .nav-link.active { background: var(--accent); color:#082032; font-weight:600; }

/* main content - shifted according to sidebar */
.main-content {
  margin-left: var(--sidebar-width-collapsed);
  transition: margin-left .25s ease;
  min-height:100vh;
}
.sidebar.expanded ~ .main-content, .sidebar:hover ~ .main-content { margin-left: var(--sidebar-width-expanded); }

/* topbar */
.topbar {
  background: rgba(255,255,255,0.85);
  border-radius:10px;
  padding:12px 18px;
  margin-bottom:18px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  backdrop-filter: blur(6px);
}

/* cards & glass effect */
.card {
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
  box-shadow: 0 8px 24px rgba(16,24,40,0.06);
  border: 1px solid rgba(0,0,0,0.03);
}
.card .card-body { padding:18px; }

/* table styling */
.table {
  border-radius:12px;
  overflow:hidden;
  background: #fff;
}
.table thead th {
  background: linear-gradient(90deg,var(--accent),#2563eb);
  color:#fff;
  border: none;
}
.table tbody tr:hover { background: rgba(56,189,248,0.06); }

/* buttons and utility */
.btn { border-radius:10px; padding:8px 14px; }
.text-accent { color: var(--accent) !important; }

/* responsive small-screen behavior */
@media (max-width:900px) {
  .sidebar { width: var(--sidebar-width-expanded); position:relative; height:auto; }
  .main-content { margin-left:0; padding: 10px; }
  .sidebar .nav .nav-link span { display:inline-block; }
}