:root{--navy:#102a56;--blue:#2563eb;--green:#16a34a;--surface:#f4f7fb}body{background:var(--surface);color:#172033}.navbar{background:linear-gradient(100deg,var(--navy),#174a8b);height:64px}.sidebar{width:260px;min-height:calc(100vh - 64px);background:#102a56}.sidebar .nav-link{display:block;color:#cbd8eb;padding:.55rem .75rem;border-radius:.6rem;margin:.1rem 0;font-size:.9rem}.sidebar .nav-link:hover{color:#fff;background:#ffffff16}.menu-label{color:#77a7db;text-transform:uppercase;font-size:.68rem;font-weight:700;letter-spacing:.08em;margin:1.2rem .75rem .35rem}.content{min-width:0}.card,.stat-card{border:0;border-radius:1rem;box-shadow:0 5px 20px #23406b12}.stat-card{background:#fff;padding:1.25rem;border-left:4px solid var(--green)}.stat-card span{display:block;color:#65738b;font-size:.82rem}.stat-card strong{display:block;font-size:2rem;margin-top:.35rem}.table th{background:#eef4fb;white-space:nowrap;font-size:.78rem}.table td{font-size:.82rem}.notification{display:block;color:#172033;text-decoration:none;padding:.8rem 0;border-bottom:1px solid #edf0f5}.notification small{display:block;color:#718096;margin-top:.2rem}.report-card{display:flex;align-items:center;gap:1rem;background:#fff;padding:1.2rem;border-radius:1rem;text-decoration:none;color:#172033;box-shadow:0 5px 20px #23406b12}.report-card i{font-size:1.7rem;color:var(--blue)}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#2c75d9,#102a56)}.login-card{width:min(440px,92vw);border-radius:1.4rem}.brand-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,var(--blue),var(--green));color:#fff;font-size:1.5rem;font-weight:800}
.form-page{max-width:1180px;margin:0 auto}.form-hero{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.5rem 1.75rem;margin-bottom:1.25rem;border-radius:1.2rem;background:linear-gradient(120deg,#102a56,#2563eb);color:#fff;box-shadow:0 14px 30px #23406b25}.form-hero h2{margin:.5rem 0 .2rem;font-weight:750}.form-hero p{margin:0;color:#dce8fb}.form-back{color:#bcd6ff;text-decoration:none;font-size:.88rem}.form-back:hover{color:#fff}.form-hero-icon{width:72px;height:72px;display:grid;place-items:center;flex:0 0 auto;border-radius:1.2rem;background:#ffffff18;font-size:2rem}.form-card{overflow:hidden}.form-field{height:100%;padding:1rem;border:1px solid #e6edf7;border-radius:.9rem;background:#fbfdff;transition:.2s ease}.form-field:focus-within{border-color:#8ab4f8;background:#fff;box-shadow:0 0 0 4px #2563eb10}.form-label{font-weight:650;color:#233653;margin-bottom:.55rem}.form-control,.form-select{min-height:46px;border-color:#d8e2f0;border-radius:.7rem}.form-control:focus,.form-select:focus{border-color:#4f8deb;box-shadow:0 0 0 .2rem #2563eb18}.form-field textarea.form-control{min-height:112px}.form-text{margin-top:.5rem;color:#75849b}.existing-file{margin-top:.55rem;color:#52647d;font-size:.82rem}.form-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1.1rem 1.5rem;background:#f8fafc;border-top:1px solid #e9eef5}
.sidebar-toggle{width:100%;border:0;background:transparent;display:flex!important;align-items:center;justify-content:space-between}.sidebar-toggle .bi-chevron-down{transition:transform .2s}.sidebar-toggle:not(.collapsed) .bi-chevron-down{transform:rotate(180deg)}.sidebar-submenu{padding-left:.75rem;border-left:1px solid #ffffff1f;margin-left:.8rem}.sidebar-submenu .nav-link{font-size:.82rem;padding:.42rem .65rem}.attendance-table td{vertical-align:middle}.attendance-table td small{display:block;color:#75849b}.attendance-options{display:flex;flex-wrap:wrap;gap:.4rem}.attendance-options label input{display:none}.attendance-options label span{display:block;padding:.35rem .65rem;border:1px solid #dce5f0;border-radius:2rem;font-size:.78rem;cursor:pointer}.attendance-options input:checked+.status-hadir{background:#dcfce7;border-color:#86efac;color:#166534}.attendance-options input:checked+.status-izin{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.attendance-options input:checked+.status-sakit{background:#fef3c7;border-color:#fcd34d;color:#92400e}.attendance-options input:checked+.status-alpha{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
@media(max-width:991px){.sidebar{min-height:100vh}.content{width:100%}}@media(max-width:575px){.form-hero{padding:1.25rem}.form-hero-icon{display:none}.form-actions{position:sticky;bottom:0;z-index:5}.form-actions .btn{flex:1}}
.sidebar {
  width: 286px;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(4, 54, 126, .98), rgba(2, 22, 58, .98)),
    url("../img/bg-labkom.png") center/cover no-repeat;
  box-shadow: 10px 0 35px rgba(3, 34, 82, .18);
}

.sidebar .offcanvas-body {
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 18px 16px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  margin-bottom: 18px;
}

.brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0aa6ff, #16c784);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(10, 166, 255, .35);
}

.brand-title {
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}

.brand-subtitle {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  margin: 3px 0 0;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #dff7ff;
  background: rgba(10, 166, 255, .18);
  font-size: 12px;
  font-weight: 700;
}

.menu-label {
  color: rgba(255, 255, 255, .48);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 18px 10px 8px;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, .82);
  border-radius: 15px;
  padding: 11px 13px;
  margin-bottom: 5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: .2s ease;
}

.sidebar .nav-link i {
  font-size: 17px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(10, 166, 255, .85), rgba(22, 199, 132, .68));
  box-shadow: 0 10px 24px rgba(10, 166, 255, .22);
  transform: translateX(3px);
}

.sidebar-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  justify-content: space-between;
}

.sidebar-toggle .bi-chevron-down {
  transition: .2s ease;
}

.sidebar-toggle:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-submenu {
  margin: 3px 0 10px 17px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.sidebar-submenu .nav-link {
  font-size: 14px;
  padding: 9px 12px;
  color: rgba(255, 255, 255, .68);
}

.logout-link {
  margin-top: 22px;
  color: #ffe9a8 !important;
  background: rgba(255, 193, 7, .10);
}

.logout-link:hover {
  background: linear-gradient(135deg, #ffb703, #fb8500) !important;
  color: #fff !important;
}

@media (max-width: 991px) {
  .sidebar {
    width: 300px;
  }
}