:root {
  --brand: #2454ff;
  --brand-dark: #17348c;
}
body { background: #f4f6fb; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
.app-topbar { background: linear-gradient(90deg, var(--brand-dark), var(--brand)); }
.app-wrapper { display: flex; min-height: calc(100vh - 56px); }
.app-sidebar {
  width: 230px; background: #101a33; flex-shrink: 0; padding-top: 1rem;
  position: relative;
  transition: width .2s ease;
}
.app-sidebar .nav-link {
  color: #c7d0ea; padding: .65rem 1.2rem; font-size: .93rem; border-left: 3px solid transparent;
  white-space: nowrap;
}
.app-sidebar .nav-link i { width: 20px; }
.app-sidebar .nav-link:hover, .app-sidebar .nav-link.active {
  color: #fff; background: rgba(255,255,255,.06); border-left-color: var(--brand);
}
.sidebar-heading {
  display: block; padding: .5rem 1.2rem .3rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: #6f7ba8; white-space: nowrap;
}

/* Sidebar collapse toggle */
.sidebar-toggle-btn {
  position: absolute; top: 14px; right: -14px; width: 28px; height: 28px;
  border: none; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .72rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: pointer; z-index: 5;
}
.sidebar-toggle-btn:hover { background: var(--brand-dark); }
.sidebar-toggle-btn i { transition: transform .2s ease; }

html.sidebar-collapsed .app-sidebar { width: 64px; }
html.sidebar-collapsed .app-sidebar .link-label,
html.sidebar-collapsed .app-sidebar .sidebar-heading { display: none; }
html.sidebar-collapsed .app-sidebar .nav-link {
  text-align: center; padding-left: 0; padding-right: 0; border-left-width: 0;
}
html.sidebar-collapsed .app-sidebar .nav-link i { width: auto; font-size: 1.05rem; }
html.sidebar-collapsed .sidebar-toggle-btn i { transform: rotate(180deg); }

.app-content { flex-grow: 1; padding: 1.5rem 2rem; }
.card { border: none; border-radius: .6rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.card-header { background: #fff; border-bottom: 1px solid #eef0f5; font-weight: 600; }
.table thead th { background: #eef1f8; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.badge { font-weight: 500; }
.auth-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.auth-card { width: 380px; background: #fff; border-radius: .8rem; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.status-track { display: flex; flex-wrap: wrap; gap: .4rem; }
.status-track .badge { font-size: .72rem; }