:root {
  --sidebar-bg: #1f2d3d;
  --sidebar-link: #c2c7d0;
  --sidebar-active: #007bff;
  --topbar-bg: #ffffff;
  --content-bg: #f4f6f9;
}

body { background: var(--content-bg); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 14px; }

.app-wrapper { min-height: 100vh; }
.app-sidebar {
  width: 240px; background: var(--sidebar-bg); color: #fff;
  position: fixed; left: 0; top: 0; bottom: 0; overflow-y: auto;
  transition: width 0.2s;
}
.app-sidebar .brand {
  padding: 14px 18px; font-size: 18px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 10px;
}
.app-sidebar .brand i { color: #4dabf7; }
.app-sidebar .nav-section {
  padding: 14px 18px 4px; font-size: 11px; text-transform: uppercase;
  color: #6c757d; letter-spacing: 1px;
}
.app-sidebar .nav-link {
  color: var(--sidebar-link); padding: 9px 18px; border-left: 3px solid transparent;
  display: flex; align-items: center; gap: 10px;
}
.app-sidebar .nav-link:hover { background: rgba(255,255,255,0.05); color: #fff; }
.app-sidebar .nav-link.active {
  color: #fff; background: rgba(0,123,255,0.15); border-left-color: var(--sidebar-active);
}
.app-sidebar .nav-link i { width: 18px; text-align: center; }

.app-main { margin-left: 240px; flex: 1; }
.sidebar-collapsed .app-sidebar { width: 0; overflow: hidden; }
.sidebar-collapsed .app-main { margin-left: 0; }

.topbar {
  background: var(--topbar-bg); padding: 10px 16px;
  border-bottom: 1px solid #dee2e6; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.page-content { min-height: calc(100vh - 110px); }
.app-footer { background: #fff; border-top: 1px solid #dee2e6; }

.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.card .card-header { background: #fff; border-bottom: 1px solid #f1f1f1; font-weight: 600; }

.stat-card { border-left: 4px solid #007bff; }
.stat-card.green { border-left-color: #28a745; }
.stat-card.orange { border-left-color: #fd7e14; }
.stat-card.red { border-left-color: #dc3545; }
.stat-card .stat-num { font-size: 28px; font-weight: 700; }
.stat-card .stat-lbl { color: #6c757d; font-size: 12px; text-transform: uppercase; }

.stat-clickable { color: inherit; transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; }
.stat-clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.10); color: inherit; }
.stat-clickable .stat-num, .stat-clickable .stat-lbl { color: inherit; }

.table thead th { background: #f8f9fa; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

.login-page { min-height: 100vh; background: linear-gradient(135deg, #1f2d3d 0%, #2d4263 100%); display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 8px; padding: 32px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.login-card .logo { text-align: center; font-size: 22px; font-weight: 700; color: #1f2d3d; margin-bottom: 4px; }
.login-card .subtitle { text-align: center; color: #6c757d; margin-bottom: 24px; font-size: 13px; }

@media (max-width: 768px) {
  .app-sidebar { width: 0; }
  .app-main { margin-left: 0; }
  .sidebar-collapsed .app-sidebar { width: 240px; }
}

.impersonate-banner {
  background: #fff3cd; color: #664d03; padding: 8px 16px;
  border-bottom: 2px solid #ffc107; font-size: 13px;
}
.impersonate-banner i { color: #b07d00; margin-right: 8px; }

.app-sidebar.platform { background: #2d4263; }
.app-sidebar .brand small { font-weight: 600; }

.muster-table td { text-align: center; font-size: 11px; min-width: 28px; }
.muster-table td.s-present { background: #d4edda; }
.muster-table td.s-absent { background: #f8d7da; }
.muster-table td.s-half_day { background: #ffe5b4; }
.muster-table td.s-leave { background: #fff3cd; }
.muster-table td.s-weekly_off { background: #e2e3e5; }
.muster-table td.s-holiday { background: #cfe2ff; }
.muster-table td.s-outdoor_duty { background: #d1e7dd; }