/* Styles for Puskesmas app */
body { padding-top: 70px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #1a1a1a; font-weight: 500; }
.navbar-brand { font-weight: 900; color: #ffffff !important; font-size: 1.5rem; }
main h1 { margin-bottom: 0.75rem; color: #000000; font-weight: 900; }

/* Beranda Hero & Styling */
.beranda-hero {
  background: linear-gradient(135deg, #ff006e 0%, #0066ff 100%);
  color: white;
  padding: 30px 0;
  margin: -20px -12px 30px -12px;
  margin-top: -30px;
  border-radius: 0 0 15px 15px;
}

.beranda-hero h1 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 0;
  color: #ffffff;
}

.beranda-hero p {
  font-size: 1rem;
  opacity: 0.95;
  margin-bottom: 0;
  color: #ffffff;
  font-weight: 600;
}

.card {
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.card-title {
  font-weight: 800;
  color: #ff006e;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
}

/* Profil Card */
.profil-card {
  text-align: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.profil-card .card-body {
  padding: 30px 20px;
}

.profil-image-container {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.profil-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profil-card .card-title {
  background: linear-gradient(135deg, #ff006e 0%, #0066ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  justify-content: center;
  font-size: 1.4rem;
  margin-top: 10px;
  font-weight: 900;
}

.profil-card .card-text {
  color: #1a1a1a;
  line-height: 1.6;
  font-weight: 500;
  font-size: 1.05rem;
}

.profil-card .btn {
  margin-top: 15px;
  border-radius: 8px;
  padding: 8px 25px;
  font-weight: 600;
}
/* Chart Card */
.chart-card {
  background: white;
}

.chart-card .card-title {
  color: #333;
  font-size: 1.2rem;
}

canvas { max-height: 300px; }

/* Enhanced navbar/menu styles */
.navbar.navbar-dark.bg-primary {
  background: linear-gradient(90deg, #0d6efd 0%, #4f46e5 60%, #7c3aed 100%);
  padding: 0.4rem 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.navbar-brand { display:flex; align-items:center; gap:10px; }
.navbar .nav-link {
  color: rgba(255,255,255,0.95);
  padding: 0.6rem 0.9rem;
  border-radius:8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.navbar .nav-link i { margin-right:6px; }
.navbar .nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s;
}
.navbar .nav-link:hover::before {
  left: 100%;
}
.navbar .nav-link:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.navbar .dropdown-item.active {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  font-weight:600;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.3);
}
.navbar .dropdown-menu {
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
  border: none;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  backdrop-filter: blur(10px);
  animation: dropdownFadeIn 0.2s ease-out;
}
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.navbar .dropdown-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:10px;
  color:#0f172a;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin-bottom: 2px;
}
.navbar .dropdown-item:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}
.navbar .dropdown-item:hover .fa-fw {
  color: #ffffff;
  transform: scale(1.1);
}
.navbar .dropdown-menu .fa-fw {
  width:20px;
  opacity:0.9;
  transition: all 0.25s ease;
  color: #4f46e5;
}

@media(max-width:767px){
  .navbar .nav-link { padding:0.5rem 0.5rem; }
}
/* Nested dropdown (submenu) styling for Bootstrap 5 */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 100%; left: 0; margin-top: .125rem; margin-left: 0; }
.dropdown-submenu.dropend > .dropdown-menu { top: 100%; left: 0; margin-top: .125rem; margin-left: 0; }
.dropdown-submenu .dropdown-toggle::after { float: right; margin-left: .5rem; }
.dropdown-menu .dropdown-item { white-space: nowrap; }

/* Small tweaks to ensure nested menus look good in navbar */
.navbar .dropdown-menu .dropdown-submenu > .dropdown-menu { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12); border-radius: 8px; }

/* Enable click-toggle for nested dropdowns (handled by Bootstrap data attributes) */

/* Admin menu card */
.admin-menu { width: 320px; max-width: 90vw; padding: 0.5rem; }
.admin-menu .profile-area { display:flex; gap:12px; align-items:center; padding:12px; }
.admin-menu .profile-area .avatar { width:48px; height:48px; border-radius:50%; background:#eef2ff; display:flex; align-items:center; justify-content:center; font-weight:700; color:#4f46e5; font-size:1.1rem; }
.admin-menu .profile-area .info { flex:1; }
.admin-menu .profile-area .info .name { font-weight:700; color:#0f172a; }
.admin-menu .profile-area .info .role { font-size:0.85rem; color:#6b7280; }
.admin-menu .admin-actions { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; padding: 8px 12px 12px; }
.admin-menu .admin-actions a { display:flex; gap:10px; align-items:center; padding:10px; border-radius:8px; text-decoration:none; color:#0f172a; background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,0.04); }
.admin-menu .admin-actions a .fa-fw { width:22px; color:#4f46e5; }
.admin-menu .admin-footer { padding:8px 12px 12px; border-top:1px dashed #eef2ff; display:flex; gap:8px; justify-content:space-between; align-items:center; }
.admin-menu .admin-footer a {
  font-size:0.9rem;
  color:#4f46e5;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e0e7ff;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.admin-menu .admin-footer a:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.admin-menu .admin-footer a i {
  font-size: 0.8rem;
}

/* Table Styles - Bright & Clear */
table {
  border-collapse: collapse;
}

table thead {
  background: linear-gradient(135deg, #ff006e 0%, #0066ff 100%);
}

table thead th {
  color: #ffffff;
  font-weight: 800;
  padding: 18px 15px;
  font-size: 1.1rem;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 2px solid #f0f0f0;
}

table tbody tr:hover {
  background-color: #f0f9ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

table tbody td {
  padding: 16px 15px;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 1.05rem;
}

table tbody td strong {
  color: #ff006e;
  font-weight: 700;
}

/* Form enhancements for admin pages */
.card { border-radius: 12px; }
.card .card-body { padding: 1.4rem; }
.card .card-title { font-weight:700; color:#ff006e; }
.form-label { font-weight:600; color:#374151; }
.form-control { border:1px solid #e6edf3; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.form-control:focus { border-color: #ff006e; box-shadow: 0 6px 18px rgba(255,0,110,0.08); }
.btn-primary { background: linear-gradient(90deg,#ff006e,#0066ff); border: none; box-shadow: 0 8px 20px rgba(255,0,110,0.12); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-outline-secondary { border-radius: 8px; }

/* Manajemen form styles - SIMPLE */
.manajemen-form {
  background: transparent; /* let card background handle base color */
  border: 1px solid #e6e6e6;
  box-shadow: none;
  border-radius: 8px;
}
.manajemen-form .card-header {
  background: transparent;
  color: #111827;
  border-bottom: 1px solid #f1f1f1;
  padding: 10px 12px;
}
.manajemen-form .card-body {
  background: transparent;
  padding: 12px;
}
.manajemen-form .form-label { color: #374151; font-weight:600; }
.manajemen-form .form-control,
.manajemen-form .form-select,
.manajemen-form textarea {
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color .12s ease;
}
.manajemen-form .form-control:focus,
.manajemen-form .form-select:focus,
.manajemen-form textarea:focus {
  border-color: #93c5fd;
  box-shadow: none;
}
.manajemen-form .form-floating > label { color: #6b7280; padding-left: 6px; }
.manajemen-form .form-text { color: #6b7280; margin-top: 6px; }
.btn-manajemen-save {
  background: #2563eb;
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight:700;
  box-shadow: none;
}
.btn-manajemen-save:hover { opacity: 0.95; }
.btn-manajemen-cancel {
  background: #6b7280;
  border: none;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
}
.manajemen-form .form-floating > .form-control,
.manajemen-form .form-floating > .form-select,
.manajemen-form .form-floating > textarea { padding: .6rem .7rem; }

/* Theme variables and presets */
:root{
  --bg:#ffffff; --card:#ffffff; --text:#0f172a; --muted:#6b7280; --primary-1:#7c3aed; --primary-2:#4f46e5; --accent:#10b981; --card-radius:12px;
}
.theme-soft { --bg: #fbfbff; --card: #ffffff; --text: #0f172a; --muted:#6b7280; --primary-1:#a78bfa; --primary-2:#c4b5fd; --accent:#60a5fa; }
.theme-vibrant { --bg:#fff7ed; --card:#ffffff; --text:#0b1226; --muted:#475569; --primary-1:#ff6b6b; --primary-2:#f97316; --accent:#06b6d4; }
.theme-dark { --bg:#0b1220; --card:#0f1724; --text:#e6eef8; --muted:#9aa6b2; --primary-1:#7c3aed; --primary-2:#4f46e5; --accent:#06b6d4; }
.theme-minimal { --bg:#ffffff; --card:#ffffff; --text:#111827; --muted:#6b7280; --primary-1:#111827; --primary-2:#374151; --accent:#2563eb; }

body { background: var(--bg); color: var(--text); }
.card { background: var(--card); border-radius: var(--card-radius); }
.manajemen-form .card-header { background: linear-gradient(90deg,var(--primary-1),var(--primary-2)); }
.btn-primary { background: linear-gradient(90deg,var(--primary-1),var(--primary-2)); }
.btn-manajemen-save { background: linear-gradient(90deg,var(--accent),var(--primary-2)); }

/* Quick preview buttons */
#themeQuickPreview { vertical-align: middle; }
.theme-preview-btn { width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,0.08); margin-left:6px; display:inline-block; vertical-align:middle; cursor:pointer; box-shadow: 0 2px 6px rgba(15,23,42,0.06); }
.theme-preview-btn[data-theme="theme-soft"] { background: linear-gradient(135deg,#f8f1ff,#efe6ff); }
.theme-preview-btn[data-theme="theme-vibrant"] { background: linear-gradient(135deg,#fff4ec,#ffe3b8); }
.theme-preview-btn[data-theme="theme-dark"] { background: linear-gradient(135deg,#0b1220,#111827); border:1px solid rgba(255,255,255,0.06); }
.theme-preview-btn[data-theme="theme-minimal"] { background: linear-gradient(135deg,#ffffff,#f3f4f6); }
.theme-preview-btn:focus { outline: none; transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }

/* Floating label tweaks for manajemen form */
.manajemen-form .form-floating > .form-control,
.manajemen-form .form-floating > .form-select,
.manajemen-form .form-floating > textarea {
  border: 1px solid rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.9);
  padding: 1.1rem .75rem;
  border-radius: 10px;
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.manajemen-form .form-floating > .form-control:focus,
.manajemen-form .form-floating > .form-select:focus,
.manajemen-form .form-floating > textarea:focus {
  box-shadow: 0 10px 30px rgba(124,58,237,0.08);
  transform: translateY(-2px);
}
.manajemen-form .form-floating > label {
  padding-left: 8px; color: var(--muted); font-weight:600;
}
.manajemen-form { border-radius: 14px; overflow: visible; }
.manajemen-form .card-header { display:flex; align-items:center; gap:12px; }
.manajemen-form .card-header h6 { margin:0; font-weight:700; }

/* subtle show animation */
.manajemen-form.showing { animation: formShow 220ms ease-out; }
@keyframes formShow { from { transform: translateY(-8px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* Klaster hero */
.klaster-hero { background: linear-gradient(90deg, rgba(79,70,229,0.08), rgba(124,58,237,0.06)); border: 1px solid rgba(79,70,229,0.06); }
.klaster-hero .hero-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:12px; }

/* Page panel used to wrap main content with white rounded background (like Tambah Pegawai) */
.page-panel {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(34,41,47,0.06);
  -webkit-box-shadow: 0 10px 30px rgba(34,41,47,0.06);
  border: 1px solid rgba(20,28,33,0.04);
}

/* Category list polish */
.category-list .list-group-item { border-radius:10px; margin-bottom:8px; transition: all 0.18s ease; box-shadow: 0 6px 18px rgba(15,23,42,0.04); }
.category-list .list-group-item a { display:block; padding:12px 14px; }
.category-list .list-group-item.active { background: linear-gradient(90deg,var(--primary-1),var(--primary-2)); color: #fff; box-shadow: 0 8px 30px rgba(79,70,229,0.12); }

/* Modern table */
.table-modern { border-radius: 12px; overflow: hidden; }
.table-modern thead th { background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(79,70,229,0.06)); border-bottom: none; }
.table-modern tbody tr:hover { background: rgba(79,70,229,0.03); }





/* Pegawai list placeholders and layout tweaks */
.placeholder-item { background: #fff; opacity: 0.95; }
.placeholder-item .btn { visibility: hidden; }
.list-group .list-group-item.placeholder-item { background: #fff; }
.card.form-card { margin-bottom: 1rem; }
/* Letak Geografis right-panel specific styles */
.letak-right { padding: 12px; }
.letak-right h5, .letak-right h6 { color: #ffffff; font-weight:700; margin-bottom: .5rem; }
.letak-right strong { color: #ffffff; }
.letak-right .card { background: #075b6b; color: #fff; border-radius: .4rem; }
.letak-right .card .card-body { background: transparent; }
.letak-right table { background: transparent; }
.letak-right table thead th { color: #ffffff !important; background: rgba(255,255,255,0.06); font-weight:700; }
.letak-right table tbody td { color: #ffffff !important; background: transparent; }
.letak-right .text-white-50 { color: rgba(255,255,255,0.9) !important; }

/* Edit button for Letak Geografis */
.btn-letak-edit {
  background: linear-gradient(90deg,#0ea5a3 0%,#06b6d4 100%);
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(6,182,212,0.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.btn-letak-edit i { font-size: 0.9rem; }
.btn-letak-edit:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(6,182,212,0.16); }
.btn-letak-edit:active { transform: translateY(0); }

/* Letak Geografis right column styling (match mockup) */
.letak-right .info-card { background: #075b6b; color: #fff; padding: 18px; border-radius: 8px; margin-bottom: 18px; }
.letak-right .info-card .title { font-weight:800; letter-spacing: .6px; }
.letak-right .info-card .content { margin-top: 10px; color: rgba(255,255,255,0.95); }
.letak-right .info-card.table-like table { color: inherit; }
.letak-right .info-card.table-like thead th { color: rgba(255,255,255,0.9); font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06); }
.letak-right .info-card.table-like tbody td { color: rgba(255,255,255,0.95); padding:8px 6px; }

/* Ensure table cell text in letak-right is visible (black on white boxes) */
.letak-right table.table-sm.table-borderless tbody td,
.letak-right table.table-sm tbody td {
  color: #000 !important;
  background: #ffffff !important;
}
.letak-right .edit-toggle { margin-top:8px; }

/* Make the right column visually separated with a subtle dashed outline to match mockup frame */
.letak-frame { border: 2px dotted rgba(0,0,0,0.12); padding: 12px; border-radius: 6px; }

@media (max-width: 991px) {
  .letak-right .info-card { padding: 12px; }
}

/* Sidebar customization overrides */
:root{
  --sidebar-width: 220px; /* default expanded width */
  --sidebar-collapsed-width: 76px; /* compact width showing icons only */
  --sidebar-bg: #1f2937; /* default dark gray-blue */
  --sidebar-text: #e6eef8; /* link text color */
  --sidebar-muted: rgba(230,238,248,0.75);
  --sidebar-active-bg: linear-gradient(90deg,#4f46e5,#7c3aed);
  --sidebar-border: rgba(255,255,255,0.03);
  --sidebar-icon-size: 18px;
}

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  width: var(--sidebar-width) !important;
  padding-top: 0.75rem;
  border-right: 1px solid var(--sidebar-border);
}
.sidebar .nav-link {
  color: var(--sidebar-muted);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight:600;
}
.sidebar .nav-link i { font-size: var(--sidebar-icon-size); width:22px; text-align:center; color: inherit; }
.sidebar .nav-link:hover { color: var(--sidebar-text); background: rgba(255,255,255,0.03); }
.sidebar .nav-link.active { color: white; background: var(--sidebar-active-bg); border-radius: 8px; }
.sidebar .dropdown-menu { background: transparent; border: none; box-shadow: none; padding: 0; }
.sidebar .dropdown-item { color: var(--sidebar-muted); padding: .6rem 1rem; }
.sidebar .dropdown-item:hover { color: var(--sidebar-text); background: rgba(255,255,255,0.03); }

/* compact (collapsed) sidebar showing only icons */
.sidebar.collapsed { width: var(--sidebar-collapsed-width) !important; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 0.8rem 0; }
.sidebar.collapsed .nav-link span { display: none; }
.sidebar.collapsed .dropdown-menu { display: none; }

/* adjust main content when sidebar present */
@media(min-width:992px){
  .main-with-sidebar { margin-left: var(--sidebar-width); transition: margin .18s ease; }
  .main-with-sidebar.sidebar-collapsed { margin-left: var(--sidebar-collapsed-width); }
}

/* small screens: overlay behavior (sidebar shows/hides) */
@media(max-width:991px){
  .sidebar { position: fixed; top:56px; left:0; height: calc(100vh - 56px); transform: translateX(-110%); transition: transform .25s ease; z-index:1200; }
  .sidebar.show { transform: translateX(0); }
}

/* Utility for icon-only labels inside nav links */
.sidebar .nav-link .label { display: inline-block; }


/* Pegawai page specific enhancements */
.pegawai-hero {
  background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(124,58,237,0.06));
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pegawai-hero .hero-title { font-size: 1.35rem; font-weight:700; color: var(--text, #0f172a); }
.pegawai-hero .hero-sub { color: var(--muted,#6b7280); }

/* Make list-group items on the pegawai page look like elevated cards */
.form-card .list-group .list-group-item {
  background: #ffffff;
  border: none;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.form-card .list-group .list-group-item:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(15,23,42,0.08); }
.form-card .list-group .list-group-item .btn-group .btn { border-radius: 8px; }
.form-card .list-group .list-group-item .rounded-circle { border: 2px solid rgba(15,23,42,0.04); }
.form-card .list-group .list-group-item h6 { font-size: 1rem; margin-bottom: 0.25rem; }
.form-card .list-group .list-group-item small.text-muted { color: var(--muted,#6b7280); }

/* Search input inside list card */
.pegawai-search { margin-bottom: 12px; }
.pegawai-search .form-control { border-radius: 10px; padding: .75rem 1rem; }

/* Action badges */
.employee-badge { font-size: 0.72rem; padding: 4px 8px; border-radius: 999px; }


/* Subtle card header */
.card .card-header { background: linear-gradient(90deg,#f8fafc,#eef2ff); border-bottom: none; }

/* Category selection buttons for Klaster 1 */
.category-buttons .btn {
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 2px solid #e9ecef;
  background: white;
  color: #495057;
  text-align: left;
  padding: 12px 16px;
  margin-bottom: 8px;
}

.category-buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: #0d6efd;
  background: #f8f9fa;
  color: #0d6efd;
}

.category-buttons .btn.active {
  background: linear-gradient(135deg, #0d6efd, #4f46e5);
  border-color: #0d6efd;
  color: white;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

.category-buttons .btn.active:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
}

.category-buttons .btn i {
  margin-right: 8px;
  opacity: 0.8;
}

.category-buttons .btn.active i {
  opacity: 1;
}


/ *   P r o f i l   P a g e   E n h a n c e m e n t s   * / 
 
 . p r o f i l - h e r o   { 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 6 6 7 e e a   0 % ,   # 7 6 4 b a 2   1 0 0 % ) ; 
 
     c o l o r :   w h i t e ; 
 
     p a d d i n g :   4 0 p x   0 ; 
 
     m a r g i n :   - 2 0 p x   - 1 2 p x   3 0 p x   - 1 2 p x ; 
 
     m a r g i n - t o p :   - 3 0 p x ; 
 
     b o r d e r - r a d i u s :   0   0   2 0 p x   2 0 p x ; 
 
     t e x t - a l i g n :   c e n t e r ; 
 
     b o x - s h a d o w :   0   8 p x   3 2 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 1 ) ; 
 
 } 
 
 
 
 . p r o f i l - h e r o   h 1   { 
 
     f o n t - s i z e :   2 . 5 r e m ; 
 
     f o n t - w e i g h t :   7 0 0 ; 
 
     m a r g i n - b o t t o m :   1 0 p x ; 
 
     t e x t - s h a d o w :   0   2 p x   4 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 2 ) ; 
 
 } 
 
 
 
 . p r o f i l - h e r o   p   { 
 
     f o n t - s i z e :   1 . 1 r e m ; 
 
     o p a c i t y :   0 . 9 ; 
 
     m a r g i n - b o t t o m :   0 ; 
 
 } 
 
 
 
 / *   E n h a n c e d   T a b   N a v i g a t i o n   * / 
 
 . p r o f i l - t a b s   . n a v - t a b s   { 
 
     b o r d e r :   n o n e ; 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f 8 f a f c   0 % ,   # e 2 e 8 f 0   1 0 0 % ) ; 
 
     p a d d i n g :   1 0 p x ; 
 
     b o r d e r - r a d i u s :   1 5 p x ; 
 
     b o x - s h a d o w :   0   4 p x   1 5 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 0 8 ) ; 
 
 } 
 
 
 
 . p r o f i l - t a b s   . n a v - l i n k   { 
 
     b o r d e r :   n o n e ; 
 
     b a c k g r o u n d :   t r a n s p a r e n t ; 
 
     c o l o r :   # 6 4 7 4 8 b ; 
 
     f o n t - w e i g h t :   6 0 0 ; 
 
     p a d d i n g :   1 2 p x   2 0 p x ; 
 
     b o r d e r - r a d i u s :   1 0 p x ; 
 
     m a r g i n :   0   2 p x ; 
 
     t r a n s i t i o n :   a l l   0 . 3 s   e a s e ; 
 
     p o s i t i o n :   r e l a t i v e ; 
 
     o v e r f l o w :   h i d d e n ; 
 
 } 
 
 
 
 . p r o f i l - t a b s   . n a v - l i n k : : b e f o r e   { 
 
     c o n t e n t :   ' ' ; 
 
     p o s i t i o n :   a b s o l u t e ; 
 
     t o p :   0 ; 
 
     l e f t :   - 1 0 0 % ; 
 
     w i d t h :   1 0 0 % ; 
 
     h e i g h t :   1 0 0 % ; 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   t r a n s p a r e n t ,   r g b a ( 7 9 ,   7 0 ,   2 2 9 ,   0 . 1 ) ,   t r a n s p a r e n t ) ; 
 
     t r a n s i t i o n :   l e f t   0 . 5 s ; 
 
 } 
 
 
 
 . p r o f i l - t a b s   . n a v - l i n k : h o v e r : : b e f o r e   { 
 
     l e f t :   1 0 0 % ; 
 
 } 
 
 
 
 . p r o f i l - t a b s   . n a v - l i n k : h o v e r   { 
 
     b a c k g r o u n d :   r g b a ( 7 9 ,   7 0 ,   2 2 9 ,   0 . 1 ) ; 
 
     c o l o r :   # 4 f 4 6 e 5 ; 
 
     t r a n s f o r m :   t r a n s l a t e Y ( - 2 p x ) ; 
 
 } 
 
 
 
 . p r o f i l - t a b s   . n a v - l i n k . a c t i v e   { 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 4 f 4 6 e 5 ,   # 7 c 3 a e d ) ; 
 
     c o l o r :   w h i t e ; 
 
     b o x - s h a d o w :   0   4 p x   1 5 p x   r g b a ( 7 9 ,   7 0 ,   2 2 9 ,   0 . 3 ) ; 
 
 } 
 
 
 
 . p r o f i l - t a b s   . n a v - l i n k   i   { 
 
     m a r g i n - r i g h t :   8 p x ; 
 
     f o n t - s i z e :   1 . 1 e m ; 
 
 } 
 
 
 
 / *   E n h a n c e d   C a r d s   * / 
 
 . p r o f i l - c a r d - e n h a n c e d   { 
 
     b o r d e r :   n o n e ; 
 
     b o r d e r - r a d i u s :   1 6 p x ; 
 
     t r a n s i t i o n :   a l l   0 . 3 s   e a s e ; 
 
     b o x - s h a d o w :   0   4 p x   2 0 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 0 8 ) ; 
 
     o v e r f l o w :   h i d d e n ; 
 
 } 
 
 
 
 . p r o f i l - c a r d - e n h a n c e d : h o v e r   { 
 
     t r a n s f o r m :   t r a n s l a t e Y ( - 8 p x ) ; 
 
     b o x - s h a d o w :   0   1 2 p x   4 0 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 1 5 ) ; 
 
 } 
 
 
 
 . p r o f i l - c a r d - e n h a n c e d   . c a r d - h e a d e r   { 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f 8 f a f c ,   # e 2 e 8 f 0 ) ; 
 
     b o r d e r - b o t t o m :   n o n e ; 
 
     p a d d i n g :   2 0 p x ; 
 
 } 
 
 
 
 . p r o f i l - c a r d - e n h a n c e d   . c a r d - b o d y   { 
 
     p a d d i n g :   2 5 p x ; 
 
 } 
 
 
 
 . p r o f i l - c a r d - e n h a n c e d   . c a r d - t i t l e   { 
 
     f o n t - s i z e :   1 . 4 r e m ; 
 
     f o n t - w e i g h t :   7 0 0 ; 
 
     c o l o r :   # 1 e 2 9 3 b ; 
 
     m a r g i n - b o t t o m :   1 5 p x ; 
 
     d i s p l a y :   f l e x ; 
 
     a l i g n - i t e m s :   c e n t e r ; 
 
     g a p :   1 0 p x ; 
 
 } 
 
 
 
 . p r o f i l - c a r d - e n h a n c e d   . c a r d - t i t l e   i   { 
 
     c o l o r :   # 4 f 4 6 e 5 ; 
 
     f o n t - s i z e :   1 . 3 e m ; 
 
 } 
 
 
 
 / *   P e g a w a i   S e c t i o n   E n h a n c e m e n t s   * / 
 
 . p e g a w a i - c a r d   { 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f 0 f 9 f f   0 % ,   # e 0 f 2 f e   1 0 0 % ) ; 
 
     b o r d e r - l e f t :   4 p x   s o l i d   # 0 e a 5 e 9 ; 
 
 } 
 
 
 
 . p e g a w a i - t a b l e - c o n t a i n e r   { 
 
     b a c k g r o u n d :   w h i t e ; 
 
     b o r d e r - r a d i u s :   1 2 p x ; 
 
     o v e r f l o w :   h i d d e n ; 
 
     b o x - s h a d o w :   0   4 p x   1 5 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 0 5 ) ; 
 
 } 
 
 
 
 / *   G e o g r a f i s   S e c t i o n   * / 
 
 . g e o g r a f i s - c a r d   { 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f e f 3 c 7   0 % ,   # f d e 6 8 a   1 0 0 % ) ; 
 
     b o r d e r - l e f t :   4 p x   s o l i d   # f 5 9 e 0 b ; 
 
 } 
 
 
 
 . g e o g r a f i s - m a p   { 
 
     b o r d e r - r a d i u s :   1 2 p x ; 
 
     o v e r f l o w :   h i d d e n ; 
 
     b o x - s h a d o w :   0   4 p x   1 5 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 1 ) ; 
 
 } 
 
 
 
 / *   V i s i   M i s i   S e c t i o n   * / 
 
 . v i s i - m i s i - c o n t a i n e r   . c a r d   { 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # e c f d f 5   0 % ,   # d 1 f a e 5   1 0 0 % ) ; 
 
     b o r d e r - l e f t :   4 p x   s o l i d   # 1 0 b 9 8 1 ; 
 
     m a r g i n - b o t t o m :   2 0 p x ; 
 
 } 
 
 
 
 . v i s i - m i s i - c o n t a i n e r   . c a r d - t i t l e   { 
 
     c o l o r :   # 0 6 5 f 4 6 ; 
 
 } 
 
 
 
 . v i s i - m i s i - c o n t a i n e r   . c a r d - t i t l e   i   { 
 
     c o l o r :   # 0 5 9 6 6 9 ; 
 
 } 
 
 
 
 / *   J e n i s   L a y a n a n   G r i d   * / 
 
 . j e n i s - l a y a n a n - g r i d   { 
 
     d i s p l a y :   g r i d ; 
 
     g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( a u t o - f i t ,   m i n m a x ( 3 0 0 p x ,   1 f r ) ) ; 
 
     g a p :   2 0 p x ; 
 
     m a r g i n - t o p :   2 0 p x ; 
 
 } 
 
 
 
 . j e n i s - l a y a n a n - c a r d   { 
 
     b a c k g r o u n d :   w h i t e ; 
 
     b o r d e r - r a d i u s :   1 6 p x ; 
 
     p a d d i n g :   2 5 p x ; 
 
     t e x t - a l i g n :   c e n t e r ; 
 
     t r a n s i t i o n :   a l l   0 . 3 s   e a s e ; 
 
     b o x - s h a d o w :   0   4 p x   2 0 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 0 8 ) ; 
 
     b o r d e r :   1 p x   s o l i d   # e 2 e 8 f 0 ; 
 
     p o s i t i o n :   r e l a t i v e ; 
 
     o v e r f l o w :   h i d d e n ; 
 
 } 
 
 
 
 . j e n i s - l a y a n a n - c a r d : : b e f o r e   { 
 
     c o n t e n t :   ' ' ; 
 
     p o s i t i o n :   a b s o l u t e ; 
 
     t o p :   0 ; 
 
     l e f t :   - 1 0 0 % ; 
 
     w i d t h :   1 0 0 % ; 
 
     h e i g h t :   1 0 0 % ; 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   t r a n s p a r e n t ,   r g b a ( 7 9 ,   7 0 ,   2 2 9 ,   0 . 0 5 ) ,   t r a n s p a r e n t ) ; 
 
     t r a n s i t i o n :   l e f t   0 . 6 s ; 
 
 } 
 
 
 
 . j e n i s - l a y a n a n - c a r d : h o v e r : : b e f o r e   { 
 
     l e f t :   1 0 0 % ; 
 
 } 
 
 
 
 . j e n i s - l a y a n a n - c a r d : h o v e r   { 
 
     t r a n s f o r m :   t r a n s l a t e Y ( - 8 p x ) ; 
 
     b o x - s h a d o w :   0   1 2 p x   4 0 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 1 5 ) ; 
 
     b o r d e r - c o l o r :   # 4 f 4 6 e 5 ; 
 
 } 
 
 
 
 . j e n i s - l a y a n a n - c a r d   h 5   { 
 
     c o l o r :   # 1 e 2 9 3 b ; 
 
     f o n t - w e i g h t :   7 0 0 ; 
 
     m a r g i n - b o t t o m :   1 5 p x ; 
 
     f o n t - s i z e :   1 . 2 r e m ; 
 
 } 
 
 
 
 . j e n i s - l a y a n a n - c a r d   p   { 
 
     c o l o r :   # 6 4 7 4 8 b ; 
 
     l i n e - h e i g h t :   1 . 6 ; 
 
     m a r g i n - b o t t o m :   0 ; 
 
 } 
 
 
 
 / *   D o k u m e n   P u b l i k   C a r d s   * / 
 
 . d o k u m e n - g r i d   { 
 
     d i s p l a y :   g r i d ; 
 
     g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( a u t o - f i t ,   m i n m a x ( 2 8 0 p x ,   1 f r ) ) ; 
 
     g a p :   2 0 p x ; 
 
     m a r g i n - t o p :   2 0 p x ; 
 
 } 
 
 
 
 . d o k u m e n - c a r d   { 
 
     b a c k g r o u n d :   w h i t e ; 
 
     b o r d e r - r a d i u s :   1 6 p x ; 
 
     p a d d i n g :   2 0 p x ; 
 
     t r a n s i t i o n :   a l l   0 . 3 s   e a s e ; 
 
     b o x - s h a d o w :   0   4 p x   2 0 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 0 8 ) ; 
 
     b o r d e r :   1 p x   s o l i d   # e 2 e 8 f 0 ; 
 
     t e x t - a l i g n :   c e n t e r ; 
 
 } 
 
 
 
 . d o k u m e n - c a r d : h o v e r   { 
 
     t r a n s f o r m :   t r a n s l a t e Y ( - 5 p x ) ; 
 
     b o x - s h a d o w :   0   8 p x   3 0 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 1 2 ) ; 
 
     b o r d e r - c o l o r :   # 4 f 4 6 e 5 ; 
 
 } 
 
 
 
 . d o k u m e n - c a r d   i   { 
 
     f o n t - s i z e :   2 . 5 r e m ; 
 
     c o l o r :   # 4 f 4 6 e 5 ; 
 
     m a r g i n - b o t t o m :   1 5 p x ; 
 
 } 
 
 
 
 . d o k u m e n - c a r d   . c a r d - t i t l e   { 
 
     f o n t - s i z e :   1 . 1 r e m ; 
 
     f o n t - w e i g h t :   6 0 0 ; 
 
     c o l o r :   # 1 e 2 9 3 b ; 
 
     m a r g i n - b o t t o m :   1 5 p x ; 
 
 } 
 
 
 
 . d o k u m e n - d o w n l o a d - b t n   { 
 
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 4 f 4 6 e 5 ,   # 7 c 3 a e d ) ; 
 
     c o l o r :   w h i t e ; 
 
     b o r d e r :   n o n e ; 
 
     p a d d i n g :   1 0 p x   2 0 p x ; 
 
     b o r d e r - r a d i u s :   8 p x ; 
 
     f o n t - w e i g h t :   6 0 0 ; 
 
     t e x t - d e c o r a t i o n :   n o n e ; 
 
     d i s p l a y :   i n l i n e - f l e x ; 
 
     a l i g n - i t e m s :   c e n t e r ; 
 
     g a p :   8 p x ; 
 
     t r a n s i t i o n :   a l l   0 . 3 s   e a s e ; 
 
 } 
 
 
 
 . d o k u m e n - d o w n l o a d - b t n : h o v e r   { 
 
     t r a n s f o r m :   t r a n s l a t e Y ( - 2 p x ) ; 
 
     b o x - s h a d o w :   0   6 p x   2 0 p x   r g b a ( 7 9 ,   7 0 ,   2 2 9 ,   0 . 3 ) ; 
 
     c o l o r :   w h i t e ; 
 
     t e x t - d e c o r a t i o n :   n o n e ; 
 
 } 
 
 
 
 / *   R e s p o n s i v e   D e s i g n   * / 
 
 @ m e d i a   ( m a x - w i d t h :   7 6 8 p x )   { 
 
     . p r o f i l - h e r o   h 1   { 
 
         f o n t - s i z e :   2 r e m ; 
 
     } 
 
 
 
     . j e n i s - l a y a n a n - g r i d   { 
 
         g r i d - t e m p l a t e - c o l u m n s :   1 f r ; 
 
     } 
 
 
 
     . d o k u m e n - g r i d   { 
 
         g r i d - t e m p l a t e - c o l u m n s :   1 f r ; 
 
     } 
 
 
 
     . p r o f i l - t a b s   . n a v - l i n k   { 
 
         p a d d i n g :   1 0 p x   1 5 p x ; 
 
         f o n t - s i z e :   0 . 9 r e m ; 
 
     } 
 
 } 
 
 