/* ===== SIDEBAR STYLES ===== */
.sidebar-papikost {
    background: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%);
    color: var(--sidebar-text);
    width: 250px;
    min-height: 100vh;
    max-height: 100vh;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1100;
    box-shadow: 0 0 24px var(--sidebar-shadow);
    font-family: var(--font-family-primary);
    display: flex;
    flex-direction: column;
}

.sidebar-papikost .sidebar-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
}

.sidebar-papikost .sidebar-logo img {
    height: 48px;
    width: auto;
    display: block;
}

.sidebar-papikost .sidebar-group-title {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.7;
    margin: 18px 0 8px 24px;
    letter-spacing: 1px;
    color: var(--sidebar-text-muted);
}

.sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: calc(100vh - 120px); /* Adjust if needed for logo/footer */
    padding-bottom: 32px;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-scroll-thumb) var(--sidebar-bg-start);
}

.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
    background: transparent;
    transition: all 0.3s ease;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 224, 102, 0.4);
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* Show scrollbar when hovering anywhere on the sidebar */
.sidebar-papikost:hover .sidebar-scroll::-webkit-scrollbar {
    width: 8px;
}

.sidebar-papikost:hover .sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--sidebar-scroll-thumb);
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #ffd700;
}

.sidebar-papikost ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-papikost li {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 24px;
    margin: 2px 8px;
    color: var(--sidebar-text);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    position: relative;
    font-weight: 500;
}

.sidebar-papikost li a {
    display: flex;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.sidebar-papikost li.active, 
.sidebar-papikost li:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
    font-weight: bold;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
}

.sidebar-papikost li a i {
    width: 22px;
    margin-right: 12px;
    text-align: center;
}

.sidebar-papikost li i {
    width: 22px;
    margin-right: 12px;
    text-align: center;
}

.sidebar-papikost .sidebar-bottom {
    position: absolute;
    bottom: 24px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0.7;
    font-size: 13px;
}

.sidebar-papikost .sidebar-close {
    display: none;
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1010;
    color: var(--sidebar-hover-bg);
    background: none;
    border: none;
}

/* Desktop behavior - sidebar always visible */
@media (min-width: 992px) {
    .sidebar-papikost {
        transform: translateX(0) !important;
        opacity: 1 !important;
        position: fixed;
        width: 250px;
        min-height: 100vh;
        max-height: 100vh;
        left: 0;
        top: 0;
        transition: none;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .sidebar-papikost .sidebar-close {
        display: none !important;
    }
}

/* Mobile behavior - sidebar slides in from left */
@media (max-width: 991px) {
    .sidebar-papikost {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        position: fixed;
        width: 100vw;
        min-height: 100vh;
        max-height: 100vh;
        left: 0;
        top: 0;
        box-shadow: 0 8px 32px var(--sidebar-shadow-mobile);
        transition: transform 0.4s cubic-bezier(.4,2,.6,1), opacity 0.3s;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 1100 !important;
    }
    
    .sidebar-papikost.open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    .sidebar-papikost .sidebar-close {
        display: block !important;
    }
}

/* Force mobile sidebar behavior - highest specificity */
@media screen and (max-width: 991px) {
    body .sidebar-papikost {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    body .sidebar-papikost.open {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: flex !important;
    }
}

@media (max-width: 991px) {
    .main-content-lynk {
        margin-left: 0;
        padding: 0px 4px 24px 4px;
        min-height: 100vh;
        background: #f7fafb;
    }
}

/* Custom Footer - Normal Bottom Footer */
.footer-bottom-center {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: none !important;
    border: none;
    margin-top: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.footer-bottom-center .footer-content {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    margin-bottom: 0;
    max-width: 100%;
    word-wrap: break-word;
}

/* Desktop - adjust footer for sidebar */
@media (min-width: 992px) {
    .footer-bottom-center {
        margin-top: 40px;
        padding: 0;
        margin-left: 250px;
        width: calc(100% - 250px);
        min-height: 40px;
    }
}

/* Mobile - normal footer behavior */
@media (max-width: 991px) {
    .footer-bottom-center {
        margin-top: 30px;
        padding: 0;
    }
}

.footer-bottom-center .copyright-text {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

/* Responsive footer adjustments */
@media (max-width: 768px) {
    .footer-bottom-center {
        margin-top: 20px;
        padding: 0;
        min-height: 50px;
    }
    
    .footer-bottom-center .footer-content {
        padding: 8px 12px;
        border-radius: 6px;
        max-width: calc(100% - 16px);
    }
    
    .footer-bottom-center .copyright-text,
    .copyright-text,
    .footer-copyright {
        display: none;
    }
}

/* Dynamic height adjustment */
@media (min-height: 600px) {
    .footer-bottom-center {
        min-height: 60px;
    }
}

@media (min-height: 800px) {
    .footer-bottom-center {
        min-height: 70px;
    }
}

@media (max-height: 500px) {
    .footer-bottom-center {
        margin-top: 16px;
        padding: 0;
        min-height: 40px;
    }
    
    .footer-bottom-center .footer-content {
        padding: 6px 8px;
    }
    
    .footer-bottom-center .copyright-text,
    .copyright-text,
    .footer-copyright {
        display: none;
    }
}

/* Extra small screens - footer text wrapping */
@media (max-width: 480px) {
    .footer-bottom-center {
        padding: 0;
    }
    
    .footer-bottom-center .footer-content {
        padding: 8px;
        max-width: calc(100% - 8px);
    }
    
    .footer-bottom-center .copyright-text,
    .copyright-text,
    .footer-copyright {
        display: none;
    }
}
/* ===== END FOOTER STYLES ===== */

.row {
    margin-left: 0;
    margin-right: 0;
}

.row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

.content-detail {
    background: #ffffff;
    border-radius: 8px;
    margin: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
    padding: 15px;
    min-height: calc(100vh - 100px);
}

/* Button improvements */
.btn-aktivitas {
    background: linear-gradient(135deg, #fff100 0%, #ffe600 100%);
    border: none !important;
    color: #333;
    font-weight: 500;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 230, 0, 0.25);
    cursor: pointer;
    width: auto;
    min-width: 120px;
}

.btn-container-aktivitas {
    text-align: center;
    margin-top: 8px;
}

.btn-aktivitas:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(255, 230, 0, 0.35);
    color: #333;
    text-decoration: none;
}


.title-h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
    margin-left: 10px;
}

.title-h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

.content-card {
    margin-left: 10px;
    margin-right: 10px;
}

@media (min-width: 992px) {
    .content-detail {
        margin: 10px;
        padding: 15px;
    }
}

@media (max-width: 991px) {
    .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
    .content-detail {
        margin: 10px 8px 12px 8px;
        padding: 12px;
    }
    .title-h2 {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .content-detail {
        margin: 50px 6px 12px 6px;
        padding: 10px;
        border-radius: 6px;
    }
    .content-card {
        margin-left: 0px;
        margin-right: 0px;
    }
    .title-h2 {
        font-size: 20px;
    }
    .btn-aktivitas {
        padding: 6px 12px;
        font-size: 10px;
        min-width: 90px;
    }
}

/* ===== CUSTOM SIDEBAR ICONS ===== */
/* Replace FontAwesome icons with custom CSS icons */
.sidebar-papikost .custom-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Dashboard Icon */
.sidebar-papikost .icon-dashboard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}

/* User/Profile Icon */
.sidebar-papikost .icon-user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* Lock Icon */
.sidebar-papikost .icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}

/* Calendar Icon */
.sidebar-papikost .icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3E%3C/svg%3E");
}

/* Bell/Notification Icon */
.sidebar-papikost .icon-bell {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
}

/* Chat/Comments Icon - Speech Bubbles */
.sidebar-papikost .icon-chat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z'/%3E%3Cpath d='M2 20c0 1.1.9 2 2 2h10l-2-2H4V8H2v12z'/%3E%3C/svg%3E");
}

/* History/Survey Icon - House with Checklist */
.sidebar-papikost .icon-history {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3zm-1 12h2v2h-2v-2zm0-3h2v2h-2v-2zm0-3h2v2h-2v-2z'/%3E%3Cpath d='M15 16l1.5 1.5L19 15l-1.5-1.5L15 16zm-8-1l1.5 1.5L11 14l-1.5-1.5L7 15z'/%3E%3C/svg%3E");
}

/* Heart Icon */
.sidebar-papikost .icon-heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

/* Tags/Complaint Icon - Exclamation in Circle (Complaint/Issue) */
.sidebar-papikost .icon-tags {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

/* Star Icon */
.sidebar-papikost .icon-star {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

/* Search Icon */
.sidebar-papikost .icon-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

/* Support Icon */
.sidebar-papikost .icon-support {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z'/%3E%3C/svg%3E");
}

/* Download Icon */
.sidebar-papikost .icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

/* Power Off Icon */
.sidebar-papikost .icon-power {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z'/%3E%3C/svg%3E");
}

/* ===== SIDEBAR ICON HOVER STATES ===== */
/* White versions of icons for hover/active states */
.sidebar-papikost li:hover .icon-dashboard,
.sidebar-papikost li.active .icon-dashboard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-user,
.sidebar-papikost li.active .icon-user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-lock,
.sidebar-papikost li.active .icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-calendar,
.sidebar-papikost li.active .icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-bell,
.sidebar-papikost li.active .icon-bell {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-chat,
.sidebar-papikost li.active .icon-chat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z'/%3E%3Cpath d='M2 20c0 1.1.9 2 2 2h10l-2-2H4V8H2v12z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-history,
.sidebar-papikost li.active .icon-history {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3zm-1 12h2v2h-2v-2zm0-3h2v2h-2v-2zm0-3h2v2h-2v-2z'/%3E%3Cpath d='M15 16l1.5 1.5L19 15l-1.5-1.5L15 16zm-8-1l1.5 1.5L11 14l-1.5-1.5L7 15z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-heart,
.sidebar-papikost li.active .icon-heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-tags,
.sidebar-papikost li.active .icon-tags {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-star,
.sidebar-papikost li.active .icon-star {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-search,
.sidebar-papikost li.active .icon-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-support,
.sidebar-papikost li.active .icon-support {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-download,
.sidebar-papikost li.active .icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

.sidebar-papikost li:hover .icon-power,
.sidebar-papikost li.active .icon-power {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z'/%3E%3C/svg%3E");
}

/* ===== GLOBAL CUSTOM ICONS (PENGHUNI) ===== */
/* Icons yang bisa digunakan di berbagai halaman */
.custom-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322c55e'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
}

.icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.icon-envelope {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.icon-camera {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M20 4h-3.17L15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.icon-edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

.icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}

.icon-user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.icon-chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z'/%3E%3C/svg%3E");
}

.icon-cog {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E");
}

.icon-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.icon-id {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.icon-gender {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 4c2.21 0 4 1.79 4 4 0 1.95-1.4 3.57-3.25 3.92v1.96l2.47 2.47-1.41 1.42L12 15.96l-1.81 1.81-1.41-1.42L11.25 13.88v-1.96C9.4 11.57 8 9.95 8 8c0-2.21 1.79-4 4-4z'/%3E%3C/svg%3E");
}

.icon-times {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

.icon-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

.icon-exclamation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

/* ============================================================================
   GLOBAL PENGHUNI PAGE LAYOUT COMPONENTS
   Used across all penghuni pages for consistency
============================================================================ */

/* Main Page Wrapper - Universal container */
.penghuni-page-wrapper {
    min-height: 100vh;
    background-color: var(--gray-50, #f8f9fa);
}

/* Content Wrapper - Adjusts for sidebar */
.penghuni-content-wrapper {
    margin-left: var(--sidebar-width, 240px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Main Content Area - Scrollable container */
.penghuni-main-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    max-width: 100%;
    /* Always show scrollbar for better visibility */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #999 #f1f1f1; /* Firefox - visible scrollbar */
}

/* Always visible scrollbar for Chrome, Safari and Opera */
.penghuni-main-content::-webkit-scrollbar {
    width: 12px;
    background: #f1f1f1;
}

.penghuni-main-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.penghuni-main-content::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 6px;
    border: 2px solid #f1f1f1;
    transition: all 0.2s ease;
}

.penghuni-main-content::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.penghuni-main-content::-webkit-scrollbar-thumb:active {
    background: #333;
}

.penghuni-main-content::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* Top Section - Hero/Header area for pages */
.penghuni-page-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .penghuni-page-header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .penghuni-content-wrapper {
        margin-left: 0;
    }
    
    .penghuni-main-content {
        padding: 16px;
    }
    
    .penghuni-page-header {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .penghuni-main-content {
        padding: 12px;
    }
}

/* ===== GENERAL PAGINATION ===== */
.papi-pagination {
    margin: 20px 0 10px 0;
    padding: 16px;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid #E5E7EB;
}

.papi-pagination-info {
    text-align: center;
    margin-bottom: 16px;
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
}

.papi-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.papi-pagination-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.papi-pagination-arrow {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    display: inline-block;
}

.papi-pagination-text {
    font-size: 14px;
    font-weight: 500;
}

.papi-pagination-btn:hover:not(:disabled) {
    background: #F9FAFB;
    border-color: var(--blue);
    color: var(--blue);
}

.papi-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #F9FAFB;
}

.papi-pagination-numbers {
    display: flex;
    gap: 4px;
    margin: 0 12px;
}

.papi-pagination-number {
    width: 36px;
    height: 36px;
    border: 1px solid #E5E7EB;
    background: var(--white);
    color: #374151;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.papi-pagination-number:hover {
    background: #F9FAFB;
    border-color: var(--blue);
    color: var(--blue);
}

.papi-pagination-number.active {
    background: var(--blue);
    border-color: var(--blue);
    color: white;
}

.papi-pagination-number.active:hover {
    background: #1E40AF;
}

/* Mobile Pagination */
@media (max-width: 768px) {
    .papi-pagination {
        margin: 16px 0 8px 0;
        padding: 12px;
    }
    
    .papi-pagination-info {
        margin-bottom: 12px;
        font-size: 13px;
    }
    
    .papi-pagination-controls {
        gap: 6px;
    }
    
    .papi-pagination-btn {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .papi-pagination-text {
        display: none;
    }
    
    .papi-pagination-arrow {
        font-size: 18px;
    }
    
    .papi-pagination-numbers {
        margin: 0 8px;
        gap: 3px;
    }
    
    .papi-pagination-number {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}