/**
 * ==============================================================================
 * TEMPLATE PGS (MODERN APP THEME - BABY BLUE EDITION)
 * Base Color: Baby Blue #8FD9FB
 * Terinspirasi dari Lumbung Emas Mobile App
 * ==============================================================================
 */

:root {
    --pgs-base: #8FD9FB;
    --pgs-base-light: #e0f4fe;
    --pgs-base-dark: #38bdf8;
    --pgs-primary: #0284c7;
    --pgs-primary-dark: #0369a1;
    --pgs-accent: #0ea5e9;
    --pgs-bg: #f4f8fb;
    --pgs-card-bg: #ffffff;
    --pgs-text-main: #0f172a;
    --pgs-text-muted: #64748b;
    --pgs-border-color: #e2e8f0;
    --pgs-radius-lg: 28px;
    --pgs-radius-md: 18px;
    --pgs-radius-sm: 12px;
}

body {
    background-color: var(--pgs-bg) !important;
    color: var(--pgs-text-main) !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    padding-bottom: 92px; /* Space for floating pill bottom nav */
}

/* ==============================================================================
   PGS TYPOGRAPHY & FONT HIERARCHY SYSTEM (POPPINS 300 - 800)
   ============================================================================== */

/* Text Biasa - 300 */
body, p, span, div, li, td, input, select, textarea, label, small {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 300;
}

/* Text Button - 300 */
.btn, button, input[type="button"], input[type="submit"], .btn-sm, .btn-lg {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 300 !important;
}

/* Subtitle & Links - 400 */
a:not(.btn), .link, .nav-link, .subtitle, .card-subtitle, .text-muted, .pgs-greeting-desc, .modal-subtitle, .pgs-metric-sub {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

/* Title - 500 */
.title, .card-title, .modal-title, .pgs-card-title, .pgs-greeting-title, .section-title, table th, .table th, .pgs-metric-label, .font-weight-500 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
}

/* DESKTOP HEADINGS HIERARCHY */
h1, .h1 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
}

h2, .h2 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

h3, .h3 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

h4, .h4 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
}

h5, .h5 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

h6, .h6 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

/* MOBILE HEADINGS & TYPOGRAPHY TUNING (<= 767.98px) */
@media (max-width: 767.98px) {
    h1, .h1 {
        font-weight: 700 !important;
    }

    h2, .h2 {
        font-weight: 600 !important;
    }

    h3, .h3 {
        font-weight: 500 !important;
    }

    h4, .h4 {
        font-weight: 400 !important;
    }

    h5, .h5 {
        font-weight: 300 !important;
    }

    h6, .h6 {
        font-weight: 300 !important;
    }

    /* Mencegah bold di mobile terlalu tebal/bloated */
    .font-weight-bold, strong:not(.text-dark), b {
        font-weight: 600 !important;
    }
}

/* ==============================================================================
   1. PAGE TRANSITIONS (Smooth Fast Slide Transparent)
   Left-to-Right (Forward) & Right-to-Left (Back)
   ============================================================================== */
.pgs-page-container {
    animation: pgsSlideLeft 0.24s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.pgs-page-container.slide-back {
    animation: pgsSlideRight 0.24s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes pgsSlideLeft {
    0% {
        opacity: 0;
        transform: translate3d(-24px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes pgsSlideRight {
    0% {
        opacity: 0;
        transform: translate3d(24px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* ==============================================================================
   ZERO-PADDING OVERRIDE FOR TEMPLATE PGS
   Removes AdminLTE .content-wrapper > .content padding (0 .5rem)
   and Bootstrap .container-fluid padding
   ============================================================================== */
body .content-wrapper,
.content-wrapper {
    background-color: var(--pgs-bg) !important;
    margin-top: 68px !important;
}

body .content-wrapper > .content {
    padding: 0 !important;
}

body .content-wrapper > .content > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.pgs-body-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ==============================================================================
   1.5 MODERN BLUE TOP NAVBAR HEADER (FIXED TOP)
   Sleek Blue Gradient, Circular White Logo, Baby Blue & White Typography
   ============================================================================== */
.main-header,
.pgs-main-header {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-bottom: 1px solid rgba(186, 230, 253, 0.38) !important;
    box-shadow: 0 4px 20px -2px rgba(2, 132, 199, 0.35) !important;
    color: #ffffff !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 16px !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Container inside navbar */
.main-header .container-fluid,
.pgs-main-header .container-fluid {
    height: 100% !important;
    padding: 0 !important;
}

/* Circular Logo with White Background */
.logo-circle-container {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18), 0 0 0 1.5px rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-wrapper:hover .logo-circle-container {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
}

.logo-circle-container .logo-brand,
.logo-circle-container .logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

/* Logo Title & Typography: Baby blue to crisp white */
.logo-title {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.15 !important;
}

.logo-text-pendamping,
.brand-subtext {
    color: #bae6fd !important; /* Soft baby blue */
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2.8px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    display: block !important;
    opacity: 0.95;
}

.logo-text-ginjalsehat,
.brand-title-teal {
    color: #ffffff !important; /* Pure solid crisp white */
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    display: block !important;
}

/* Action Icon Buttons on Blue Navbar */
.main-header .nav-btn-icon,
.pgs-main-header .nav-btn-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.main-header .nav-btn-icon:hover,
.pgs-main-header .nav-btn-icon:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) scale(1.04);
    color: #ffffff !important;
}

.main-header .nav-btn-icon:active,
.pgs-main-header .nav-btn-icon:active {
    transform: translateY(0) scale(0.96);
}

.main-header .nav-btn-icon .pgs-svg-icon,
.pgs-main-header .nav-btn-icon .pgs-svg-icon {
    color: #ffffff !important;
}

/* Floating counter badge */
.main-header .badge-counter-floating,
.pgs-main-header .badge-counter-floating {
    top: -5px !important;
    right: -5px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 2px solid #0284c7 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    border-radius: 12px !important;
}

/* Floating dot badge for active chat */
.main-header .badge-dot-floating,
.pgs-main-header .badge-dot-floating {
    top: 2px !important;
    right: 2px !important;
    width: 10px !important;
    height: 10px !important;
    background: #22c55e !important;
    border: 2px solid #0284c7 !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.9) !important;
}

/* Avatar on Blue Navbar */
.main-header .avatar,
.pgs-main-header .avatar,
.avatar-pgs {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
    object-fit: cover !important;
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main-header .avatar:hover,
.pgs-main-header .avatar:hover,
.avatar-pgs:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.border-left-translucent {
    border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* ==============================================================================
   PGS UNIFIED HEADER DROPDOWNS (CHAT, NOTIFIKASI, USER PROFILE)
   ============================================================================== */
.pgs-header-dropdown,
.dropdown-menu-chat,
.dropdown-menu-notif,
.dropdown-menu-profile.pgs-header-dropdown {
    border-radius: 18px !important;
    border: none !important;
    overflow: hidden !important;
    z-index: 1050 !important;
    box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.9) !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .pgs-header-dropdown {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        margin-top: 0 !important;
        animation: pgsDropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .pgs-header-dropdown-chat,
    .pgs-header-dropdown-notif,
    .dropdown-menu-chat,
    .dropdown-menu-notif {
        width: 360px !important;
        min-width: 360px !important;
        max-width: 360px !important;
    }
    .pgs-header-dropdown-user,
    .dropdown-menu-profile.pgs-header-dropdown {
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;
    }
}

/* Header action items vertical alignment in navbar */
.pgs-header-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    vertical-align: middle !important;
}

@media (max-width: 767.98px) {
    .pgs-header-dropdown,
    .dropdown-menu-chat,
    .dropdown-menu-notif,
    .dropdown-menu-profile.pgs-header-dropdown {
        position: fixed !important;
        top: 74px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(226, 232, 240, 0.95) !important;
        animation: pgsDropdownMobileIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
        max-height: calc(100vh - 90px) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .pgs-header-dropdown .pgs-dropdown-body {
        max-height: calc(100vh - 215px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

.pgs-header-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.38) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 1040 !important;
    animation: pgsFadeIn 0.18s ease-out !important;
}

.main-header .nav-btn-icon.active,
.pgs-main-header .nav-btn-icon.active {
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35) !important;
}

/* User Avatar Button (Exactly 38x38 matching chat & notif icon buttons) */
.main-header .pgs-header-avatar-btn,
.pgs-main-header .pgs-header-avatar-btn,
.pgs-header-avatar-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.main-header .pgs-header-avatar-btn:hover,
.pgs-main-header .pgs-header-avatar-btn:hover,
.pgs-header-avatar-btn:hover {
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.main-header .pgs-header-avatar-btn.active,
.pgs-main-header .pgs-header-avatar-btn.active,
.pgs-header-avatar-btn.active {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transform: scale(1.05) !important;
}

.pgs-header-avatar-btn .avatar,
.pgs-header-avatar-btn .pgs-header-avatar-img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    object-fit: cover !important;
    display: block !important;
    line-height: 1 !important;
    vertical-align: top !important;
}

.pgs-dropdown-header {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-bottom: 1px solid #e0f2fe !important;
    padding: 13px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
}

.pgs-dropdown-header-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

.pgs-dropdown-icon-circle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.16) !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

.pgs-dropdown-badge-danger {
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.12) !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.pgs-dropdown-badge-primary {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.12) !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.pgs-dropdown-body {
    background: #ffffff !important;
}

.pgs-header-dropdown-user .dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    margin: 3px 8px !important;
    width: calc(100% - 16px) !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.pgs-header-dropdown-user .dropdown-item:hover,
.pgs-header-dropdown-user .dropdown-item:focus {
    background-color: #f0fdf4 !important;
    color: #0f766e !important;
    transform: translateX(2px);
}

.pgs-header-dropdown-user .pgs-dropdown-item-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
    margin-right: 11px !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}

.pgs-header-dropdown-user .dropdown-item:hover .pgs-dropdown-item-icon {
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
    transform: scale(1.08);
}

.pgs-dropdown-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
}


/* ==============================================================================
   2. CURVED HEADER WITH SMOOTH CSS WAVES & WHITE LOGO WATERMARK
   Full Width (Edge-to-Edge), High Contrast & Razor Sharp Typography
   ============================================================================== */
.pgs-header-curved {
    background: 
        radial-gradient(ellipse 80% 60% at 75% 20%, rgba(143, 217, 251, 0.28) 0%, transparent 60%),
        radial-gradient(circle at 15% 85%, rgba(56, 189, 248, 0.22) 0%, transparent 55%),
        linear-gradient(145deg, #0284c7 0%, #0369a1 45%, #075985 100%);
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
    padding: 24px 20px 75px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 36px -8px rgba(3, 105, 161, 0.35);
    margin: 0;
    width: 100%;
}

/* Smooth Wave Line Layer 1 (Curved Soft Horizon) */
.pgs-header-curved::before {
    content: "";
    position: absolute;
    top: -45%;
    right: -20%;
    width: 130%;
    height: 180%;
    border-radius: 42% 58% 63% 37% / 46% 40% 60% 54%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(143, 217, 251, 0.05) 50%, transparent 80%);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 1;
}

/* Smooth Wave Line Layer 2 (Flowing Bottom-Left Wave) */
.pgs-header-curved::after {
    content: "";
    position: absolute;
    bottom: -60%;
    left: -20%;
    width: 120%;
    height: 160%;
    border-radius: 54% 46% 38% 62% / 51% 58% 42% 49%;
    background: linear-gradient(315deg, rgba(143, 217, 251, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 75%);
    border: 1.5px solid rgba(143, 217, 251, 0.18);
    pointer-events: none;
    z-index: 1;
}

/* Secondary Flowing Accent Wave Line */
.pgs-header-wave-accent {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 420px;
    height: 280px;
    border-radius: 48% 52% 58% 42% / 40% 56% 44% 60%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: radial-gradient(circle, rgba(143, 217, 251, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Elegant White PGS Logo Watermark with Transparency */
.pgs-header-watermark {
    position: absolute;
    right: -15px;
    top: 10px;
    width: 250px;
    height: 250px;
    opacity: 0.13;
    pointer-events: none;
    z-index: 2;
    transform: rotate(-10deg);
    transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
    .pgs-header-watermark {
        right: 60px;
        top: -10px;
        width: 280px;
        height: 280px;
        opacity: 0.14;
    }
}

.pgs-header-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}

.pgs-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.pgs-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pgs-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pgs-header-brand img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #ffffff;
    padding: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.pgs-header-brand .brand-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.pgs-header-brand small {
    color: #e0f2fe !important;
    font-size: 11.5px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.pgs-header-notif-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    position: relative;
    transition: all 0.2s ease;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.pgs-header-notif-btn:hover {
    background: rgba(255, 255, 255, 0.38);
    color: #ffffff;
    transform: scale(1.05);
}

/* Glassmorphism Greeting & Status Box */
.pgs-glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.38);
    border-radius: 22px;
    padding: 18px 22px;
    color: #ffffff;
    margin-top: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.pgs-glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.25);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.pgs-greeting-title,
.pgs-header-title {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    margin-bottom: 4px;
}

.pgs-greeting-desc,
.pgs-header-subtitle {
    color: #f0f9ff;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    max-width: 540px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 14px;
}

/* ==============================================================================
   3. 3-COLUMN METRIC CARDS (Sejajar Sesuai Referensi)
   ============================================================================== */
.pgs-metric-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.pgs-metric-quad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.pgs-metric-box {
    background: rgba(255, 255, 255, 0.10);
    border: 1.5px solid rgba(255, 255, 255, 0.42);
    border-radius: 16px;
    padding: 12px 8px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.pgs-metric-icon {
    font-size: 16px;
    color: #bae6fd;
    margin-bottom: 4px;
}

.pgs-metric-val {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
    color: #ffffff;
}

.pgs-metric-val.pgs-metric-val-untested {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
    opacity: 0.95;
}

.pgs-metric-lbl {
    font-size: 11px;
    color: #f0f9ff;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==============================================================================
   4. SUB-TAB NAVIGATION UNDERLINE NOTCH (Sesuai Referensi)
   ============================================================================== */
.pgs-header-subtabs {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 10px;
    margin-top: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.pgs-subtab-link {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 4px 12px;
    position: relative;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pgs-subtab-link:hover {
    color: #ffffff;
}

.pgs-subtab-link.active {
    color: #ffffff;
    font-weight: 700;
}

.pgs-subtab-link.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #ffffff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.4);
}

/* ==============================================================================
   5. QUICK ACTION CARDS (Floating 2-Column Actions)
   Positioned Exactly Halfway (50% Overlap) on the Curved Header Edge
   ============================================================================== */
.pgs-quick-actions-row {
    margin-top: -55px;
    position: relative;
    z-index: 25;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.pgs-action-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 18px 20px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 12px 28px -6px rgba(2, 132, 199, 0.18), 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none !important;
    color: var(--pgs-text-main) !important;
    height: 100%;
}

.pgs-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -4px rgba(2, 132, 199, 0.25);
    border-color: #0284c7;
}

.pgs-action-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.pgs-action-text-wrap {
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.pgs-action-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pgs-action-card .title {
    font-size: 15px;
    font-weight: 500 !important;
    color: #0f172a !important;
    margin-bottom: 2px;
    line-height: 1.2;
}

.pgs-action-card .subtitle {
    font-size: 12px;
    color: #64748b !important;
    font-weight: 500 !important;
    margin: 0;
}

/* Mobile Responsive Adjustments (Phones like Vivo, ~360px - 414px) */
@media (max-width: 767.98px) {
    .pgs-header-curved {
        padding: 16px 14px 60px !important;
        border-bottom-left-radius: 28px !important;
        border-bottom-right-radius: 28px !important;
    }

    .pgs-greeting-title,
    .pgs-header-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    .pgs-greeting-desc,
    .pgs-header-subtitle {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
    }

    .pgs-glass-card {
        padding: 14px 12px !important;
        border-radius: 18px !important;
        margin-top: 10px !important;
    }

    .pgs-metric-trio,
    .pgs-metric-quad {
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .pgs-metric-box {
        padding: 8px 4px !important;
        border-radius: 12px !important;
    }

    .pgs-metric-icon {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    .pgs-metric-val {
        font-size: 13px !important;
    }

    .pgs-metric-val.pgs-metric-val-untested {
        font-size: 10.5px !important;
    }

    .pgs-metric-lbl {
        font-size: 10px !important;
    }

    .pgs-quick-actions-row {
        margin-top: -42px !important;
        padding: 0 10px !important;
        margin-bottom: 1rem !important;
    }

    .pgs-action-card {
        padding: 12px 10px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 20px -4px rgba(2, 132, 199, 0.14), 0 2px 6px rgba(0,0,0,0.03) !important;
    }

    .pgs-action-card-left {
        gap: 8px !important;
    }

    .pgs-action-icon-wrap {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }

    .pgs-action-card .title {
        font-size: 15px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .pgs-action-card .subtitle {
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 380px) {
    .pgs-action-card .title {
        font-size: 15px !important;
    }

    .pgs-action-card .subtitle {
        font-size: 11.5px !important;
    }

    .pgs-action-card {
        padding: 12px 8px !important;
        border-radius: 14px !important;
    }
}

.pgs-action-circle-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pgs-base-light);
    color: var(--pgs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.pgs-action-card:hover .pgs-action-circle-arrow {
    background: var(--pgs-primary);
    color: #ffffff;
    transform: translateX(3px);
}

/* ==============================================================================
   6. SQUIRCLE PASTEL ICON GRID (4 Kolom Menu)
   ============================================================================== */
.pgs-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 12px;
    padding: 20px 10px;
    text-align: center;
}

.pgs-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    transition: transform 0.2s ease;
}

.pgs-menu-item:hover {
    transform: translateY(-3px);
}

.pgs-squircle {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}

.pgs-menu-item:hover .pgs-squircle {
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.pgs-squircle-blue { background: #e0f4fe; color: #0284c7; }
.pgs-squircle-purple { background: #f3e8ff; color: #9333ea; }
.pgs-squircle-green { background: #dcfce7; color: #16a34a; }
.pgs-squircle-amber { background: #fef3c7; color: #d97706; }
.pgs-squircle-rose { background: #ffe4e6; color: #e11d48; }
.pgs-squircle-indigo { background: #e0e7ff; color: #4f46e5; }
.pgs-squircle-slate { background: #f1f5f9; color: #475569; }

.pgs-menu-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #334155;
    line-height: 1.25;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==============================================================================
   7. FLOATING CAPSULE BOTTOM NAVIGATION (With Elevated Center FAB)
   ============================================================================== */
.pgs-bottom-nav-container {
    position: fixed;
    bottom: 16px;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 480px;
    width: calc(100% - 32px);
    z-index: 1040;
    pointer-events: none;
}

.pgs-bottom-bar {
    pointer-events: auto;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-radius: 40px;
    height: 64px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 12px 35px -6px rgba(2, 132, 199, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    position: relative;
}

.pgs-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.2s ease;
    min-width: 58px;
}

.pgs-nav-tab i {
    font-size: 18px;
    margin-bottom: 3px;
}

.pgs-nav-tab:hover {
    color: #ffffff;
}

.pgs-nav-tab.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
}

/* Elevated Center FAB (Scan QR / Lab OCR) */
.pgs-center-fab-wrapper {
    position: relative;
    top: -18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pgs-center-fab {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid var(--pgs-bg);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none !important;
}

.pgs-center-fab:hover {
    transform: scale(1.1);
    color: #0369a1;
}

.pgs-center-fab-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ==============================================================================
   8. SEGMENTED CONTROL PILL TABS (Untuk Login / Register & Filter)
   ============================================================================== */
.pgs-tab-segmented {
    background: #f1f5f9;
    border-radius: 16px;
    padding: 4px;
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.pgs-tab-pill-btn {
    flex: 1;
    border-radius: 12px;
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pgs-tab-pill-btn.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

/* ==============================================================================
   9. AUTH FORM PAGES (Login & Register Modern Card)
   ============================================================================== */
html:has(.pgs-auth-container),
body:has(.pgs-auth-container),
body.pgs-auth-page {
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: linear-gradient(135deg, #8FD9FB 0%, #bae6fd 60%, #e0f2fe 100%) !important;
    background-attachment: fixed !important;
    overflow-x: hidden !important;
}

.pgs-auth-container {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background: 
        radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.45) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(56, 189, 248, 0.25) 0%, transparent 55%),
        linear-gradient(135deg, #8FD9FB 0%, #bae6fd 60%, #e0f2fe 100%);
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

.pgs-auth-container::before {
    content: "";
    position: absolute;
    top: -25%;
    right: -20%;
    width: 90%;
    height: 110%;
    border-radius: 46% 54% 50% 50% / 48% 44% 56% 52%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.pgs-auth-card {
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 16px 40px -10px rgba(2, 132, 199, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.85);
    width: 100%;
    max-width: 430px;
    padding: 24px 26px;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

.pgs-auth-logo-badge {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: linear-gradient(135deg, #8FD9FB 0%, #0284c7 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 10px;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.22);
}

.pgs-auth-input-group {
    position: relative;
    margin-bottom: 12px;
}

.pgs-auth-input-group .icon-left {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.pgs-auth-input {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    padding: 8px 14px 8px 42px;
    font-size: 13px;
    color: #0f172a;
    transition: all 0.2s ease;
}

.pgs-auth-input:focus {
    outline: none;
    border-color: #0284c7;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(143, 217, 251, 0.35);
}

@media (max-height: 760px) {
    .pgs-auth-container {
        padding: 12px 14px;
        justify-content: center;
    }
    .pgs-auth-card {
        padding: 18px 20px;
        border-radius: 22px;
    }
    .pgs-auth-logo-badge {
        width: 40px;
        height: 40px;
        margin-bottom: 6px;
    }
    .pgs-auth-input {
        height: 40px;
        font-size: 12.5px;
    }
    .pgs-auth-input-group {
        margin-bottom: 8px;
    }
}

/* ==============================================================================
   10. BOTTOM SHEET MODAL (Popup dari Bawah dengan Animasi)
   ============================================================================== */
.pgs-bottom-sheet-root {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: auto;
}

@keyframes pgsSheetSlideUp {
    0% {
        transform: translateY(100%);
        opacity: 0.4;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.pgs-bottom-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    animation: pgsFadeIn 0.22s ease-out forwards;
}

.pgs-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    padding: 12px 20px 32px;
    z-index: 100000;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
    animation: pgsSheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.pgs-drag-handle {
    width: 44px;
    height: 5px;
    background: #cbd5e1;
    border-radius: 10px;
    margin: 4px auto 18px;
    cursor: grab;
}

.pgs-pill-btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #8FD9FB 100%) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.32);
    border: none;
    width: 100%;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.pgs-pill-btn-primary:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 55%, #38bdf8 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.42);
    color: #ffffff !important;
}

.pgs-pill-btn-outline {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1.5px solid #8FD9FB !important;
    border-radius: 50px !important;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: all 0.2s ease;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(143, 217, 251, 0.25);
}

.pgs-pill-btn-outline:hover {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
    transform: translateY(-1px);
}

/* ==============================================================================
   11. ARTIKEL & EDUKASI MODERN (Slide-Back Top Bar, Step Guide, Sticky Bottom Bar)
   ============================================================================== */
.pgs-floating-back-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--pgs-border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    text-decoration: none !important;
    cursor: pointer;
}

.pgs-floating-back-btn:hover {
    background: #0284c7;
    color: #ffffff;
    transform: scale(1.05);
}

.pgs-section-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    color: #0284c7;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.pgs-section-eyebrow::before {
    content: "";
    width: 22px;
    height: 3px;
    background: #0284c7;
    border-radius: 2px;
}

.pgs-step-guide {
    position: relative;
    border-left: 2px solid #e2e8f0;
    margin-left: 12px;
    padding-left: 22px;
    margin-top: 16px;
    margin-bottom: 24px;
}

.pgs-step-item {
    position: relative;
    margin-bottom: 20px;
}

.pgs-step-num {
    font-size: 14px;
    font-weight: 800;
    color: #0284c7;
    margin-bottom: 4px;
}

.pgs-step-text {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.55;
}

/* ==============================================================================
   11. PGS CONSULTATION & PRODUCT CTA BANNER CARD
   Replaces awkward fixed bottom bar with modern responsive in-flow card
   ============================================================================== */
.pgs-sticky-article-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 60%, #e0f2fe 100%) !important;
    border: 1.5px solid #bae6fd !important;
    border-radius: 24px !important;
    padding: 22px 26px !important;
    margin-top: 28px !important;
    margin-bottom: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    box-shadow: 0 10px 30px -5px rgba(2, 132, 199, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
    z-index: 10 !important;
}

.pgs-cta-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.pgs-cta-icon-badge {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.pgs-cta-icon-wa {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3) !important;
}

.pgs-cta-icon-consult {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3) !important;
}

.pgs-cta-text {
    flex: 1;
    min-width: 0;
}

.pgs-cta-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 3px;
    letter-spacing: -0.2px;
}

.pgs-cta-subtitle {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.45;
    margin-bottom: 0;
}

.pgs-cta-btn {
    padding: 12px 26px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    border: none !important;
    flex-shrink: 0 !important;
}

.pgs-cta-btn-wa {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35) !important;
}

.pgs-cta-btn-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.45) !important;
    color: #ffffff !important;
}

.pgs-cta-btn-consult {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35) !important;
}

.pgs-cta-btn-consult:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45) !important;
    color: #ffffff !important;
}

@media (max-width: 767.98px) {
    .pgs-sticky-article-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 18px 20px !important;
        gap: 16px !important;
        margin-top: 20px !important;
        margin-bottom: 28px !important;
        border-radius: 20px !important;
    }

    .pgs-cta-main {
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .pgs-cta-icon-badge {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
    }

    .pgs-cta-title {
        font-size: 15px !important;
    }

    .pgs-cta-subtitle {
        font-size: 12.5px !important;
    }

    .pgs-cta-btn {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

/* Keyframe Animations */
@keyframes pgsSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes pgsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pgsModalPopup {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(24px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ==============================================================================
   12. KONSULTASI MODAL (PORTAL FIXED VIEWPORT & SMOOTH SLIDE-UP)
   ============================================================================== */
.pgs-modal-root {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pgs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    animation: pgsFadeIn 0.22s ease-out forwards;
}

.pgs-modal-container {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

.pgs-modal-box {
    pointer-events: auto;
    background: #ffffff;
    border-radius: 26px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 24px 54px -12px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
}

@media (max-width: 575.98px) {
    .pgs-modal-container {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .pgs-modal-box {
        max-width: 100% !important;
        width: 100% !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 28px !important;
        border-top-right-radius: 28px !important;
        animation: pgsSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
    }
    .pgs-modal-box .pgs-modal-body,
    .pgs-modal-box .modal-body {
        max-height: none !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 18px 20px !important;
    }
    .pgs-modal-footer {
        padding: 12px 18px 16px !important;
    }
}

.pgs-modal-drag-pill {
    width: 44px;
    height: 5px;
    background: #94a3b8;
    border-radius: 10px;
    margin: 2px auto 10px;
    cursor: grab;
    flex-shrink: 0;
    opacity: 0.65;
}

.pgs-modal-header {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 18px 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid #e0f2fe;
    flex-shrink: 0;
    position: relative;
}

@media (max-width: 575.98px) {
    .pgs-modal-header {
        padding: 10px 18px 14px !important;
    }
    .pgs-modal-drag-pill {
        margin: 2px auto 10px !important;
    }
}

.pgs-modal-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pgs-modal-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
    flex-shrink: 0;
}

.pgs-modal-icon-circle-blue,
.pgs-modal-icon-circle-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    color: #ffffff !important;
}

.pgs-modal-icon-circle-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
    color: #ffffff !important;
}

.pgs-modal-icon-circle-emerald,
.pgs-modal-icon-circle-green {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    color: #ffffff !important;
}

.pgs-modal-icon-circle-amber,
.pgs-modal-icon-circle-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
    color: #ffffff !important;
}

.pgs-modal-icon-circle-indigo,
.pgs-modal-icon-circle-purple {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
    color: #ffffff !important;
}

.pgs-modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none !important;
    padding: 0;
    flex-shrink: 0;
}

.pgs-modal-close-btn:hover {
    background: #ffffff;
    color: #0f172a;
    transform: scale(1.05);
}

.pgs-modal-tabs-wrap {
    background: #ffffff;
    padding: 12px 24px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .pgs-modal-tabs-wrap {
        padding: 10px 16px;
    }
}

.pgs-modal-segmented-control {
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.pgs-modal-segmented-item {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    outline: none !important;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
}

.pgs-modal-segmented-item:hover {
    color: #0f172a;
    text-decoration: none;
}

.pgs-modal-segmented-item.active {
    background: #ffffff;
    color: #0284c7;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.pgs-modal-segmented-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    transition: all 0.2s ease;
    background: #e2e8f0;
    color: #64748b;
    line-height: 1;
}

.pgs-modal-segmented-item.active .pgs-modal-segmented-badge {
    background: #e0f2fe;
    color: #0284c7;
}

/* Responsive scrollable container for AI Summary tables */
.pgs-ai-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
}

.pgs-ai-table-wrap::-webkit-scrollbar {
    height: 6px;
}
.pgs-ai-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.pgs-ai-table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.pgs-ai-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.ai-summary-content table {
    width: 100% !important;
    min-width: 580px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    background-color: #ffffff !important;
}

/* Fallback if table is directly inside .ai-summary-content without wrapper */
.ai-summary-content > table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
}

.ai-summary-content th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 12.5px !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.ai-summary-content td {
    padding: 10px 14px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    vertical-align: middle !important;
}

.ai-summary-content td:first-child,
.ai-summary-content th:first-child {
    font-weight: 600 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
}

.ai-summary-content td:nth-child(2),
.ai-summary-content th:nth-child(2) {
    white-space: nowrap !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.ai-summary-content td:nth-child(3),
.ai-summary-content th:nth-child(3) {
    white-space: nowrap !important;
    text-align: center !important;
    color: #64748b !important;
}

.ai-summary-content td:last-child {
    min-width: 260px !important;
    white-space: normal !important;
    color: #334155 !important;
}

.ai-summary-content tr:nth-child(even) {
    background-color: #f8fafc !important;
}

.ai-summary-content tr:hover {
    background-color: #f0f9ff !important;
}

.pgs-modal-body {
    padding: 20px 24px;
}

.pgs-modal-option-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px 18px;
    display: block;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.pgs-modal-option-card:hover {
    border-color: #0284c7;
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.14);
}

.pgs-modal-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.bg-blue-soft { background: #e0f2fe; }
.bg-green-soft { background: #dcfce7; }

.pgs-modal-arrow-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e0f2fe;
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform 0.2s ease;
}

.bg-green-arrow {
    background: #dcfce7;
    color: #16a34a;
}

.pgs-modal-option-card:hover .pgs-modal-arrow-circle {
    transform: translateX(3px);
}

.pgs-modal-footer {
    padding: 14px 24px 18px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0 !important;
}

.pgs-modal-form-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.pgs-modal-form-wrap .pgs-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

.pgs-modal-form-wrap .pgs-modal-footer {
    flex-shrink: 0 !important;
}

.pgs-modal-footer-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f1f5f9 !important;
}

.pgs-modal-box.pgs-modal-lg {
    max-width: 680px;
}

.pgs-modal-box.pgs-modal-md {
    max-width: 520px;
}

.pgs-modal-box.pgs-modal-sm {
    max-width: 440px;
}

/* ==============================================================================
   12. PGS LIVE CHAT ROOM STYLING (Lumbung Emas & Halodoc Modern Aesthetic)
   ============================================================================== */
.pgs-chat-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background-color: #f0f7fc;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
}

.pgs-chat-header {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.25);
    z-index: 30;
    position: relative;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.pgs-chat-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(143, 217, 251, 0.25) 0%, transparent 60%);
    pointer-events: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.pgs-chat-back-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 12px;
    flex-shrink: 0;
}

.pgs-chat-back-btn:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    transform: scale(1.05);
}

.pgs-chat-avatar-ring {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-shrink: 0;
    margin-right: 12px;
}

.pgs-chat-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pgs-chat-online-beacon {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #10b981;
    border: 2px solid #ffffff;
}

.pgs-chat-messages-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, #f0f7fc 0%, #e2f0fb 100%);
}

.pgs-bubble {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 13.5px;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pgs-bubble-patient {
    align-self: flex-end;
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
}

.pgs-bubble-partner {
    align-self: flex-start;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.pgs-bubble-time {
    font-size: 10.5px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pgs-bubble-patient .pgs-bubble-time {
    color: rgba(255, 255, 255, 0.75);
    justify-content: flex-end;
}

.pgs-bubble-partner .pgs-bubble-time {
    color: #94a3b8;
    justify-content: flex-start;
}

.pgs-chat-input-bar {
    background: #ffffff;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.05);
    z-index: 25;
}

.pgs-chat-input-field {
    flex: 1;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    border-radius: 28px;
    padding: 10px 18px;
    font-size: 13.5px;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
}

.pgs-chat-input-field:focus {
    background: #ffffff;
    border-color: #8FD9FB;
    box-shadow: 0 0 0 3px rgba(143, 217, 251, 0.35);
}

.pgs-chat-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pgs-chat-send-btn:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
}

.pgs-chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==============================================================================
   14. PGS MODERN BUTTON SYSTEM (Baby Blue #8FD9FB & Modern App Style)
   ============================================================================== */
body .btn {
    border-radius: 50px;
    font-weight: 600;
    transition: color 0.1s ease-out, background-color 0.1s ease-out, border-color 0.1s ease-out, box-shadow 0.1s ease-out, transform 0.1s ease-out !important;
    letter-spacing: 0.2px;
}

/* Primary, Info & Login Buttons: Signature Baby Blue Gradient */
body .btn-primary,
body .btn-info,
body .btn-login {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #8FD9FB 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
    transition: color 0.1s ease-out, background 0.1s ease-out, box-shadow 0.1s ease-out, transform 0.1s ease-out !important;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-info:hover,
body .btn-info:focus,
body .btn-login:hover,
body .btn-login:focus {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 55%, #38bdf8 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4) !important;
}

body .btn-primary:active,
body .btn-info:active,
body .btn-login:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
}

/* Outline Primary & Info Buttons: Instant Zero-Delay Response */
body .btn-outline-primary,
body .btn-outline-info {
    background: #f0f9ff !important;
    border: 1px solid #8FD9FB !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(143, 217, 251, 0.18) !important;
    cursor: pointer !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Prompt button variation with bg-white */
body .btn-outline-info.bg-white,
body .btn-outline-primary.bg-white {
    background: #ffffff !important;
}

body .btn-outline-primary:hover,
body .btn-outline-primary:focus,
body .btn-outline-info:hover,
body .btn-outline-info:focus {
    background: #0284c7 !important;
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
    transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
}

body .btn-outline-primary:hover i,
body .btn-outline-primary:hover svg,
body .btn-outline-primary:hover .pgs-svg-icon,
body .btn-outline-info:hover i,
body .btn-outline-info:hover svg,
body .btn-outline-info:hover .pgs-svg-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body .btn-outline-primary:active,
body .btn-outline-info:active {
    background: #0284c7 !important;
    color: #ffffff !important;
    transform: scale(0.97) !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2) !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Secondary & Light Buttons */
body .btn-secondary,
body .btn-light {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body .btn-secondary:hover,
body .btn-light:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Success Button */
body .btn-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

body .btn-success:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35) !important;
}

/* Warning Button */
body .btn-warning {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25) !important;
}

/* Danger Button */
body .btn-danger {
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25) !important;
}

/* Attribute selector for inline cyan buttons */
body .btn[style*="00BCD4"],
body .btn[style*="00bcd4"],
body .btn[style*="0891B2"],
body .btn[style*="0891b2"] {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #8FD9FB 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
}

/* ==============================================================================
   15. PGS MODERN BADGE SYSTEM (Soft Pastel Pills & Baby Blue #8FD9FB)
   ============================================================================== */
body .badge {
    border-radius: 50px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.2px !important;
    line-height: 1.4 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: none !important;
}

/* Primary & Info Badges: Translucent Baby Blue Pill */
body .badge-primary,
body .badge-info {
    background: rgba(143, 217, 251, 0.25) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(143, 217, 251, 0.7) !important;
}

/* Success Badge: Pastel Emerald */
body .badge-success {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

/* Warning Badge: Pastel Amber */
body .badge-warning {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

/* Danger Badge: Pastel Rose */
body .badge-danger {
    background: #fef2f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}

/* Secondary & Light Badges */
body .badge-light {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

body .badge-secondary {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}

/* Small / Micro Badges */
body .badge-sm,
body .badge[style*="font-size: 9px"],
body .badge[style*="font-size: 10px"],
body .badge[style*="font-size: 10.5px"],
body .badge[style*="fontSize: '9px'"],
body .badge[style*="fontSize: '10px'"],
body .badge[style*="fontSize: '10.5px'"] {
    padding: 3px 8px !important;
    font-size: 10px !important;
}

/* Quick Menu Badges */
body .quick-menu-badge {
    border-radius: 50px !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    margin-top: 4px;
}

/* Override any hardcoded inline colored badges */
body .badge[style*="background: #0284c7"],
body .badge[style*="background:#0284c7"] {
    background: rgba(143, 217, 251, 0.25) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(143, 217, 251, 0.7) !important;
}

/* ==============================================================================
   16. PGS AIRA AI ASSISTANT OVERRIDES (Baby Blue Theme)
   ============================================================================== */
.aira-modal-overlay {
    animation: airaSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes airaSlideUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.aira-header {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 45%, #8FD9FB 100%) !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.28) !important;
}

.aira-chat {
    background: #f4f8fb !important;
}

.aira-chat .bot-name {
    color: #0284c7 !important;
    font-weight: 700 !important;
}

.aira-chat .user-bubble {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}

.aira-chat .bot-bubble {
    background: #ffffff !important;
    border: 1px solid #e0f2fe !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

.pgs-aira-suggestion,
.aira-suggestions button {
    background: #f0f9ff !important;
    border: 1.5px solid #8FD9FB !important;
    color: #0284c7 !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 6px rgba(143, 217, 251, 0.2) !important;
    transition: all 0.2s ease !important;
}

.pgs-aira-suggestion:hover,
.aira-suggestions button:hover {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-1px);
}

.aira-footer button.send-btn:not(:disabled) {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 65%, #8FD9FB 100%) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

.aira-clear-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.aira-clear-btn:hover {
    background: #ffffff !important;
    color: #0284c7 !important;
    border-color: #ffffff !important;
}

.aira-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.aira-close:hover {
    background: #ffffff !important;
    color: #0284c7 !important;
    border-color: #ffffff !important;
    transform: rotate(90deg) scale(1.05) !important;
}

/* ==============================================================================
   17. UTILITY CLASSES (Polyfill for Flex Gap & Micro Font Sizes)
   ============================================================================== */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }
.gap-5 { gap: 24px !important; }
.gap-2px { gap: 2px !important; }
.gap-3px { gap: 3px !important; }
.gap-4px { gap: 4px !important; }
.gap-5px { gap: 5px !important; }
.gap-6px { gap: 6px !important; }
.gap-8px { gap: 8px !important; }
.gap-10px { gap: 10px !important; }
.gap-12px { gap: 12px !important; }
.gap-14px { gap: 14px !important; }
.gap-16px { gap: 16px !important; }

.fs-9 { font-size: 9px !important; }
.fs-10 { font-size: 10px !important; }
.fs-10-5 { font-size: 10.5px !important; }
.fs-11 { font-size: 11px !important; }
.fs-11-5 { font-size: 11.5px !important; }
.fs-12 { font-size: 12px !important; }
.fs-12-5 { font-size: 12.5px !important; }
.fs-13 { font-size: 13px !important; }
.fs-13-5 { font-size: 13.5px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-15-5 { font-size: 15.5px !important; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-30 { font-size: 30px !important; }
.fs-32 { font-size: 32px !important; }
.fs-64 { font-size: 64px !important; }
.fs-70 { font-size: 70px !important; }

.opacity-15 { opacity: 0.15 !important; }
.opacity-85 { opacity: 0.85 !important; }
.opacity-90 { opacity: 0.90 !important; }
.opacity-95 { opacity: 0.95 !important; }

.badge-pill-glass {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
}

/* Stat cards */
.card-stat-cyan {
    border-radius: 18px !important;
    border-top: 3px solid #00bcd4 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card-stat-cyan:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}
.card-stat-green {
    border-radius: 18px !important;
    border-top: 3px solid #28a745 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card-stat-green:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}
.card-stat-blue {
    border-radius: 18px !important;
    border-top: 3px solid #0284c7 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card-stat-blue:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}
.card-stat-red {
    border-radius: 18px !important;
    border-top: 3px solid #dc3545 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card-stat-red:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Icon circles */
.icon-circle-md-cyan {
    width: 44px !important;
    height: 44px !important;
    background: #e0f7fa !important;
    color: #00bcd4 !important;
    border-radius: 50% !important;
}
.icon-circle-md-green {
    width: 44px !important;
    height: 44px !important;
    background: #e8f5e9 !important;
    color: #28a745 !important;
    border-radius: 50% !important;
}
.icon-circle-md-red {
    width: 44px !important;
    height: 44px !important;
    background: #ffebee !important;
    color: #dc3545 !important;
    border-radius: 50% !important;
}
.icon-circle-sm-blue {
    width: 32px !important;
    height: 32px !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border-radius: 50% !important;
}
.icon-circle-lg-green {
    width: 70px !important;
    height: 70px !important;
    background: #e8f5e9 !important;
    color: #28a745 !important;
    border-radius: 50% !important;
}

/* Floating Action Button */
.btn-fab-fixed,
.pgs-fab-btn {
    position: fixed !important;
    right: 20px !important;
    bottom: 88px !important;
    z-index: 1045 !important;
    background: linear-gradient(135deg, #0284c7 0%, #00bcd4 100%) !important;
    border: 2.5px solid #ffffff !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #ffffff !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: 0 8px 24px -2px rgba(2, 132, 199, 0.45), 0 4px 10px rgba(0, 188, 212, 0.25) !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease !important;
    cursor: pointer !important;
}
.btn-fab-fixed:hover,
.pgs-fab-btn:hover {
    transform: translateY(-3px) scale(1.06) !important;
    box-shadow: 0 12px 28px -2px rgba(2, 132, 199, 0.55), 0 6px 14px rgba(0, 188, 212, 0.35) !important;
    color: #ffffff !important;
}
.btn-fab-fixed:active,
.pgs-fab-btn:active {
    transform: translateY(0) scale(0.96) !important;
}

@media (max-width: 575.98px) {
    .btn-fab-fixed,
    .pgs-fab-btn {
        right: 16px !important;
        bottom: 84px !important;
        width: 50px !important;
        height: 50px !important;
    }
}

/* Notification & Timeline - Modern PGS Design */
.notif-card {
    border-radius: 20px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
.notif-card.unread {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important;
    border: 1.5px solid #8FD9FB !important;
    box-shadow: 0 4px 16px rgba(143, 217, 251, 0.2) !important;
}
.notif-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.1) !important;
    border-color: #0284c7 !important;
}
.notif-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}
.notif-icon-primary { background-color: #e0f2fe !important; color: #0284c7 !important; }
.notif-icon-success { background-color: #dcfce7 !important; color: #16a34a !important; }
.notif-icon-danger { background-color: #fee2e2 !important; color: #dc2626 !important; }
.notif-icon-warning { background-color: #fef3c7 !important; color: #d97706 !important; }

.card-timeline-item {
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.card-timeline-item:hover {
    transform: translateY(-2px) !important;
    border-color: #8FD9FB !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.1) !important;
}

.pgs-jadwal-card-footer {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 14px !important;
    margin-top: 12px !important;
}

.notif-wrapper {
    max-width: 950px;
    margin: auto;
}
.notif-header {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    color: #ffffff;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.notif-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
}
.notif-empty-card {
    border-radius: 20px;
    padding: 60px 20px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

/* Squircle extra styles */
.pgs-squircle-aira {
    background: linear-gradient(135deg, #e0f4fe 0%, #8FD9FB 100%) !important;
    color: #0284c7 !important;
    box-shadow: 0 4px 14px rgba(143, 217, 251, 0.45) !important;
}
.pgs-squircle-red {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}
.pgs-sheet-info-card {
    background: #f8fafc !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.btn-close-circle {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.filter-scroll {
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.filter-scroll::-webkit-scrollbar {
    display: none !important;
}

/* ==============================================================================
   18. QUICK MENU CARDS & INSTANT CSS HOVER (PGS Theme)
   ============================================================================== */
.quick-menu-card {
    border-radius: 18px !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    cursor: pointer;
    min-height: 112px;
}
.quick-menu-card:hover {
    transform: translateY(-4px) !important;
}

.quick-menu-ai {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
}
.quick-menu-ai:hover {
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.2) !important;
}

.quick-menu-konsultasi {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.08) !important;
}
.quick-menu-konsultasi:hover {
    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.2) !important;
}

.quick-menu-komunitas {
    background: linear-gradient(135deg, #ffffff 0%, #fff7fa 100%) !important;
    box-shadow: 0 4px 14px rgba(255, 64, 129, 0.08) !important;
}
.quick-menu-komunitas:hover {
    box-shadow: 0 8px 22px rgba(255, 64, 129, 0.2) !important;
}

.quick-menu-edukasi {
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;
    box-shadow: 0 4px 14px rgba(123, 31, 162, 0.08) !important;
}
.quick-menu-edukasi:hover {
    box-shadow: 0 8px 22px rgba(123, 31, 162, 0.2) !important;
}

.quick-menu-icon-ai {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f4fe 0%, #8FD9FB 100%) !important;
    color: #0284c7 !important;
    box-shadow: 0 4px 12px rgba(143, 217, 251, 0.45) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.quick-menu-icon-konsultasi {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-menu-icon-komunitas {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
    color: #c2185b;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(255, 64, 129, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-menu-icon-edukasi {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    color: #7b1fa2;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(123, 31, 162, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==============================================================================
   19. PRODUCT & TIMELINE CARDS (Instant Pure CSS Hover)
   ============================================================================== */
.card-product-item {
    border-radius: 20px !important;
    border: 1px solid #eef2f7 !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.card-product-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}


.badge-header-counter {
    background: #ffffff !important;
    color: #0284c7 !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Header Action Buttons (White & Glassmorphic) */
.pgs-header-btn-white {
    background: #ffffff !important;
    color: #0284c7 !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.pgs-header-btn-white:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
    color: #0369a1 !important;
}

.pgs-header-btn-glass {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease, background 0.2s ease !important;
}
.pgs-header-btn-glass:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.card-stat-top-blue {
    border-radius: 18px !important;
    border-top: 3px solid #0284c7 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card-stat-top-blue:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

.icon-circle-md-blue {
    width: 44px !important;
    height: 44px !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border-radius: 50% !important;
}

/* ==============================================================================
   20. COMPREHENSIVE MODULAR CSS UTILITIES & EXTRACTED STYLES
   ============================================================================== */
.btn-ai-prompt {
    border-radius: 12px !important;
    font-size: 11px !important;
    border-color: #b2ebf2 !important;
    transition: all 0.2s ease !important;
}
.btn-ai-prompt:hover {
    background: #e0f7fa !important;
    border-color: #80deea !important;
}

.card-ai-banner {
    border-radius: 24px !important;
    background: linear-gradient(135deg, #e8f9fd 0%, #f4fbff 100%) !important;
    border: 1px solid #dff5fa !important;
}

.media-ai-chat {
    border-radius: 16px !important;
}

.card-benefit-box {
    border-radius: 14px !important;
    border-left: 4px solid #28a745 !important;
}

.card-benefit-box .pgs-benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 5px;
}

.card-benefit-box .pgs-benefit-item:last-child {
    margin-bottom: 0;
}

.card-benefit-box .pgs-benefit-bullet {
    flex-shrink: 0;
    margin-right: 6px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-benefit-box .pgs-benefit-text {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

.banner-hero-default {
    border-radius: 24px !important;
    background: linear-gradient(135deg, #e8f7fa 0%, #f4fbff 40%, #fff6f9 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.10) !important;
    overflow: hidden;
    position: relative;
}

.banner-ambient-circle {
    position: absolute;
    top: -30px;
    right: -20px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 64, 129, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.badge-ambient-date {
    background: rgba(255, 255, 255, 0.85) !important;
    font-size: 11px !important;
    border: 1px solid rgba(0, 188, 212, 0.2) !important;
}

.btn-gradient-cyan {
    background: linear-gradient(135deg, #00bcd4, #0097a7) !important;
    border: none !important;
    color: #ffffff !important;
}

.img-banner-kidney {
    max-height: 135px !important;
    filter: drop-shadow(0 8px 16px rgba(0, 188, 212, 0.22)) !important;
}

.avatar-ai-robot {
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #00bcd4, #0097a7) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.icon-circle-28-cyan {
    width: 28px !important;
    height: 28px !important;
    background: #e0f7fa !important;
    color: #00bcd4 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-circle-28-green {
    width: 28px !important;
    height: 28px !important;
    background: #e8f5e9 !important;
    color: #28a745 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-circle-28-blue {
    width: 28px !important;
    height: 28px !important;
    background: #e3f2fd !important;
    color: #1976d2 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-circle-42-green {
    width: 42px !important;
    height: 42px !important;
    background: #e8f5e9 !important;
    color: #28a745 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-circle-60-gray {
    width: 60px !important;
    height: 60px !important;
    background: #f4f8fc !important;
    color: #90a4ae !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-slider-circle {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.slider-scroll-container {
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.slider-product-card {
    width: 260px !important;
    flex-shrink: 0 !important;
}

.stat-card-gradient-red {
    border-radius: 16px !important;
    background: linear-gradient(135deg, #fff1f2, #ffe4e6) !important;
}

.stat-card-gradient-green {
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
}

.stat-card-gradient-blue {
    border-radius: 16px !important;
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
}

.stat-card-gradient-purple {
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important;
}

.rounded-6 { border-radius: 6px !important; }
.rounded-10 { border-radius: 10px !important; }
.rounded-12 { border-radius: 12px !important; }
.rounded-14 { border-radius: 14px !important; }
.rounded-16 { border-radius: 16px !important; }
.rounded-18 { border-radius: 18px !important; }
.rounded-20 { border-radius: 20px !important; }
.rounded-22 { border-radius: 22px !important; }
.rounded-24 { border-radius: 24px !important; }
.rounded-28 { border-radius: 28px !important; }
.rounded-30 { border-radius: 30px !important; }

.rounded-left-12 { border-radius: 12px 0 0 12px !important; }
.rounded-right-12 { border-radius: 0 12px 12px 0 !important; }

.max-w-180px { max-width: 180px !important; }
.bg-light-card { background-color: #fdfdfd !important; }

.table-rounded-16 { border-radius: 16px !important; overflow: hidden; }

.fs-8-5 { font-size: 8.5px !important; }
.fs-10-5 { font-size: 10.5px !important; }
.fs-11-5 { font-size: 11.5px !important; }
.fs-12-5 { font-size: 12.5px !important; }
.fs-13-5 { font-size: 13.5px !important; }

.lh-1 { line-height: 1 !important; }
.lh-115 { line-height: 1.15 !important; }
.lh-13 { line-height: 1.3 !important; }
.lh-14 { line-height: 1.4 !important; }
.lh-145 { line-height: 1.45 !important; }
.lh-15 { line-height: 1.5 !important; }
.lh-16 { line-height: 1.6 !important; }
.lh-17 { line-height: 1.7 !important; }
.lh-185 { line-height: 1.85 !important; }

.border-left-primary-4 { border-left: 4px solid #0284c7 !important; }
.border-left-success-4 { border-left: 4px solid #28a745 !important; }
.border-left-warning-4 { border-left: 4px solid #f59e0b !important; }
.border-left-teal-5 { border-left: 5px solid #0d9488 !important; }
.border-left-info-4 { border-left: 4px solid #0ea5e9 !important; }

.w-42px { width: 42px !important; }
.h-42px { height: 42px !important; }
.w-44px { width: 44px !important; }
.h-44px { height: 44px !important; }
.w-50px { width: 50px !important; }
.h-50px { height: 50px !important; }
.w-52px { width: 52px !important; }
.h-52px { height: 52px !important; }
.w-60px { width: 60px !important; }
.h-60px { height: 60px !important; }
.w-70px { width: 70px !important; }
.h-70px { height: 70px !important; }

.h-46px { height: 46px !important; }
.lh-30px { line-height: 30px !important; }
.max-w-440px { max-width: 440px !important; }
.max-w-520px { max-width: 520px !important; }
.max-w-540px { max-width: 540px !important; }
.max-w-560px { max-width: 560px !important; }

.min-w-0 { min-width: 0 !important; }
.min-w-150px { min-width: 150px !important; }
.min-w-170px { min-width: 170px !important; }

.w-35-pct { width: 35% !important; }
.m-auto { margin: 0 auto !important; }
.border-slate-200 { border: 1px solid #edf2f7 !important; }
.modal-backdrop-dark { background-color: rgba(15, 23, 42, 0.7) !important; z-index: 1060 !important; }
.modal-content-rounded { border-radius: 24px !important; overflow: hidden !important; }
.modal-header-gradient-cyan { background: linear-gradient(135deg, #00bcd4, #0097a7) !important; color: #ffffff !important; }
.icon-circle-pill-green { width: 70px !important; height: 70px !important; background: #e8f5e9 !important; color: #28a745 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.calendar-day-box-active { background: #e0f2fe !important; border-color: #38bdf8 !important; }

.cursor-pointer { cursor: pointer !important; }
.letter-spacing-neg-03 { letter-spacing: -0.3px !important; }
.letter-spacing-05 { letter-spacing: 0.5px !important; }
.letter-spacing-08 { letter-spacing: 0.8px !important; }

.bg-error-page {
    min-height: 100vh;
    background: #edf7fb;
    position: relative;
}
.login-card-error {
    max-width: 440px !important;
}

.box-product-showcase-img {
    background: linear-gradient(135deg, #f7fdf9 0%, #eaf7ed 100%) !important;
    border-radius: 20px !important;
}
.box-product-grid-img {
    background: linear-gradient(135deg, #f8fcf9 0%, #eef8f1 100%) !important;
}
.position-inset-12 {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
}
.pos-top-left-10 {
    top: 10px !important;
    left: 10px !important;
}
.img-showcase-product {
    max-height: 210px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    filter: drop-shadow(0 8px 16px rgba(40, 167, 69, 0.15)) !important;
    transition: transform 0.2s ease !important;
}
.img-showcase-product:hover {
    transform: scale(1.03) !important;
}
.img-product-grid {
    height: 140px !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    filter: drop-shadow(0 4px 10px rgba(40, 167, 69, 0.12)) !important;
    transition: transform 0.2s ease !important;
}
.img-product-grid:hover {
    transform: scale(1.03) !important;
}
.img-product-slider {
    height: 135px !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    filter: drop-shadow(0 4px 10px rgba(40, 167, 69, 0.12)) !important;
    transition: transform 0.2s ease !important;
}
.img-product-slider:hover {
    transform: scale(1.03) !important;
}
.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.border-top-danger-3 { border-top: 3px solid #ef4444 !important; }
.border-top-warning-3 { border-top: 3px solid #f59e0b !important; }
.border-top-success-3 { border-top: 3px solid #10b981 !important; }
.border-top-info-3 { border-top: 3px solid #00bcd4 !important; }
.border-top-secondary-3 { border-top: 3px solid #94a3b8 !important; }

.stat-glow-red { background: #fff5f7 !important; }
.stat-glow-yellow { background: #fffbf0 !important; }
.stat-glow-green { background: #f0fdf4 !important; }
.stat-glow-gray { background: #f8fafc !important; }

.pgs-glass-pill-active {
    background: rgba(34, 197, 94, 0.35) !important;
    border-color: rgba(74, 222, 128, 0.6) !important;
}
.pgs-icon-wrap-blue {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}
.pgs-icon-wrap-green {
    background: #ecfdf5 !important;
    color: #059669 !important;
}
.text-pink-accent {
    color: #ff4081 !important;
}
.text-cyan-light {
    color: #bae6fd !important;
}

/* ==============================================================================
   21. AIRA MODAL & PASIEN LAYOUT DEDICATED STYLES (PGS THEME)
   ============================================================================== */
.logo-circle-container {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
}

.logo-circle-container .logo-brand,
.logo-circle-container .logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

.logo-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.logo-title {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.15 !important;
}
.logo-text-pendamping {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #bae6fd !important;
    letter-spacing: 2.8px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    display: block !important;
    opacity: 0.95 !important;
}
.logo-text-ginjalsehat {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.4px !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    display: block !important;
}

.nav-btn-icon {
    outline: none !important;
    box-shadow: none !important;
}

.badge-counter-floating {
    top: -8px !important;
    right: -10px !important;
    min-width: 19px !important;
    height: 19px !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    box-shadow: 0 2px 4px rgba(220,53,69,.4) !important;
}

.badge-dot-floating {
    top: -4px !important;
    right: -6px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    box-shadow: 0 0 0 2px #fff !important;
}

.dropdown-menu-chat,
.dropdown-menu-notif {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    border-radius: 18px !important;
    border: none !important;
    overflow: hidden !important;
    z-index: 1050 !important;
    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(226, 232, 240, 0.9) !important;
}

@media (max-width: 575.98px) {
    .dropdown-menu-chat,
    .dropdown-menu-notif {
        width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        max-width: 360px !important;
    }
}

.pgs-dropdown-header {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-bottom: 1px solid #e0f2fe !important;
    padding: 13px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
}

.pgs-dropdown-header-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

.pgs-dropdown-icon-circle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.16) !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

.pgs-dropdown-badge-danger {
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.12) !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
}

.pgs-dropdown-badge-primary {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.12) !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
}

.pgs-dropdown-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.icon-circle-26-blue {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
}

.icon-circle-52-blue {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
}

.scroll-y-360 {
    max-height: 360px !important;
    overflow-y: auto !important;
}

.scroll-y-350 {
    max-height: 350px !important;
    overflow-y: auto !important;
}

.empty-chat-box {
    min-height: 170px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.avatar-chat-sm {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
}

.chat-status-dot-active {
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    border: 2px solid #ffffff !important;
}

.chat-status-dot-pending {
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 50% !important;
    background-color: #f59e0b !important;
    border: 2px solid #ffffff !important;
}

.divider-v-slate {
    width: 1px !important;
    height: 14px !important;
    background-color: #cbd5e1 !important;
}

.banner-notif-hp {
    background-color: #f5f7ff !important;
    border-color: #e0e7ff !important;
    cursor: pointer !important;
}

.btn-notif-hp {
    font-size: 10.5px !important;
    border-radius: 6px !important;
    background-color: #4338ca !important;
    border-color: #4338ca !important;
    color: #ffffff !important;
}

.dropdown-menu-profile {
    position: absolute !important;
    right: 0 !important;
    border-radius: 14px !important;
}

.content-wrapper-user {
    padding-bottom: 80px !important;
}

.content-wrapper-guest {
    padding-bottom: 40px !important;
}

.banner-live-chat-top {
    border-left: 4px solid #0284c7 !important;
}

.spinner-dot-8 {
    width: 8px !important;
    height: 8px !important;
}

.text-primary-pgs {
    color: #0284c7 !important;
}

.text-slate-500 {
    color: #64748b !important;
}

/* Fullscreen Aira AI Modal */
.aira-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 1060 !important;
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.aira-header {
    height: 70px !important;
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 45%, #8FD9FB 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.28) !important;
    z-index: 10 !important;
    position: relative !important;
    overflow: hidden !important;
}

.aira-watermark {
    position: absolute !important;
    right: -15px !important;
    top: -20px !important;
    width: 130px !important;
    height: 130px !important;
    opacity: 0.14 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.aira-watermark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.aira-avatar-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid rgba(255,255,255,.75) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    z-index: 2 !important;
}
.aira-avatar-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.aira-info-box {
    flex: 1 !important;
    min-width: 0 !important;
    z-index: 2 !important;
}

.aira-title-text {
    font-size: 20px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
}

.aira-status-text {
    font-size: 12px !important;
    opacity: 0.95 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #ffffff !important;
}

.aira-chat-area {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 18px 16px !important;
    background: #f4f8fb !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.chat-row-flex {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
.chat-row-user {
    justify-content: flex-end !important;
}
.chat-row-bot {
    justify-content: flex-start !important;
}

.bot-avatar-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
    margin-top: 2px !important;
}
.bot-avatar-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.chat-content-max {
    max-width: 85% !important;
}

.bot-name-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
    margin-bottom: 4px !important;
    margin-left: 4px !important;
}

.user-bubble-box {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%) !important;
    color: #ffffff !important;
    padding: 12px 18px !important;
    border-radius: 18px 18px 4px 18px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
}

.bot-bubble-box {
    background: #ffffff !important;
    color: #334155 !important;
    padding: 14px 18px !important;
    border-radius: 18px 18px 18px 4px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    border: 1px solid #e0f2fe !important;
    word-break: break-word !important;
}

.bot-bubble-loading-box {
    background: #ffffff !important;
    color: #64748b !important;
    padding: 12px 18px !important;
    border-radius: 18px 18px 18px 4px !important;
    font-size: 14px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    border: 1px solid #e0f2fe !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.aira-suggestions-scroll {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
}
.aira-suggestions-scroll::-webkit-scrollbar {
    display: none !important;
}

.aira-suggestion-pill-btn {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    flex-shrink: 0 !important;
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1.5px solid #8FD9FB !important;
    box-shadow: 0 2px 6px rgba(143, 217, 251, 0.2) !important;
    transition: all 0.2s ease !important;
    border-radius: 50rem !important;
}
.aira-suggestion-pill-btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.aira-footer-container {
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

.aira-input-form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f1f5f9 !important;
    padding: 4px 6px 4px 18px !important;
    border-radius: 28px !important;
    border: 1.5px solid #e2e8f0 !important;
}

.aira-input-elem {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #1e293b !important;
}

.aira-btn-send {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 65%, #8FD9FB 100%) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
}
.aira-btn-send:disabled {
    background: #cbd5e1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Aira Markdown and Table Formatting */
.aira-markdown-content h4, .aira-markdown-content h5 {
    color: #0284c7 !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
    font-size: 15px !important;
}
.aira-markdown-content p {
    margin-bottom: 8px !important;
}
.aira-markdown-content p:last-child {
    margin-bottom: 0 !important;
}
.aira-markdown-content ul, .aira-markdown-content ol {
    padding-left: 20px !important;
    margin-bottom: 8px !important;
}
.aira-markdown-content li {
    margin-bottom: 4px !important;
}
.aira-markdown-content strong {
    color: #0f172a !important;
}
.aira-table-wrap {
    width: 100% !important;
    margin: 12px 0 16px 0 !important;
    overflow-x: auto !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
}
.aira-table, .aira-markdown-content table {
    width: 100% !important;
    min-width: 480px !important;
    border-collapse: collapse !important;
    font-size: 13.5px !important;
    background: #ffffff !important;
    margin: 0 !important;
}
.aira-markdown-content th {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    padding: 11px 14px !important;
    text-align: left !important;
    vertical-align: middle !important;
    border: 1px solid #cbd5e1 !important;
    border-top: none !important;
    font-size: 13.5px !important;
    letter-spacing: 0.2px !important;
}
.aira-markdown-content td {
    padding: 10px 14px !important;
    border: 1px solid #cbd5e1 !important;
    vertical-align: top !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    font-size: 13px !important;
    word-break: break-word !important;
}
.aira-markdown-content tr:nth-child(even) td {
    background-color: #f8fafc !important;
}
.aira-markdown-content tr:hover td {
    background-color: #f0fdf4 !important;
}
.aira-markdown-content td ul, .aira-markdown-content td ol {
    padding-left: 18px !important;
    margin-bottom: 0 !important;
    margin-top: 4px !important;
}
.aira-markdown-content td li {
    margin-bottom: 4px !important;
}

/* Hasil Lab & Utility Classes - PGS Theme (#0284c7) */
.card-stat-cyan { border-radius: 18px !important; border-top: 3px solid #0284c7 !important; }
.card-stat-green { border-radius: 18px !important; border-top: 3px solid #28a745 !important; }
.card-stat-red { border-radius: 18px !important; border-top: 3px solid #dc3545 !important; }
.card-stat-purple { border-radius: 18px !important; border-top: 3px solid #6f42c1 !important; }
.icon-box-44-cyan { width: 44px !important; height: 44px !important; background: #e0f2fe !important; color: #0284c7 !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.icon-box-44-green { width: 44px !important; height: 44px !important; background: #e8f5e9 !important; color: #28a745 !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.icon-box-44-red { width: 44px !important; height: 44px !important; background: #ffebee !important; color: #dc3545 !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.icon-box-44-purple { width: 44px !important; height: 44px !important; background: #f3e5f5 !important; color: #6f42c1 !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.icon-circle-32-cyan { width: 32px !important; height: 32px !important; background: #e0f2fe !important; color: #0284c7 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.icon-circle-32-green { width: 32px !important; height: 32px !important; background: #e8f5e9 !important; color: #28a745 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.card-hero-lab { border-radius: 24px !important; background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 50%, #f0fdf4 100%) !important; box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08) !important; }
.btn-gradient-cyan { background: linear-gradient(135deg, #0284c7, #0369a1) !important; border: none !important; color: #ffffff !important; }
.icon-circle-lab-hero { width: 130px !important; height: 130px !important; background: radial-gradient(circle, rgba(2, 132, 199, 0.15) 0%, rgba(255, 255, 255, 0) 70%) !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.card-ai-box { border-radius: 18px !important; background: #ffffff !important; border: 1px solid #bae6fd !important; }
.alert-ai-disclaimer { background: #fffbeb !important; border: 1px solid #fef3c7 !important; border-radius: 14px !important; }
.fs-10 { font-size: 10px !important; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-64-op85 { font-size: 64px !important; opacity: 0.85 !important; }
.lh-1-5 { line-height: 1.5 !important; }
.lh-1-7 { line-height: 1.7 !important; }
.h-32px { height: 32px !important; }
.w-32px { width: 32px !important; }
.opacity-90 { opacity: 0.9 !important; }
.max-h-68vh { max-height: 68vh !important; }
.max-h-72vh { max-height: 72vh !important; }
.max-h-42vh { max-height: 42vh !important; }
.bg-light-slate { background: #f8fafc !important; }
.thead-sticky-top { position: sticky !important; top: 0 !important; z-index: 1 !important; }
.iframe-pdf-preview { width: 100% !important; height: 520px !important; border: 0 !important; border-radius: 12px !important; }
.img-lab-preview { max-height: 68vh !important; object-fit: contain !important; }
.min-w-220px { min-width: 220px !important; }
.max-w-full { max-width: 100% !important; }
.rounded-22 { border-radius: 22px !important; }

/* Profil Page Utility Classes - PGS Theme (#0284c7) */
.profile-hero-card {
    border-radius: 20px !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%) !important;
    color: #ffffff !important;
}
.profile-hero-ambient {
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 220px !important;
    height: 220px !important;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}
.profile-avatar {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 4px solid rgba(255, 255, 255, 0.9) !important;
    background-color: #f8fafc !important;
}
.btn-avatar-camera {
    bottom: 2px !important;
    right: 2px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    padding: 0 !important;
    color: #0284c7 !important;
    box-sizing: border-box !important;
}
.badge-registered {
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    font-size: 12px !important;
}
.border-w-2 { border-width: 2px !important; }
.text-decoration-none { text-decoration: none !important; }

.icon-stat-46-red {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background-color: #e11d48 !important;
    color: #fff !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}
.icon-stat-46-green {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background-color: #16a34a !important;
    color: #fff !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.icon-stat-46-blue {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background-color: #0284c7 !important;
    color: #fff !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.icon-stat-46-purple {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background-color: #7c3aed !important;
    color: #fff !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.badge-bmi-warning { background-color: #fef3c7 !important; color: #b45309 !important; }
.badge-bmi-success { background-color: #d1fae5 !important; color: #065f46 !important; }
.badge-bmi-info { background-color: #e0e7ff !important; color: #3730a3 !important; }
.badge-bmi-orange { background-color: #ffedd5 !important; color: #9a3412 !important; }
.badge-bmi-danger { background-color: #fee2e2 !important; color: #991b1b !important; }

.btn-group-tabs-p1 {
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
}
.rounded-18 { border-radius: 18px !important; }
.accordion-header-custom {
    cursor: pointer !important;
    border-radius: 12px !important;
}
.rounded-0 { border-radius: 0 !important; }

.id-card-gradient {
    width: 100% !important;
    max-width: 440px !important;
    height: 250px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #0f172a 100%) !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.28) !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.id-card-ambient {
    position: absolute !important;
    top: -60px !important;
    right: -60px !important;
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%) !important;
    pointer-events: none !important;
}
.id-card-chip {
    font-family: monospace !important;
    letter-spacing: 3px !important;
    font-size: 16px !important;
}
.rotate-90 { transform: rotate(90deg) !important; }
.fs-26 { font-size: 26px !important; }
.letter-spacing-1 { letter-spacing: 1px !important; }

.modal-header-gradient-amber { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #ffffff !important; }
.modal-header-gradient-indigo { background: linear-gradient(135deg, #4338ca, #6366f1) !important; color: #ffffff !important; }
.modal-header-gradient-cyan { background: linear-gradient(135deg, #0284c7, #0369a1) !important; color: #ffffff !important; }
.btn-modal-close-abs { font-size: 24px !important; position: absolute !important; right: 18px !important; }
.qr-container-180 { width: 180px !important; height: 180px !important; display: block !important; }
.qr-code-text { letter-spacing: 1px !important; font-size: 15px !important; }

.card-health-red { border-radius: 16px !important; background: linear-gradient(135deg, #fff1f2, #ffe4e6) !important; }
.card-health-green { border-radius: 16px !important; background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important; }
.card-health-blue { border-radius: 16px !important; background: linear-gradient(135deg, #eff6ff, #dbeafe) !important; }
.card-health-purple { border-radius: 16px !important; background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important; }

.rounded-12 { border-radius: 12px !important; }
.rounded-14 { border-radius: 14px !important; }
.rounded-16 { border-radius: 16px !important; }
.rounded-20 { border-radius: 20px !important; }
.rounded-24 { border-radius: 24px !important; }
.rounded-left-12 { border-radius: 12px 0 0 12px !important; }
.rounded-right-12 { border-radius: 0 12px 12px 0 !important; }
.rounded-left-14 { border-radius: 14px 0 0 14px !important; }
.rounded-right-14 { border-radius: 0 14px 14px 0 !important; }

.modal-backdrop-dark { background-color: rgba(15, 23, 42, 0.75) !important; z-index: 1060 !important; }
.modal-content-rounded { border-radius: 20px !important; overflow: hidden !important; }
.modal-content-rounded-24 { border-radius: 24px !important; overflow: hidden !important; }

.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-13-5 { font-size: 13.5px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-24 { font-size: 24px !important; }
.lh-1-6 { line-height: 1.6 !important; }
.medical-card-dark { border-radius: 20px !important; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important; position: relative !important; }
.medical-card-watermark { position: absolute !important; right: -20px !important; bottom: -20px !important; width: 160px !important; height: 160px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0) 70%) !important; pointer-events: none !important; }
.letter-spacing-05 { letter-spacing: 0.5px !important; }
.card-number-mono { letter-spacing: 2px !important; font-family: monospace !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; }
.img-avatar-preview { width: 100px !important; height: 100px !important; object-fit: cover !important; border-radius: 50% !important; border: 3px solid #0284c7 !important; }

/* Konsultasi & Konsultasi Gizi Component Styles - PGS Theme (#0284c7) */
.search-bar-halodoc { border-radius: 30px !important; overflow: hidden !important; border: 1.5px solid #e2e8f0 !important; }
.input-search-halodoc { height: 42px !important; font-size: 13.5px !important; background: transparent !important; }

.card-doctor-item { border-radius: 16px !important; border: 1px solid #e2e8f0 !important; background-color: #ffffff !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important; height: auto !important; align-self: flex-start !important; }
.card-doctor-item.selected { border: 2px solid #0284c7 !important; background-color: #f0f9ff !important; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.14) !important; }

.avatar-doctor-48 { width: 48px !important; height: 48px !important; object-fit: cover !important; border: 2px solid #f1f5f9 !important; }
.online-indicator-11 { width: 11px !important; height: 11px !important; bottom: 1px !important; right: 1px !important; }

.btn-consult-doctor { border-radius: 12px !important; font-size: 12.5px !important; font-weight: 700 !important; border: none !important; color: #ffffff !important; background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; }
.btn-consult-doctor-disabled { border-radius: 12px !important; font-size: 12.5px !important; font-weight: 700 !important; border: 1px solid #e2e8f0 !important; background-color: #f8fafc !important; color: #94a3b8 !important; cursor: not-allowed !important; }

.box-keluhan-pasien { background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; white-space: pre-line !important; line-height: 1.65 !important; font-size: 14px !important; color: #1e293b !important; }
.box-live-chat-banner { border-radius: 18px !important; background-color: #f0f9ff !important; border: 1px solid #bae6fd !important; }
.box-balasan-dokter { background-color: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; border-left: 5px solid #16a34a !important; border-radius: 16px !important; }
.box-menunggu-balasan { background-color: #fffbeb !important; border: 1px solid #fef3c7 !important; border-left: 4px solid #f59e0b !important; color: #92400e !important; font-size: 12.5px !important; border-radius: 14px !important; }
.text-pre-line-content { color: #1e293b !important; white-space: pre-line !important; line-height: 1.65 !important; font-size: 14px !important; }

.modal-doctor-icon { width: 38px !important; height: 38px !important; background: rgba(255,255,255,0.2) !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.modal-backdrop-scroll { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
.modal-dialog-maxh { max-height: calc(100vh - 3.5rem) !important; display: flex !important; flex-direction: column !important; }
.modal-body-scrollable { overflow-y: auto !important; flex: 1 1 auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; }

.avatar-patient-46 { width: 46px !important; height: 46px !important; object-fit: cover !important; border-radius: 50% !important; }
.avatar-patient-44 { width: 44px !important; height: 44px !important; object-fit: cover !important; border: 2px solid #ffffff !important; border-radius: 50% !important; }
.avatar-consult-36 { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; object-fit: cover !important; margin-right: 12px !important; flex-shrink: 0 !important; border-radius: 50% !important; }
.icon-box-36-slate { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; background-color: #f1f5f9 !important; color: #0284c7 !important; margin-right: 12px !important; flex-shrink: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.icon-box-44-slate { width: 44px !important; height: 44px !important; background-color: #f1f5f9 !important; color: #64748b !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.icon-box-60-slate { width: 60px !important; height: 60px !important; background-color: #e2e8f0 !important; color: #64748b !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

.modal-backdrop-semi { background-color: rgba(0,0,0,0.65) !important; z-index: 1060 !important; }
.iframe-preview-pdf { width: 100% !important; height: 550px !important; border: 0 !important; border-radius: 8px !important; }
.img-preview-doc { max-height: 70vh !important; object-fit: contain !important; }

.letter-spacing-neg02 { letter-spacing: -0.2px !important; }
.letter-spacing-neg03 { letter-spacing: -0.3px !important; }
.letter-spacing-03 { letter-spacing: 0.3px !important; }
.letter-spacing-004em { letter-spacing: 0.04em !important; }
.letter-spacing-005em { letter-spacing: 0.05em !important; }
.text-slate { color: #64748b !important; }
.text-pink { color: #ff4081 !important; }
.border-slate-100 { border-color: #f1f5f9 !important; }
.border-transparent { border-color: transparent !important; }
.bg-slate-50 { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-sky-50 { background-color: #f0f9ff !important; border: 1px solid #bae6fd !important; }
.bg-gradient-emerald-pill { background: linear-gradient(135deg, #059669, #10b981) !important; border: none !important; color: #ffffff !important; font-size: 11px !important; }
.bg-gradient-cyan-pill { background: linear-gradient(135deg, #0284c7, #0ea5e9) !important; border: none !important; color: #ffffff !important; font-size: 11px !important; }
.btn-gradient-emerald { background: linear-gradient(135deg, #059669, #10b981) !important; border: none !important; color: #ffffff !important; }

.fs-10-5 { font-size: 10.5px !important; }
.fs-11-5 { font-size: 11.5px !important; }
.fs-12-5 { font-size: 12.5px !important; }
.h-42px { height: 42px !important; }
.h-550px { height: 550px !important; }
.min-w-34 { min-width: 34px !important; text-align: center !important; }
.max-h-70vh { max-height: 70vh !important; }
.max-h-75vh { max-height: 75vh !important; }
.max-w-600px { max-width: 600px !important; }
.icon-w-15 { width: 15px !important; text-align: center !important; }
.icon-w-16 { width: 16px !important; text-align: center !important; }
.rounded-10 { border-radius: 10px !important; }
.rounded-30 { border-radius: 30px !important; }
.rounded-50 { border-radius: 50px !important; }
.lh-1-3 { line-height: 1.3 !important; }
.lh-1-4 { line-height: 1.4 !important; }
.lh-1-5 { line-height: 1.5 !important; }
.gap-10px { gap: 10px !important; }
.gap-12px { gap: 12px !important; }
.min-w-0 { min-width: 0 !important; }
.flex-1 { flex: 1 1 0% !important; }
.min-w-82 { min-width: 82px !important; }
.min-w-95 { min-width: 95px !important; }
.cursor-pointer { cursor: pointer !important; }
.text-decor-underline { text-decoration: underline !important; }
.overflow-y-auto { overflow-y: auto !important; }

.dropdown-autocomplete-menu { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 1050 !important; max-height: 280px !important; overflow-y: auto !important; }
.modal-body-form-scrollable { overflow-y: auto !important; flex: 1 1 auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; max-height: 68vh !important; }

.btn-request-doctor { font-size: 11px !important; letter-spacing: 0.5px !important; min-width: 82px !important; border-radius: 50px !important; color: #ffffff !important; background-color: #0284c7 !important; border-color: #0284c7 !important; }
.btn-request-doctor.selected { background-color: #0369a1 !important; border-color: #0369a1 !important; }

.btn-request-gizi { font-size: 11px !important; letter-spacing: 0.5px !important; min-width: 82px !important; border-radius: 50px !important; color: #ffffff !important; background-color: #10b981 !important; border-color: #10b981 !important; }
.btn-request-gizi.selected { background-color: #059669 !important; border-color: #059669 !important; }

.card-gizi-item { border-radius: 16px !important; border: 1px solid #e2e8f0 !important; background-color: #ffffff !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important; height: auto !important; align-self: flex-start !important; }
.card-gizi-item.selected { border: 2px solid #10b981 !important; background-color: #f0fdf4 !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.14) !important; }

.icon-box-36-emerald { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; background-color: #ecfdf5 !important; color: #059669 !important; margin-right: 12px !important; flex-shrink: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

.box-balasan-gizi { background-color: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; border-left: 5px solid #10b981 !important; border-radius: 16px !important; }
.box-live-chat-banner-gizi { border-radius: 18px !important; background-color: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; }
.bg-emerald-50 { background-color: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; }

.modal-header-gradient-emerald { background: linear-gradient(135deg, #059669, #10b981) !important; color: #ffffff !important; }
.modal-gizi-icon { width: 38px !important; height: 38px !important; background: rgba(255,255,255,0.2) !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.pgs-modal-icon-circle-emerald { background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important; color: #ffffff !important; }

.btn-submit-chat { font-size: 13px !important; background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; border: none !important; color: #ffffff !important; }
.btn-submit-chat:disabled { background: #94a3b8 !important; border: none !important; cursor: not-allowed !important; color: #ffffff !important; opacity: 1 !important; }

.btn-submit-chat-gizi { font-size: 13px !important; background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important; border: none !important; color: #ffffff !important; }
.btn-submit-chat-gizi:disabled { background: #94a3b8 !important; border: none !important; cursor: not-allowed !important; color: #ffffff !important; opacity: 1 !important; }

.badge-solid-theme { background-color: #0284c7 !important; color: #ffffff !important; }
.badge-solid-emerald { background-color: #059669 !important; color: #ffffff !important; font-size: 12px !important; }

/* Konsultasi Live Chat Room Styles */
@keyframes typingDotBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-5.5px); opacity: 1; }
}
.typing-dots-wrapper { display: inline-flex !important; align-items: center !important; gap: 3.5px !important; margin: 0 4px !important; vertical-align: middle !important; }
.typing-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background-color: #0284c7 !important; display: inline-block !important; animation: typingDotBounce 1.4s infinite ease-in-out both !important; animation-delay: 0s !important; }
.typing-dot-2 { animation-delay: 0.2s !important; }
.typing-dot-3 { animation-delay: 0.4s !important; }
.typing-dot-sm { width: 5px !important; height: 5px !important; }
.typing-dot-sky { background-color: #8FD9FB !important; }
.typing-dot-cyan { background-color: #00bcd4 !important; }
.room-container-fixed { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: flex !important; flex-direction: column !important; background-color: #f1f5f9 !important; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; z-index: 1040 !important; overflow: hidden !important; }
.chat-header-default { min-height: 66px !important; z-index: 30 !important; }
.btn-chat-back-default { width: 38px !important; height: 38px !important; min-width: 38px !important; cursor: pointer !important; }
.chat-avatar-default { width: 46px !important; height: 46px !important; object-fit: cover !important; border: 2px solid #0284c7 !important; }
.chat-status-beacon { width: 13px !important; height: 13px !important; bottom: 1px !important; right: 1px !important; border-color: #ffffff !important; border-width: 2px !important; }
.chat-beacon-active { background-color: #10b981 !important; }
.chat-user-info-pgs { max-width: calc(100vw - 210px); }
.chat-user-info-default { max-width: calc(100vw - 230px); }
@media (max-width: 767.98px) {
    .chat-user-info-pgs,
    .chat-user-info-default {
        max-width: none !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}
.letter-spacing-neg-02 { letter-spacing: -0.2px !important; }
.badge-role-pgs { font-size: 10.5px !important; padding: 3px 8px !important; background: rgba(255,255,255,0.22) !important; color: #ffffff !important; backdrop-filter: blur(4px) !important; }
.badge-role-default { font-size: 10.5px !important; padding: 3px 8px !important; }
.chat-subtitle-pgs { color: rgba(255,255,255,0.85) !important; }
.chat-subtitle-default { color: #64748b !important; }
.font-monospace { font-family: monospace !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.banner-payment-warning { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important; z-index: 20 !important; }
.icon-box-38 { width: 38px !important; height: 38px !important; min-width: 38px !important; }
.fs-17 { font-size: 17px !important; }
.chat-main-body { flex: 1 1 auto !important; overflow-y: auto !important; padding: 16px !important; background-color: #f8fafc !important; background-image: radial-gradient(#e2e8f0 1px, transparent 1px) !important; background-size: 20px 20px !important; -webkit-overflow-scrolling: touch !important; }
.chat-content-maxw { max-width: 780px !important; margin: 0 auto !important; }
.chat-summary-card { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; }
.dot-indicator-9 { width: 9px !important; height: 9px !important; display: inline-block !important; }
.letter-spacing-03 { letter-spacing: 0.3px !important; }
.ws-pre-wrap { white-space: pre-wrap !important; }
.img-attachment-box { max-width: 180px !important; }
.img-attachment-thumb { width: 100% !important; height: 110px !important; object-fit: cover !important; }
.img-attachment-overlay { bottom: 0 !important; background: rgba(0,0,0,0.6) !important; }
.max-w-500 { max-width: 500px !important; }
.chat-system-message { background-color: #f1f5f9 !important; white-space: normal !important; max-width: 85% !important; line-height: 1.5 !important; }
.avatar-chat-32 { width: 32px !important; height: 32px !important; object-fit: cover !important; border: 1px solid #cbd5e1 !important; }
.chat-bubble { max-width: 82% !important; padding: 11px 16px !important; }
.chat-bubble-me-default { border-radius: 20px 20px 4px 20px !important; background: #0284c7 !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important; }
.chat-bubble-me-pgs { border-radius: 20px 20px 4px 20px !important; background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important; }
.chat-bubble-other { border-radius: 20px 20px 20px 4px !important; background: #ffffff !important; color: #0f172a !important; border: 1.5px solid #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; }
.border-translucent-white { border-color: rgba(255,255,255,0.2) !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.chat-bubble-img { width: 100% !important; max-height: 240px !important; object-fit: cover !important; }
.chat-bubble-text { white-space: pre-wrap !important; word-break: break-word !important; line-height: 1.55 !important; user-select: text !important; }
.chat-meta-me { color: #e0f2fe !important; }
.chat-meta-other { color: #94a3b8 !important; }
.chat-typing-bubble-me { background-color: #f0f9ff !important; border: 1px solid #bae6fd !important; color: #0369a1 !important; }
.z-index-25 { z-index: 25 !important; }
.z-index-30 { z-index: 30 !important; }
.box-48 { width: 48px !important; height: 48px !important; min-width: 48px !important; }
.box-32 { width: 32px !important; height: 32px !important; }
.max-w-240 { max-width: 240px !important; }
.max-w-820 { max-width: 820px !important; }
.fs-10 { font-size: 10px !important; }
.btn-chat-attach { width: 42px !important; height: 42px !important; background-color: #ffffff !important; border-color: #cbd5e1 !important; }
.input-chat-msg { font-size: 13.5px !important; height: 44px !important; box-shadow: none !important; }
.btn-chat-send { width: 44px !important; height: 44px !important; background: linear-gradient(135deg, #0284c7, #0ea5e9) !important; border: none !important; }
.btn-chat-send-disabled { opacity: 0.6 !important; }
.spinner-16 { width: 16px !important; height: 16px !important; border-width: 2px !important; }
.modal-backdrop-blur { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: rgba(15, 23, 42, 0.65) !important; backdrop-filter: blur(3px) !important; z-index: 1060 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; }
.modal-box-420 { max-width: 420px !important; width: 100% !important; border: 1px solid #e2e8f0 !important; border-radius: 26px !important; }
.modal-box-460 { max-width: 460px !important; width: 100% !important; border: 1px solid #e2e8f0 !important; border-radius: 26px !important; }
.box-52 { width: 52px !important; height: 52px !important; border-radius: 50% !important; }
.rounded-18 { border-radius: 18px !important; }
.mx-2px { margin-left: 2px !important; margin-right: 2px !important; }
.btn-star-rating { font-size: 28px !important; }
.textarea-review { font-size: 12.5px !important; resize: none !important; border-radius: 16px !important; }
.modal-enlarge-image-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: rgba(0,0,0,0.85) !important; z-index: 1070 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; cursor: zoom-out !important; }
.modal-enlarge-box { max-width: 90vw !important; max-height: 90vh !important; }
.img-enlarge-content { max-width: 100% !important; max-height: 85vh !important; object-fit: contain !important; }
.btn-enlarge-close { top: -15px !important; right: -15px !important; width: 38px !important; height: 38px !important; }

/* Line heights */
.lh-1 { line-height: 1 !important; }
.lh-1-1 { line-height: 1.1 !important; }
.lh-1-2 { line-height: 1.2 !important; }
.lh-1-3 { line-height: 1.3 !important; }
.lh-1-4 { line-height: 1.4 !important; }
.lh-1-5 { line-height: 1.5 !important; }
.lh-1-6 { line-height: 1.6 !important; }

/* Modal Konsultasi */
.badge-spesialis-ginjal { font-size: 10px !important; background-color: #0284c7 !important; border-radius: 12px !important; }
.badge-diet-ginjal { font-size: 10px !important; background-color: #16a34a !important; border-radius: 12px !important; }

/* Notification Modal */
@keyframes notifFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes notifScaleUp {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.notif-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    animation: notifFadeIn 0.2s ease-out !important;
}
.notif-modal-box {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    width: 100% !important;
    max-width: 420px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    animation: notifScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.notif-header-granted {
    padding: 28px 24px 20px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    position: relative !important;
}
.notif-header-default {
    padding: 28px 24px 20px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    position: relative !important;
}
.btn-close-notif {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 14px !important;
}
.notif-circle-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}
.notif-icon-lg { font-size: 34px !important; color: #ffffff !important; }
.notif-status-box {
    background-color: #f0fdf4 !important;
    border-radius: 14px !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
    font-size: 13.5px !important;
}
.btn-notif-primary {
    font-size: 15px !important;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
    border: none !important;
}
.btn-notif-test {
    font-size: 14px !important;
    border-width: 2px !important;
}

/* Modal Reviews */
.modal-reviews-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1060 !important;
    overflow-y: auto !important;
}
.modal-reviews-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 1061 !important;
}
.modal-reviews-container {
    min-height: 100% !important;
    position: relative !important;
    z-index: 1062 !important;
}
.modal-reviews-card {
    max-width: 520px !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border-radius: 26px !important;
}
.modal-reviews-header {
    border-top-left-radius: 26px !important;
    border-top-right-radius: 26px !important;
}
.modal-title-wrap {
    max-width: calc(100% - 45px) !important;
}
.btn-modal-close-circle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 14px !important;
    border-radius: 50% !important;
}
.rating-overview-card {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 18px !important;
}
.rating-score-amber {
    font-size: 32px !important;
    color: #b45309 !important;
    line-height: 1 !important;
}
.badge-verified-amber {
    font-size: 11px !important;
    background-color: #fef3c7 !important;
    border: 1px solid #fcd34d !important;
    border-radius: 50px !important;
}
.star-amber { color: #f59e0b !important; }
.star-slate { color: #cbd5e1 !important; }
.star-gray { color: #e2e8f0 !important; }
.star-icon-sm { font-size: 14px !important; }
.star-icon-xs { font-size: 11px !important; }
.reviews-body-scroll {
    flex: 1 1 auto !important;
    max-height: 48vh !important;
    background-color: #ffffff !important;
}
.review-item-card {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
}
.modal-reviews-footer {
    border-bottom-left-radius: 26px !important;
    border-bottom-right-radius: 26px !important;
}
.btn-pagination-pill {
    font-size: 11.5px !important;
}
.btn-prev-pill {
    border-radius: 50px 0 0 50px !important;
}
.btn-next-pill {
    border-radius: 0 50px 50px 0 !important;
}

/* Clean Pagination Buttons (PGS Theme) */
.dataTables_paginate .page-link,
.pagination .page-link {
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
    padding: 6px 11px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    transition: all 0.2s ease !important;
}

.dataTables_paginate .page-link:hover,
.pagination .page-link:hover {
    color: #0284c7 !important;
    background-color: #f0f9ff !important;
    border-color: #bae6fd !important;
}

.dataTables_paginate .page-item.active .page-link,
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.32) !important;
}

.dataTables_paginate .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link {
    opacity: 0.45 !important;
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

/* File Upload Dropzone */
.dropzone-container {
    border: 2px dashed #cbd5e1 !important;
    background-color: #f8fafc !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}
.dropzone-container.dragging {
    border-color: #0284c7 !important;
    background-color: #eff6ff !important;
}
.dropzone-container.disabled {
    cursor: not-allowed !important;
}
.dropzone-icon-box {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    transition: all 0.25s ease !important;
}
.dropzone-icon-box.compact {
    width: 46px !important;
    height: 46px !important;
}
.dropzone-container.dragging .dropzone-icon-box {
    background-color: #dbeafe !important;
    transform: scale(1.1) !important;
}
.dropzone-preview-thumb {
    width: 54px !important;
    height: 54px !important;
    object-fit: cover !important;
}
.dropzone-badge-check {
    bottom: -4px !important;
    right: -4px !important;
    width: 18px !important;
    height: 18px !important;
    padding: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dropzone-file-icon-box {
    width: 54px !important;
    height: 54px !important;
    border-radius: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.dropzone-file-icon-pdf {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}
.dropzone-file-icon-other {
    background-color: #f1f5f9 !important;
    color: #0284c7 !important;
}
.dropzone-preview-img-full {
    max-height: 220px !important;
    object-fit: contain !important;
}
.max-w-80pct {
    max-width: 80% !important;
}

/* Modal Demo Payment QRIS */
.modal-qris-backdrop {
    background-color: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 1060 !important;
    overflow-y: auto !important;
}
.modal-qris-dialog {
    max-width: 480px !important;
    margin: 1.75rem auto !important;
}
.modal-qris-content {
    background-color: #ffffff !important;
    border-radius: 26px !important;
}
.modal-qris-header {
    border-top-left-radius: 26px !important;
    border-top-right-radius: 26px !important;
}
.icon-circle-40-emerald {
    width: 40px !important;
    height: 40px !important;
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    border-radius: 50% !important;
}
.btn-close-qris {
    outline: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
}
.tab-pill-container {
    background-color: #f1f5f9 !important;
    border-radius: 50px !important;
}
.btn-tab-pill {
    font-size: 11.5px !important;
    border: none !important;
    border-radius: 50px !important;
}
.badge-qris-tab {
    font-size: 9px !important;
    padding: 2px 5px !important;
}
.qris-card-box {
    max-width: 340px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    border-radius: 20px !important;
}
.qris-red-banner {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
}
.qris-badge-tag {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}
.qris-title-tag {
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
}
.qris-merchant-bg {
    background-color: #fafafa !important;
}
.qris-merchant-name {
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
}
.qris-qr-frame {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    width: 210px !important;
    height: 210px !important;
}
.qris-watermark {
    width: 38px !important;
    height: 38px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-color: #e2e8f0 !important;
}
.va-bank-btn {
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 12px !important;
}
.va-bank-bca {
    border-color: #005baa !important;
    background-color: #005baa !important;
    color: #ffffff !important;
}
.va-bank-mandiri {
    border-color: #003d79 !important;
    background-color: #003d79 !important;
    color: #ffffff !important;
}
.va-bank-bri {
    border-color: #00529c !important;
    background-color: #00529c !important;
    color: #ffffff !important;
}
.va-bank-bni {
    border-color: #f15a24 !important;
    background-color: #f15a24 !important;
    color: #ffffff !important;
}
.va-bank-inactive {
    border-color: #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #334155 !important;
}
.va-number-text {
    font-size: 18px !important;
    letter-spacing: 1px !important;
    font-family: monospace !important;
}
.card-total-box {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
.alert-demo-sandbox {
    font-size: 11.5px !important;
    background-color: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #0369a1 !important;
}
.btn-simulate-pay {
    font-size: 12.5px !important;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border: none !important;
}
.btn-simulate-disabled {
    cursor: not-allowed !important;
}
.img-qr-code {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* PWA Install Prompt */
@keyframes pwaSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 25px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
.pwa-prompt-container {
    position: fixed !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 460px !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 18px 20px !important;
    animation: pwaSlideUp 0.35s ease-out forwards !important;
}
.pwa-prompt-container-ios {
    max-width: 440px !important;
    padding: 20px !important;
}
.pwa-logo-thumb {
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    flex-shrink: 0 !important;
    margin-right: 14px !important;
    border: 1px solid #edf2f7 !important;
}
.pwa-logo-thumb-ios {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    border: 1px solid #edf2f7 !important;
}
.btn-pwa-install {
    font-size: 13px !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: none !important;
}
.pwa-ios-guide-box {
    background: #f8fafc !important;
    border-radius: 12px !important;
    border: 1px dashed #cbd5e1 !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
}
.pwa-step-badge {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
}

/* QR Code Scanner Modal */
@keyframes scanLaser {
    0% { top: 10px; opacity: 0.8; }
    50% { top: 190px; opacity: 1; }
    100% { top: 10px; opacity: 0.8; }
}
.modal-scanner-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background-color: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}
.modal-scanner-card {
    width: 100% !important;
    max-width: 460px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}
.modal-scanner-header {
    background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
}
.scanner-icon-circle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
}
.scanner-success-circle {
    width: 80px !important;
    height: 80px !important;
    font-size: 36px !important;
    border-radius: 50% !important;
}
.scanner-badge-code {
    font-size: 14px !important;
    letter-spacing: 1px !important;
}
.scanner-camera-box {
    position: relative !important;
    width: 100% !important;
    min-height: 280px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background-color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.scanner-viewport {
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
#qr-camera-viewport video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
}
.scanner-overlay-laser {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.scanner-reticle-frame {
    width: 210px !important;
    height: 210px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    position: relative !important;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.4) !important;
}
.reticle-corner-tl {
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    width: 22px !important;
    height: 22px !important;
    border-top: 4px solid #0284c7 !important;
    border-left: 4px solid #0284c7 !important;
    border-top-left-radius: 14px !important;
}
.reticle-corner-tr {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 22px !important;
    height: 22px !important;
    border-top: 4px solid #0284c7 !important;
    border-right: 4px solid #0284c7 !important;
    border-top-right-radius: 14px !important;
}
.reticle-corner-bl {
    position: absolute !important;
    bottom: -2px !important;
    left: -2px !important;
    width: 22px !important;
    height: 22px !important;
    border-bottom: 4px solid #0284c7 !important;
    border-left: 4px solid #0284c7 !important;
    border-bottom-left-radius: 14px !important;
}
.reticle-corner-br {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 22px !important;
    height: 22px !important;
    border-bottom: 4px solid #0284c7 !important;
    border-right: 4px solid #0284c7 !important;
    border-bottom-right-radius: 14px !important;
}
.scanner-laser-line {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #ef4444, #f43f5e, transparent) !important;
    box-shadow: 0 0 10px #f43f5e !important;
    animation: scanLaser 2.2s ease-in-out infinite !important;
}
.scanner-error-box {
    z-index: 5 !important;
    max-width: 340px !important;
}
.scanner-loading-box {
    z-index: 5 !important;
}

/* ==============================================================================
   22. SHARED DATATABLE, EDUKASI & MODAL DETAIL UTILITIES (PGS Theme)
   ============================================================================== */
.w-35pct { width: 35% !important; }
.w-25pct { width: 25% !important; }
.w-15pct { width: 15% !important; }
.w-32px { width: 32px !important; }
.h-32px { height: 32px !important; }
.h-36px { height: 36px !important; }
.w-50px { width: 50px !important; }
.w-60px { width: 60px !important; }
.w-80px { width: 80px !important; }
.w-100px { width: 100px !important; }
.w-120px { width: 120px !important; }
.w-130px { width: 130px !important; }
.w-140px { width: 140px !important; }
.w-150px { width: 150px !important; }
.w-160px { width: 160px !important; }
.w-180px { width: 180px !important; }
.w-200px { width: 200px !important; }

.opacity-60 { opacity: 0.6 !important; }
.transition-bg { transition: background-color 0.2s ease !important; }
.transition-all { transition: all 0.15s ease !important; }
.letter-spacing-tight { letter-spacing: -0.2px !important; }

/* Edukasi Header & Brand */
.brand-subtext {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}
.brand-title-teal {
    font-size: 15px !important;
    color: #0d9488 !important;
    font-weight: 800 !important;
}
.avatar-32-cover {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover !important;
}

/* Edukasi Sidebar */
.sidebar-search-input {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    font-size: 14px !important;
}
.sidebar-search-btn {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}
.thumb-post-sm {
    width: 64px !important;
    height: 54px !important;
    object-fit: cover !important;
}
.card-sidebar-banner {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}
.banner-img-frame {
    height: 140px !important;
    overflow: hidden !important;
}
.banner-img-cover {
    object-fit: cover !important;
    opacity: 0.85 !important;
}

/* DataTable Component */
.dt-length-select {
    width: 72px !important;
    border-radius: 6px !important;
}
.dt-search-group {
    width: 260px !important;
}
.dt-search-input {
    padding-left: 14px !important;
    height: 34px !important;
}
.dt-table-content {
    min-width: 700px !important;
    width: 100% !important;
    margin: 0 !important;
}
.dataTable th {
    white-space: nowrap !important;
    user-select: none !important;
}
.dataTable th.sorting,
.dataTable th.sorting_asc,
.dataTable th.sorting_desc {
    cursor: pointer !important;
}
.dt-sort-icon {
    opacity: 0.35 !important;
    font-size: 11px !important;
}
.dt-sort-icon.active {
    opacity: 1 !important;
}
.dt-paginate-btn {
    min-width: 34px !important;
    height: 32px !important;
    text-align: center !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.paginate_button.disabled .dt-paginate-btn {
    cursor: not-allowed !important;
}

/* Modal Detail Pasien */
.modal-detail-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1060 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}
.modal-detail-card {
    width: 100% !important;
    max-width: 840px !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
.modal-detail-header {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}
.btn-close-modal-detail {
    top: 16px !important;
    right: 16px !important;
    background: rgba(255,255,255,0.2) !important;
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.avatar-modal-pasien {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border: 3px solid rgba(255,255,255,0.85) !important;
}
.badge-rm-pill {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
    font-size: 11.5px !important;
}
.btn-tab-modal-pasien {
    font-size: 13px !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
}
.btn-tab-modal-pasien.active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4) !important;
}
.btn-tab-modal-pasien i {
    color: #0284c7 !important;
}
.btn-tab-modal-pasien.active i {
    color: #ffffff !important;
}
.btn-tab-modal-pasien .tab-badge-count {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    padding: 2px 7px !important;
}
.btn-tab-modal-pasien.active .tab-badge-count {
    background-color: #ffffff !important;
    color: #0284c7 !important;
}
.modal-detail-body-scroll {
    max-height: calc(92vh - 200px) !important;
}
.lab-header-accordion {
    background-color: #f8fafc !important;
    cursor: pointer !important;
}
.icon-circle-40-blue {
    width: 40px !important;
    height: 40px !important;
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.icon-circle-24-blue {
    width: 24px !important;
    height: 24px !important;
    background-color: #0284c7 !important;
    color: #fff !important;
    font-size: 11px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.card-ai-interpretation {
    background-color: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
}

/* Rich Lab Summary */
.rich-lab-summary {
    font-size: 13.5px;
    line-height: 1.65;
    color: #1e293b;
}
.rich-lab-summary h5 {
    font-size: 13.5px;
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 6px;
    color: #0369a1;
    display: flex;
    align-items: center;
}
.rich-lab-summary h5:first-child {
    margin-top: 0;
}
.rich-lab-summary ul, .rich-lab-summary ol {
    padding-left: 20px;
    margin-bottom: 8px;
}
.rich-lab-summary li {
    margin-bottom: 4px;
    color: #334155;
}
.rich-lab-summary p {
    margin-bottom: 6px;
    color: #334155;
}
.rich-lab-summary strong {
    color: #0f172a;
    font-weight: 700;
}

/* ==============================================================================
   23. FRONT-END COMMON UTILITIES (Produk, Keluarga, Edukasi, Auth, Docs)
   ============================================================================== */
.btn-back-pill {
    font-size: 12px !important;
    padding: 6px 14px !important;
}
.gap-6px { gap: 6px !important; }
.gap-8px { gap: 8px !important; }
.gap-10px { gap: 10px !important; }
.gap-12px { gap: 12px !important; }
.fs-9 { font-size: 9px !important; }
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-14-5 { font-size: 14.5px !important; }
.fs-15 { font-size: 15px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-30 { font-size: 30px !important; }
.mt-n2px { margin-top: -2px !important; }
.letter-spacing-1 { letter-spacing: 1px !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-90 { opacity: 0.9 !important; }
.z-100 { z-index: 100 !important; }
.z-1030 { z-index: 1030 !important; }
.z-1060 { z-index: 1060 !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-900 { max-width: 900px !important; }
.w-40px { width: 40px !important; }
.h-40px { height: 40px !important; }
.w-55px { width: 55px !important; }
.h-55px { height: 55px !important; }
.w-64px { width: 64px !important; }
.h-64px { height: 64px !important; }
.scroll-y-320 { max-height: 320px !important; overflow-y: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }

/* Produk */
.img-produk-header {
    width: 100% !important;
    max-height: 240px !important;
    object-fit: contain !important;
}
.card-paket-harga {
    border-radius: 18px !important;
    border: 1px solid #edf2f7;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card-paket-harga.is-terlaris {
    border: 2px solid #0284c7 !important;
}
.card-cta-purple {
    background: linear-gradient(135deg, #6f42c1, #8e44ad) !important;
    border-radius: 20px !important;
}

/* Keluarga Section */
.banner-keluarga-hero {
    border-radius: 20px !important;
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #6366f1 100%) !important;
    color: #ffffff !important;
}
.banner-keluarga-header {
    border-radius: 20px !important;
    background: linear-gradient(135deg, #4338ca, #6366f1) !important;
    color: #ffffff !important;
}
.bg-white-20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
.text-indigo-900 {
    color: #3730a3 !important;
}
.text-indigo-700 {
    color: #4338ca !important;
}
.bg-indigo-700 {
    background-color: #4338ca !important;
}
.btn-gradient-indigo {
    background: linear-gradient(135deg, #4338ca, #6366f1) !important;
    border: none !important;
    color: #ffffff !important;
}
.avatar-keluarga-link {
    width: 55px !important;
    height: 55px !important;
    background-color: #e0e7ff !important;
    color: #4338ca !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.icon-circle-42-emerald {
    width: 42px !important;
    height: 42px !important;
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    font-size: 18px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.icon-circle-46-indigo {
    width: 46px !important;
    height: 46px !important;
    background: linear-gradient(135deg, #4338ca, #6366f1) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.card-header-indigo-top {
    background: linear-gradient(135deg, #4338ca, #6366f1) !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    color: #ffffff !important;
}
.alert-emerald-custom {
    border-radius: 14px !important;
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
}
.btn-scan-qr-banner {
    border-radius: 16px !important;
    border: 2px dashed #6366f1 !important;
    background-color: #f5f7ff !important;
}
.btn-addon-indigo {
    border-radius: 0 12px 12px 0 !important;
    background: linear-gradient(135deg, #4338ca, #6366f1) !important;
    border: none !important;
    color: #ffffff !important;
}
.modal-header-gradient-indigo {
    background: linear-gradient(135deg, #4338ca, #6366f1) !important;
    color: #ffffff !important;
}

/* Notifikasi Icons */
.icon-notif-base {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}
.icon-notif-terlewat {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}
.icon-notif-sudah {
    background-color: #d1fae5 !important;
    color: #059669 !important;
}
.icon-notif-obat {
    background-color: #e0e7ff !important;
    color: #4338ca !important;
}
.icon-notif-kontrol {
    background-color: #cffafe !important;
    color: #0891b2 !important;
}
.icon-notif-hd {
    background-color: #f3e8ff !important;
    color: #7c3aed !important;
}
.icon-notif-default {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}
.border-left-indigo-5 {
    border-left: 5px solid #4338ca !important;
}

/* Layout Keluarga */
.bg-keluarga-layout {
    background: #f8fafc !important;
    min-height: 100vh !important;
    padding-bottom: 90px !important;
}
.header-keluarga-sticky {
    background: #ffffff !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}
.avatar-44-cover {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.logo-keluarga-title {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    color: #4338ca !important;
}
.logo-keluarga-subtitle {
    color: #6366f1 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
.btn-bell-keluarga {
    width: 40px !important;
    height: 40px !important;
    color: #4338ca !important;
}
.badge-notif-pulse {
    top: -4px !important;
    right: -4px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    padding: 0 !important;
    background-color: #ef4444 !important;
    animation: pulse 1.8s infinite !important;
}
.dropdown-header-indigo {
    background: linear-gradient(135deg, #4338ca, #6366f1) !important;
}
.nav-item-keluarga {
    color: #6b7280 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
.nav-item-keluarga.active {
    color: #4338ca !important;
    font-weight: 700 !important;
}
.nav-icon-bottom {
    font-size: 18px !important;
    margin-bottom: 3px !important;
}
.badge-bottom-nav-counter {
    top: -6px !important;
    right: -8px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    padding: 0 !important;
    background-color: #ef4444 !important;
}
/* ==============================================================================
   24. FRONT-END UTILITIES: EDUKASI, KOMUNITAS, AUTH, DOCS & SYSTEM
   ============================================================================== */
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }

/* Font sizes */
.fs-9 { font-size: 9px !important; }
.fs-10 { font-size: 10px !important; }
.fs-10-5 { font-size: 10.5px !important; }
.fs-11 { font-size: 11px !important; }
.fs-11-5 { font-size: 11.5px !important; }
.fs-12 { font-size: 12px !important; }
.fs-12-5 { font-size: 12.5px !important; }
.fs-13 { font-size: 13px !important; }
.fs-13-5 { font-size: 13.5px !important; }
.fs-14 { font-size: 14px !important; }
.fs-14-5 { font-size: 14.5px !important; }
.fs-15 { font-size: 15px !important; }
.fs-15-5 { font-size: 15.5px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-26 { font-size: 26px !important; }
.fs-28 { font-size: 28px !important; }
.fs-32 { font-size: 32px !important; }
.fs-38 { font-size: 38px !important; }
.fs-54 { font-size: 54px !important; }
.fs-64 { font-size: 64px !important; }

/* Line heights */
.lh-1 { line-height: 1 !important; }
.lh-1-2 { line-height: 1.2 !important; }
.lh-1-3 { line-height: 1.3 !important; }
.lh-1-35 { line-height: 1.35 !important; }
.lh-1-4 { line-height: 1.4 !important; }
.lh-1-5 { line-height: 1.5 !important; }
.lh-1-55 { line-height: 1.55 !important; }
.lh-1-6 { line-height: 1.6 !important; }
.lh-1-65 { line-height: 1.65 !important; }
.lh-1-7 { line-height: 1.7 !important; }
.lh-1-8 { line-height: 1.8 !important; }
.lh-1-85 { line-height: 1.85 !important; }
.lh-1-9 { line-height: 1.9 !important; }
.lh-2-1 { line-height: 2.1 !important; }
.lh-2-2 { line-height: 2.2 !important; }

/* Border radius */
.rounded-6 { border-radius: 6px !important; }
.rounded-8 { border-radius: 8px !important; }
.rounded-10 { border-radius: 10px !important; }
.rounded-12 { border-radius: 12px !important; }
.rounded-14 { border-radius: 14px !important; }
.rounded-16 { border-radius: 16px !important; }
.rounded-18 { border-radius: 18px !important; }
.rounded-20 { border-radius: 20px !important; }
.rounded-22 { border-radius: 22px !important; }
.rounded-24 { border-radius: 24px !important; }
.rounded-28 { border-radius: 28px !important; }
.rounded-l-12 { border-radius: 12px 0 0 12px !important; }
.rounded-r-12 { border-radius: 0 12px 12px 0 !important; }
.rounded-pill-l { border-radius: 50px 0 0 50px !important; }
.rounded-pill-r { border-radius: 0 50px 50px 0 !important; }

/* Gaps */
.gap-2px { gap: 2px !important; }
.gap-4px { gap: 4px !important; }
.gap-6px { gap: 6px !important; }
.gap-8px { gap: 8px !important; }
.gap-10px { gap: 10px !important; }
.gap-12px { gap: 12px !important; }
.gap-16px { gap: 16px !important; }
.gap-20px { gap: 20px !important; }

/* Dimensions */
.w-22px { width: 22px !important; }
.h-22px { height: 22px !important; }
.w-30px { width: 30px !important; }
.h-30px { height: 30px !important; }
.w-32px { width: 32px !important; }
.h-32px { height: 32px !important; }
.w-34px { width: 34px !important; }
.h-34px { height: 34px !important; }
.w-36px { width: 36px !important; }
.h-36px { height: 36px !important; }
.w-40px { width: 40px !important; }
.h-40px { height: 40px !important; }
.w-42px { width: 42px !important; }
.h-42px { height: 42px !important; }
.w-44px { width: 44px !important; }
.h-44px { height: 44px !important; }
.w-46px { width: 46px !important; }
.h-46px { height: 46px !important; }
.w-48px { width: 48px !important; }
.h-48px { height: 48px !important; }
.w-50px { width: 50px !important; }
.h-50px { height: 50px !important; }
.w-54px { width: 54px !important; }
.h-54px { height: 54px !important; }
.w-64px { width: 64px !important; }
.h-64px { height: 64px !important; }
.w-70px { width: 70px !important; }
.h-70px { height: 70px !important; }
.w-80px { width: 80px !important; }
.h-80px { height: 80px !important; }
.w-90px { width: 90px !important; }
.h-90px { height: 90px !important; }
.w-100px { width: 100px !important; }
.h-100px { height: 100px !important; }
.w-120px { width: 120px !important; }
.h-120px { height: 120px !important; }
.w-130px { width: 130px !important; }
.h-130px { height: 130px !important; }
.w-180px { width: 180px !important; }
.h-180px { height: 180px !important; }
.w-200px { width: 200px !important; }
.h-200px { height: 200px !important; }

.min-w-0 { min-width: 0 !important; }
.min-w-120 { min-width: 120px !important; }
.min-w-240 { min-width: 240px !important; }
.max-w-280 { max-width: 280px !important; }
.max-w-360 { max-width: 360px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-420 { max-width: 420px !important; }
.max-w-440 { max-width: 440px !important; }
.max-w-460 { max-width: 460px !important; }
.max-w-480 { max-width: 480px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-520 { max-width: 520px !important; }
.max-w-580 { max-width: 580px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-640 { max-width: 640px !important; }
.max-w-700 { max-width: 700px !important; }
.max-w-720 { max-width: 720px !important; }
.max-w-800 { max-width: 800px !important; }
.max-w-960 { max-width: 960px !important; }

.max-h-350 { max-height: 350px !important; }
.max-h-420 { max-height: 420px !important; }
.max-h-440 { max-height: 440px !important; }

.flex-1 { flex: 1 1 0% !important; }
.object-fit-cover { object-fit: cover !important; }
.object-fit-contain { object-fit: contain !important; }
.whitespace-pre-line { white-space: pre-line !important; }
.blend-plus-darker { mix-blend-mode: plus-darker !important; }
.blend-hard-light { mix-blend-mode: hard-light !important; }

/* Colors & backgrounds */
.bg-auth-page { min-height: 100vh; background: #edf7fb !important; position: relative; }
.bg-slate-50 { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-900 { background-color: #0f172a !important; }
.bg-sky-500 { background-color: #0ea5e9 !important; }
.bg-mint-soft { background-color: #f0fdf4 !important; }
.border-mint-soft { border-color: #bbf7d0 !important; }
.bg-warm-pending { background-color: #fff8e1 !important; color: #856404 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-800 { color: #065f46 !important; }
.text-sky-600 { color: #0284c7 !important; }
.text-sky-700 { color: #0369a1 !important; }
.text-indigo-700 { color: #4338ca !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-emerald-300 { border-color: #a7f3d0 !important; }
.border-sky-300 { border-color: #7dd3fc !important; }

/* Transitions & interactions */
.cursor-pointer { cursor: pointer !important; }
.outline-none { outline: none !important; }
.transition-all-02 { transition: all 0.2s ease !important; }
.transition-transform-02 { transition: transform 0.2s ease !important; }
.transition-transform-03 { transition: transform 0.3s ease !important; }

/* Component Specific */
.avatar-42-cover { width: 42px !important; height: 42px !important; object-fit: cover !important; }
.avatar-32-cover { width: 32px !important; height: 32px !important; object-fit: cover !important; }
.avatar-48-cover { width: 48px !important; height: 48px !important; object-fit: cover !important; }
.avatar-70-circle { width: 70px !important; height: 70px !important; object-fit: cover !important; }
.input-eye-btn { right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 15px !important; }
.input-pl-16 { padding-left: 16px !important; }
.input-pr-46 { padding-right: 46px !important; }

.auth-card-compact { max-width: 440px !important; }
.auth-card-md { max-width: 480px !important; }
.auth-card-lg { max-width: 640px !important; }

/* OAuth & Role Switchers */
.oauth-header-banner { background: linear-gradient(135deg, #00838f 0%, #00acc1 100%) !important; padding: 24px 20px !important; color: #fff !important; text-align: center !important; }
.avatar-48-circle { width: 48px !important; height: 48px !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,0.8) !important; object-fit: cover !important; }
.btn-oauth-approve { background: #00838f !important; border-color: #00838f !important; border-radius: 10px !important; }
.tab-role-pasien-active { background: linear-gradient(135deg, #00838f, #00acc1) !important; color: #fff !important; }
.tab-role-keluarga-active { background: linear-gradient(135deg, #4338ca, #6366f1) !important; color: #fff !important; }
.tab-role-pgs-active { background: linear-gradient(135deg, #0284c7, #0369a1) !important; color: #fff !important; }
.text-role-pasien { color: #00838f !important; }
.text-role-keluarga { color: #4338ca !important; }
.icon-role-check-keluarga { color: #6366f1 !important; font-size: 18px !important; flex-shrink: 0 !important; }
.divider-auth-hr { border-color: #e2e8f0 !important; margin: 14px 0 !important; }
.divider-auth-text { top: -10px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 11px !important; }
.text-shadow-auth { text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; }

.role-card { cursor: pointer !important; border-radius: 12px !important; padding: 12px 14px !important; transition: all 0.2s ease !important; }
.role-card-pasien-selected { border: 2px solid #00bcd4 !important; background: #f0fdfa !important; }
.role-card-keluarga-selected { border: 2px solid #6366f1 !important; background: #eef2ff !important; }
.role-card-unselected { border: 1px solid #e2e8f0 !important; background: #ffffff !important; }
.role-icon-box { width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-right: 12px !important; font-size: 15px !important; flex-shrink: 0 !important; }
.role-icon-pasien-active { background: #00bcd4 !important; color: #ffffff !important; }
.role-icon-keluarga-active { background: #6366f1 !important; color: #ffffff !important; }
.role-icon-inactive { background: #f1f5f9 !important; color: #64748b !important; }
.max-w-860 { max-width: 860px !important; }

/* Edukasi Hero */
.banner-hero-edukasi {
    background: linear-gradient(135deg, #0284c7 0%, #0d9488 100%) !important;
    box-shadow: 0 8px 24px -4px rgba(14, 165, 233, 0.25) !important;
}
.edukasi-glow-circle-tr {
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.edukasi-glow-circle-bl {
    bottom: -60px;
    left: 20%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.badge-edukasi-pill {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
}
.title-hero-edukasi {
    font-size: calc(1.4rem + 0.8vw) !important;
    letter-spacing: -0.02em !important;
}
.subtitle-hero-edukasi {
    font-size: 15px !important;
    opacity: 0.9 !important;
    line-height: 1.6 !important;
    max-width: 640px !important;
}
.btn-search-hero {
    background: #0f172a !important;
    font-size: 13px !important;
}
.circle-icon-hero-edukasi {
    width: 130px !important;
    height: 130px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
}
.card-edukasi-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card-edukasi-hover:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}
.edukasi-thumb-frame {
    height: 180px !important;
    overflow: hidden !important;
    background-color: #f1f5f9 !important;
}
.edukasi-thumb-img {
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}
.badge-category-floating {
    top: 12px !important;
    left: 12px !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(4px) !important;
}

/* Edukasi Detail */
.toc-container {
    background: #f8fafc !important;
    border-left: 4px solid #0ea5e9 !important;
}
.toc-icon-box {
    width: 30px !important;
    height: 30px !important;
    background: #0ea5e9 !important;
    border-radius: 50% !important;
}
.toc-heading-title {
    font-size: 15px !important;
    letter-spacing: -0.01em !important;
}
.toc-list {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
}
.badge-kategori-detail {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
}
.title-article-detail {
    font-size: calc(1.4rem + 1vw) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
}
.icon-circle-36-teal {
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(135deg, #00bcd4 0%, #00897b 100%) !important;
    font-size: 14px !important;
    border-radius: 50% !important;
}
.card-cover-frame {
    background-color: #f8fafc !important;
    max-height: 440px !important;
}
.card-cover-img {
    width: 100% !important;
    max-height: 440px !important;
    object-fit: cover !important;
    display: block !important;
}
.card-tldr-box {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%) !important;
    border-left: 5px solid #0d9488 !important;
    border-color: #99f6e4 !important;
    box-shadow: 0 4px 14px rgba(13,148,136,0.06) !important;
}
.badge-tldr {
    font-size: 11px !important;
    background: #0d9488 !important;
    border-radius: 50px !important;
}
.article-body-content {
    line-height: 1.85 !important;
    font-size: 16.5px !important;
    color: #1e293b !important;
    letter-spacing: 0.01em !important;
}
.icon-circle-34-sky {
    width: 34px !important;
    height: 34px !important;
    background: #0ea5e9 !important;
    border-radius: 50% !important;
}
.faq-item-border-open {
    border-color: #38bdf8 !important;
}
.faq-item-border-closed {
    border-color: #e2e8f0 !important;
}
.box-eeat-author {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
.icon-circle-54-sky {
    width: 54px !important;
    height: 54px !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #0d9488 100%) !important;
    font-size: 22px !important;
    border-radius: 50% !important;
}
.badge-verified-medis {
    font-size: 11px !important;
    font-weight: 650 !important;
    color: #065f46 !important;
    background-color: #d1fae5 !important;
    border: 1px solid #a7f3d0 !important;
    padding: 3px 10px !important;
    border-radius: 50px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
}
.btn-consult-floating {
    background: #1d4ed8 !important;
    font-size: 13px !important;
}

/* Komunitas */
.banner-komunitas-hero {
    border-radius: 18px !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%) !important;
    color: #ffffff !important;
}
.banner-komunitas-desktop {
    display: block !important;
}
.banner-komunitas-mobile {
    display: none !important;
}
@media (max-width: 767.98px) {
    .banner-komunitas-desktop {
        display: none !important;
    }
    .banner-komunitas-mobile {
        display: block !important;
    }
}
.icon-circle-90-glass {
    width: 90px !important;
    height: 90px !important;
    background: rgba(255,255,255,0.15) !important;
    border: 3px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
}
.icon-circle-42-glass {
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
}
.category-scroll-chips {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.category-chip-btn {
    font-size: 12px !important;
    padding: 6px 14px !important;
}
.select-category-post {
    height: 24px !important;
    font-size: 11.5px !important;
    border-radius: 12px !important;
    width: auto !important;
    cursor: pointer !important;
}
.textarea-post {
    border-radius: 14px !important;
    font-size: 14px !important;
}
.banner-pending-review {
    background-color: #fff8e1 !important;
    color: #856404 !important;
    font-size: 11.5px !important;
}
.post-img-attach {
    max-height: 420px !important;
    object-fit: contain !important;
    width: 100% !important;
}
.btn-share-post {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border: none !important;
}

/* Docs / Smart FHIR */
.smart-fhir-page {
    background: #f8fafc !important;
    min-height: 100vh !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #1e293b !important;
}
.smart-fhir-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.smart-fhir-logo {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #e2e8f0 !important;
}
.smart-fhir-brand-title {
    margin: 0 !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #0f172a !important;
}
.smart-fhir-badge-env {
    font-size: 11px !important;
    border-radius: 6px !important;
    letter-spacing: 0.06em !important;
    background: #0284c7 !important;
}
.smart-fhir-hero {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%) !important;
    border-radius: 20px !important;
    padding: 32px 36px !important;
    color: #ffffff !important;
    margin-bottom: 28px !important;
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.3) !important;
}
.smart-fhir-hero-badge {
    border-radius: 20px !important;
    font-size: 11px !important;
    color: #0369a1 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.smart-fhir-hero-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    display: inline-block !important;
    text-align: left !important;
}
.smart-fhir-tab-btn {
    border-radius: 12px !important;
    font-size: 13px !important;
    transition: all 0.15s ease-in-out !important;
}
.smart-fhir-pre-code {
    overflow-x: auto !important;
    border-radius: 10px !important;
}
.smart-fhir-footer {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 28px 0 !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}
.hero-docs-fhir {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
    color: #ffffff !important;
}
.unlock-page-wrapper {
    min-height: 100vh !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.unlock-card {
    max-width: 460px !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
}
.unlock-header-gradient {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    padding: 36px 28px 28px !important;
    text-align: center !important;
    color: #ffffff !important;
    position: relative !important;
}
.unlock-avatar-box {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto 16px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    background: #ffffff !important;
}
.unlock-badge-pill {
    display: inline-block !important;
    padding: 4px 12px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
}
.unlock-body {
    padding: 32px 28px !important;
}
.input-passcode {
    border-radius: 0 12px 12px 0 !important;
    font-size: 14px !important;
    font-family: monospace !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
}
.btn-unlock-submit {
    border-radius: 12px !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: none !important;
    font-size: 14px !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}
.btn-postman {
    border-radius: 12px !important;
    background: #ff6c37 !important;
    border-color: #ff6c37 !important;
}
.footer-docs {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

/* ==============================================================================
   13. PGS PRODUCT CATALOG (LISTING) STYLES
   ============================================================================== */
.pgs-product-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
    max-width: 340px;
    width: 100%;
}

.pgs-search-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
}

.pgs-product-search-input {
    width: 100%;
    padding: 10px 38px 10px 40px;
    font-size: 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    background: #ffffff;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
}

.pgs-product-search-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.pgs-search-clear-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #94a3b8;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pgs-search-clear-btn:hover {
    color: #475569;
}

.pgs-product-catalog-hero {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-radius: 24px;
    padding: 24px 28px;
    box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.25);
}

.pgs-catalog-hero-content {
    max-width: 680px;
}

.pgs-product-catalog-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border: 1.5px solid #e2e8f0 !important;
}

.pgs-product-catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -4px rgba(2, 132, 199, 0.16) !important;
    border-color: #bae6fd !important;
}

.pgs-product-catalog-card:hover .pgs-product-catalog-img {
    transform: scale(1.04);
}

.pgs-product-card-img-wrap {
    background-color: #f8fafc;
    position: relative;
    border-radius: 22px 22px 0 0;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pgs-product-card-badge-row {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.pgs-product-catalog-img {
    max-height: 145px;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.pgs-product-title-hover {
    transition: color 0.2s ease;
}

.pgs-product-title-hover:hover {
    color: #0284c7 !important;
}

.pgs-product-detail-btn {
    transition: all 0.25s ease;
}

.pgs-product-detail-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.pgs-empty-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.max-w-600 {
    max-width: 600px;
}

/* ==========================================================
   REALTIME ONLINE INDICATOR FOR KOMUNITAS
========================================================== */
.badge-komunitas-online {
    background: rgba(16, 185, 129, 0.22) !important;
    border: 1px solid rgba(52, 211, 153, 0.5) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 12px !important;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.online-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #34d399;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: pulse-green 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

/* ==========================================================
   SWEETALERT2 MODERN PGS THEME (1:1 with PGS Design Language)
========================================================== */
.swal2-container {
    z-index: 99999 !important;
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.swal2-popup {
    font-family: 'Poppins', 'Inter', -apple-system, sans-serif !important;
    border-radius: 26px !important;
    padding: 28px 24px !important;
    background: #ffffff !important;
    box-shadow: 0 25px 60px -12px rgba(2, 132, 199, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    max-width: 440px !important;
}

.swal2-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

.swal2-html-container {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin: 8px 10px 18px 10px !important;
    padding: 0 !important;
}

.swal2-icon {
    width: 68px !important;
    height: 68px !important;
    margin: 10px auto 4px auto !important;
    border-width: 3px !important;
    transform: scale(0.95);
}

.swal2-icon.swal2-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.swal2-icon.swal2-error {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #ef4444 !important;
}

.swal2-icon.swal2-warning {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

.swal2-icon.swal2-info {
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

.swal2-icon.swal2-question {
    border-color: #8b5cf6 !important;
    color: #8b5cf6 !important;
}

.swal2-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
    width: 100% !important;
    padding: 0 !important;
}

.swal2-confirm {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.32) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.swal2-confirm:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.42) !important;
}

.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.35) !important;
}

.swal2-cancel {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 22px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.swal2-cancel:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

.swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.3) !important;
}

.swal2-deny {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 22px !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
    transition: all 0.2s ease !important;
}

.swal2-deny:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.42) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    border-radius: 14px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 13.5px !important;
    font-family: 'Poppins', sans-serif !important;
    box-shadow: none !important;
    color: #1e293b !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
    outline: none !important;
}

.swal2-close {
    font-family: monospace !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
}

.swal2-close:hover {
    color: #ef4444 !important;
    background: #fee2e2 !important;
}

.swal2-timer-progress-bar {
    background: #0284c7 !important;
}

@media (max-width: 480px) {
    .swal2-popup {
        width: 92% !important;
        padding: 24px 18px !important;
        border-radius: 22px !important;
    }
    .swal2-actions {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    .swal2-actions button {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ========================================================
   KOMUNITAS ONLINE PRESENCE BADGE & PULSE
   ======================================================== */
.online-pulse-dot {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    background-color: #10b981 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    position: relative !important;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.7) !important;
    animation: pgs-online-pulse 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
    vertical-align: middle !important;
}

@keyframes pgs-online-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.badge-komunitas-online {
    background: #ffffff !important;
    color: #065f46 !important;
    border: 1.5px solid #10b981 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important;
    transition: all 0.2s ease;
}

.banner-komunitas-hero .badge-komunitas-online {
    background: #ffffff !important;
    color: #047857 !important;
    border: 1.5px solid #34d399 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.badge-komunitas-online-subtle {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

/* Komunitas Modern Post Feed Action Bar & Comments */
.btn-komunitas-like,
.btn-komunitas-comment {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    letter-spacing: -0.2px !important;
}

.btn-komunitas-like {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    padding: 0 !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    background: transparent !important;
    color: #64748b !important;
    transition: color 0.15s ease !important;
    user-select: none !important;
}
.btn-komunitas-like:hover {
    color: #ef4444 !important;
    background: transparent !important;
}
.btn-komunitas-like.active {
    color: #ef4444 !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.btn-komunitas-comment {
    color: #64748b !important;
    background: transparent !important;
}
.btn-komunitas-comment:hover {
    color: #0284c7 !important;
    background: #f0f9ff !important;
}
.btn-komunitas-comment.active {
    color: #0284c7 !important;
    background: #e0f2fe !important;
    font-weight: 700 !important;
}

.comment-bubble-pgs {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 8px 14px !important;
    display: inline-block !important;
    max-width: 100% !important;
    word-break: break-word !important;
}

.comment-input-wrap-pgs {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    padding: 3px 6px 3px 14px !important;
    transition: all 0.2s ease !important;
}
.comment-input-wrap-pgs:focus-within {
    background: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18) !important;
}

/* ==============================================================================
   PGS PROFILE ENHANCEMENTS - 1 ROW MOBILE STATS & ZERO-DELAY TABS
   ============================================================================== */

/* 1. Header Hero Action Buttons on Mobile: 1 Row Horizontal */
@media (max-width: 767.98px) {
    .profile-hero-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .profile-hero-actions .btn {
        flex: 1 1 0px !important;
        padding: 7px 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        margin-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* 2. 4-Metrics Health Stats Grid: 1 Row on Mobile (Same as Dashboard) */
.pgs-profile-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
}

@media (min-width: 768px) {
    .pgs-profile-stats-grid {
        gap: 14px !important;
    }
}

.pgs-profile-stat-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 12px 6px !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

@media (min-width: 576px) {
    .pgs-profile-stat-box {
        padding: 14px 10px !important;
    }
}

.pgs-profile-stat-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.1) !important;
}

.pgs-profile-stat-box.stat-red {
    border-top: 3px solid #e11d48 !important;
}
.pgs-profile-stat-box.stat-green {
    border-top: 3px solid #16a34a !important;
}
.pgs-profile-stat-box.stat-blue {
    border-top: 3px solid #0284c7 !important;
}
.pgs-profile-stat-box.stat-purple {
    border-top: 3px solid #7c3aed !important;
}

.pgs-profile-stat-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
}

@media (min-width: 768px) {
    .pgs-profile-stat-icon-wrap {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
}

.pgs-profile-stat-val {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

@media (min-width: 576px) {
    .pgs-profile-stat-val {
        font-size: 16px !important;
    }
}

.pgs-profile-stat-lbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

@media (min-width: 576px) {
    .pgs-profile-stat-lbl {
        font-size: 11px !important;
    }
}

/* 3. Instant Zero-Delay Tab Buttons */
.pgs-profile-tabs-pill {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    padding: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.pgs-tab-btn-instant {
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: none !important;
    -webkit-transition: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.pgs-tab-btn-instant:hover {
    color: #0284c7 !important;
    transition: none !important;
}

.pgs-tab-btn-instant.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28) !important;
}

.pgs-btn-edit-toggle {
    transition: none !important;
    -webkit-transition: none !important;
    cursor: pointer !important;
}
.pgs-btn-edit-toggle:hover {
    transition: none !important;
}

/* 4. Enhanced Security Card & Quick Services */
.pgs-security-card {
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.pgs-security-header {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-bottom: 1px solid #bae6fd !important;
    padding: 16px 20px !important;
}

.pgs-service-link-item {
    display: flex !important;
    align-items: center !important;
    padding: 11px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    color: #1e293b !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}

.pgs-service-link-item:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateX(3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
    color: #0f172a !important;
}

.pgs-service-link-item:hover .pgs-service-chevron {
    transform: translateX(3px) !important;
    color: #0284c7 !important;
}

.pgs-service-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.pgs-service-chevron {
    color: #94a3b8 !important;
    font-size: 12px !important;
    margin-left: auto !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

/* Komunitas Action Bar & Comments Section Spacing */
.pgs-komunitas-action-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    margin-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.pgs-komunitas-comments-wrap {
    padding-top: 12px !important;
    margin-top: 0 !important;
}

/* Komunitas Pedoman List (Hanging Indent) */
.pgs-pedoman-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
}
.pgs-pedoman-item:last-child {
    margin-bottom: 0 !important;
}
.pgs-pedoman-icon {
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    margin-top: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.pgs-pedoman-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.6 !important;
}

/* Multi-line text clamp utility */
.pgs-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
}

/* Dokter Dashboard Table Responsive Styling */
.pgs-table-dokter {
    min-width: 680px !important;
}
.pgs-table-dokter th,
.pgs-table-dokter td {
    vertical-align: middle !important;
}
.pgs-table-dokter .pgs-col-pasien {
    min-width: 190px !important;
    white-space: nowrap !important;
}
.pgs-table-dokter .pgs-col-tanggal {
    min-width: 110px !important;
    white-space: nowrap !important;
}
.pgs-table-dokter .pgs-col-keluhan {
    min-width: 220px !important;
    max-width: 320px !important;
}
.pgs-table-dokter .pgs-col-status {
    min-width: 95px !important;
    white-space: nowrap !important;
}
.pgs-table-dokter .pgs-col-aksi {
    min-width: 95px !important;
    width: 1% !important;
    white-space: nowrap !important;
}

/* Filter Stat Cards (1 Baris Responsif) */
.pgs-filter-card {
    border-radius: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid #f1f5f9 !important;
    background: #ffffff;
    height: 100% !important;
    user-select: none;
}
.pgs-filter-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}
.pgs-filter-card.active-all {
    background: #f0f7ff !important;
    border: 2px solid #0d6efd !important;
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.15) !important;
}
.pgs-filter-card.active-menunggu {
    background: #fffdf0 !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18) !important;
}
.pgs-filter-card.active-diproses {
    background: #f0fcff !important;
    border: 2px solid #0284c7 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18) !important;
}
.pgs-filter-card.active-selesai {
    background: #f0fdf4 !important;
    border: 2px solid #16a34a !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.18) !important;
}
.pgs-filter-card-body {
    padding: 10px 4px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
@media (min-width: 768px) {
    .pgs-filter-card-body {
        padding: 14px 12px !important;
    }
}
.pgs-filter-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .pgs-filter-card-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 8px;
    }
}
.pgs-filter-card-val {
    font-weight: 700;
    line-height: 1.1;
    font-size: 1.15rem;
}
@media (min-width: 768px) {
    .pgs-filter-card-val {
        font-size: 1.35rem;
    }
}
.pgs-filter-card-label {
    font-weight: 600;
    line-height: 1.2;
    font-size: 11px;
    margin-top: 3px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
}
@media (min-width: 768px) {
    .pgs-filter-card-label {
        font-size: 12px;
        margin-top: 4px;
    }
}

/* ==============================================================================
   MODAL DETAIL PASIEN - LAB ACCORDION & AI RICH LAB TABLE STYLING
   Ensure clean mobile UI/UX, horizontal scrolling, and generous column widths
   ============================================================================== */
.lab-header-accordion {
    transition: background-color 0.2s ease;
}
.lab-header-accordion:hover {
    background-color: #f8fafc !important;
}

/* Horizontal scroll container for AI lab tables */
.pgs-ai-table-wrap,
.rich-lab-summary .table-responsive,
.ai-summary-content .table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    margin: 12px 0 !important;
}

.ai-summary-content table,
.rich-lab-summary table,
.ai-lab-table {
    display: table !important;
    width: 100% !important;
    min-width: 720px !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background-color: #ffffff !important;
}

.ai-summary-content th,
.rich-lab-summary th,
.ai-lab-table th {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 12px 14px !important;
    border: 1px solid #cbd5e1 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.ai-summary-content td,
.rich-lab-summary td,
.ai-lab-table td {
    padding: 12px 14px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    vertical-align: top !important;
}

/* Specific column styling for clear separation and horizontal scrolling */
.ai-lab-table th:first-child,
.ai-lab-table td:first-child,
.rich-lab-summary th:first-child,
.rich-lab-summary td:first-child {
    min-width: 140px !important;
    width: 18% !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
}

.ai-lab-table th:nth-child(2),
.ai-lab-table td:nth-child(2),
.rich-lab-summary th:nth-child(2),
.rich-lab-summary td:nth-child(2) {
    min-width: 130px !important;
    width: 18% !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
    white-space: nowrap !important;
}

.ai-lab-table th:nth-child(3),
.ai-lab-table td:nth-child(3),
.rich-lab-summary th:nth-child(3),
.rich-lab-summary td:nth-child(3) {
    min-width: 110px !important;
    width: 16% !important;
    color: #64748b !important;
    white-space: nowrap !important;
}

/* Keterangan / Analisis column gets generous min-width (340px) so text flows comfortably without broken words */
.ai-lab-table th:nth-child(4),
.ai-lab-table td:nth-child(4),
.rich-lab-summary th:nth-child(4),
.rich-lab-summary td:nth-child(4),
.ai-lab-table th:last-child,
.ai-lab-table td:last-child,
.rich-lab-summary th:last-child,
.rich-lab-summary td:last-child {
    min-width: 340px !important;
    width: 48% !important;
    white-space: normal !important;
    color: #1e293b !important;
    line-height: 1.6 !important;
}

.ai-summary-content tr:nth-child(even),
.rich-lab-summary tr:nth-child(even),
.ai-lab-table tr:nth-child(even) {
    background-color: #f8fafc !important;
}

.ai-summary-content tr:hover,
.rich-lab-summary tr:hover,
.ai-lab-table tr:hover {
    background-color: #f0f9ff !important;
}

/* ==============================================================================
   MODAL DETAIL PASIEN - ULTRA-WIDE DESKTOP & FLUID RESPONSIVE
   Dilebarkan di desktop (1140px) agar tabel AI & lab langsung utuh tanpa perlu scroll ke kanan!
   ============================================================================== */
.pgs-modal-container .modal-detail-pasien-box,
.pgs-modal-box.modal-detail-pasien-box,
.modal-detail-pasien-box {
    max-width: 1140px !important;
    width: 95vw !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
}

@media (min-width: 992px) {
    .pgs-modal-container .modal-detail-pasien-box,
    .pgs-modal-box.modal-detail-pasien-box,
    .modal-detail-pasien-box {
        max-width: 1140px !important;
        width: 92vw !important;
    }

    /* Di desktop: tabel AI tidak perlu scrolling horizontal, langsung pas penuh! */
    .modal-detail-pasien-box .pgs-ai-table-wrap,
    .modal-detail-pasien-box .rich-lab-summary .table-responsive,
    .modal-detail-pasien-box .ai-summary-content .table-responsive {
        overflow-x: visible !important;
    }

    .modal-detail-pasien-box .ai-lab-table,
    .modal-detail-pasien-box .rich-lab-summary table,
    .modal-detail-pasien-box .ai-summary-content table {
        min-width: 100% !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    .modal-detail-pasien-box .ai-lab-table th:first-child,
    .modal-detail-pasien-box .ai-lab-table td:first-child,
    .modal-detail-pasien-box .rich-lab-summary th:first-child,
    .modal-detail-pasien-box .rich-lab-summary td:first-child {
        width: 18% !important;
        min-width: 140px !important;
    }

    .modal-detail-pasien-box .ai-lab-table th:nth-child(2),
    .modal-detail-pasien-box .ai-lab-table td:nth-child(2),
    .modal-detail-pasien-box .rich-lab-summary th:nth-child(2),
    .modal-detail-pasien-box .rich-lab-summary td:nth-child(2) {
        width: 18% !important;
        min-width: 130px !important;
    }

    .modal-detail-pasien-box .ai-lab-table th:nth-child(3),
    .modal-detail-pasien-box .ai-lab-table td:nth-child(3),
    .modal-detail-pasien-box .rich-lab-summary th:nth-child(3),
    .modal-detail-pasien-box .rich-lab-summary td:nth-child(3) {
        width: 16% !important;
        min-width: 120px !important;
    }

    .modal-detail-pasien-box .ai-lab-table th:nth-child(4),
    .modal-detail-pasien-box .ai-lab-table td:nth-child(4),
    .modal-detail-pasien-box .rich-lab-summary th:nth-child(4),
    .modal-detail-pasien-box .rich-lab-summary td:nth-child(4),
    .modal-detail-pasien-box .ai-lab-table th:last-child,
    .modal-detail-pasien-box .ai-lab-table td:last-child,
    .modal-detail-pasien-box .rich-lab-summary th:last-child,
    .modal-detail-pasien-box .rich-lab-summary td:last-child {
        width: 48% !important;
        min-width: 320px !important;
        white-space: normal !important;
    }

    /* Tabel parameter lab biasa & obat di desktop juga langsung pas dan rounded */
    .modal-detail-pasien-box .table-responsive {
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    .modal-detail-pasien-box .table-responsive > table {
        min-width: 100% !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    .modal-detail-pasien-box .table-responsive > table thead th:first-child {
        border-top-left-radius: 9px !important;
    }
    .modal-detail-pasien-box .table-responsive > table thead th:last-child {
        border-top-right-radius: 9px !important;
    }
}

@media (max-width: 767.98px) {
    .modal-detail-pasien-box {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
    }
    .modal-detail-pasien-box .table-responsive {
        border-radius: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .modal-detail-pasien-box .table-responsive > table thead th:first-child {
        border-top-left-radius: 9px !important;
    }
    .modal-detail-pasien-box .table-responsive > table thead th:last-child {
        border-top-right-radius: 9px !important;
    }
    .modal-detail-pasien-box .pgs-ai-table-wrap,
    .modal-detail-pasien-box .rich-lab-summary .table-responsive,
    .modal-detail-pasien-box .ai-summary-content .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==============================================================================
   PGS RUJUKAN & MITRA RS SYSTEM STYLES
   Clean UI/UX CSS Architecture (No inline styles)
   ============================================================================== */

/* Tab Switcher Segmented Control */
.pgs-rujukan-tab-container {
    max-width: 440px;
    background-color: #e2e8f0;
    padding: 4px;
    border-radius: 14px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pgs-rujukan-tab-btn {
    flex: 1 1 50%;
    min-width: 0;
    height: 42px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    background-color: transparent;
    color: #475569;
    box-shadow: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
}

.pgs-rujukan-tab-btn.active {
    font-weight: 700;
    background-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.pgs-rujukan-tab-badge {
    background-color: #cbd5e1;
    color: #334155;
    font-size: 10.5px;
    margin-left: 6px;
}

.pgs-rujukan-tab-btn.active .pgs-rujukan-tab-badge {
    background-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* Empty State */
.pgs-empty-icon-circle {
    width: 64px;
    height: 64px;
    background-color: rgba(2, 132, 199, 0.08);
    color: #0284c7;
}

.pgs-empty-desc {
    max-width: 420px;
}

/* RS Icon Badge Circle */
.pgs-rs-icon-circle {
    width: 32px;
    height: 32px;
    background-color: #e0f2fe;
    color: #0284c7;
}

/* Toolbar Search & Filter */
.pgs-toolbar-pill {
    height: 42px;
    transition: all 0.2s ease;
}

.pgs-search-input-pill {
    padding-left: 16px;
    padding-right: 14px;
}

.pgs-filter-select-pill {
    padding-left: 14px;
    padding-right: 12px;
}

.pgs-input-clean {
    outline: none !important;
}

.pgs-select-clean {
    outline: none !important;
    cursor: pointer;
}

.pgs-btn-clear-search {
    text-decoration: none !important;
}

/* RS Card */
.pgs-rs-card {
    border: 1px solid #f1f5f9;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.pgs-rs-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.pgs-rs-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    min-height: 2.7em;
}

.pgs-rs-alamat {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em;
    margin-bottom: 14px;
}

/* Footer Card RS (Jeda Luas & Tidak Nabrak Garis) */
.pgs-rs-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.pgs-btn-maps {
    white-space: nowrap !important;
    flex-shrink: 0;
}

/* Pagination Circular Pills */
.pgs-pagination-list {
    gap: 4px;
}

.pgs-page-circle-btn {
    width: 32px;
    height: 32px;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pgs-page-circle-disabled {
    width: 32px;
    height: 32px;
    font-size: 11.5px;
    background-color: #f8fafc;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Printable Backdrop & Assets */
.pgs-modal-backdrop-blur {
    background-color: rgba(15, 23, 42, 0.65) !important;
    z-index: 1050;
}

.pgs-modal-logo {
    width: 56px;
    height: 56px;
}

.pgs-modal-qrcode {
    width: 74px;
    height: 74px;
}

.pgs-table-w30 {
    width: 30% !important;
}

.pgs-modal-stamp-box {
    max-width: 280px;
}

.pgs-modal-sign-box {
    min-width: 180px;
}

/* Status Badges */
.pgs-badge-status-disetujui {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

.pgs-badge-status-menunggu {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.pgs-badge-status-ditolak {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

.pgs-badge-status-selesai {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
}

.pgs-badge-status-batal {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.bg-blue-soft {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}

.bg-emerald-soft {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
}