/* ====================================================================
   SIPRIJA KALIMANTAN SELATAN - MODERN LIGHT BLUE DESIGN SYSTEM
   Sidebar Layout + Responsive Modern Glassmorphism
   ==================================================================== */

:root {
    --primary: #0288D1;
    --primary-hover: #0277BD;
    --primary-dark: #01579B;
    --primary-light: #29B6F6;
    --primary-lighter: #E1F5FE;
    --primary-soft: #F0F9FF;
    --sidebar-bg: linear-gradient(180deg, #013A63 0%, #014F86 40%, #01497C 100%);
    --sidebar-hover: rgba(255, 255, 255, 0.12);
    --sidebar-active: #0288D1;
    --accent-gold: #F59E0B;
    --accent-green: #10B981;
    --accent-red: #EF4444;
    --accent-purple: #8B5CF6;
    --accent-cyan: #06B6D4;
    --bg-page: #F0F9FF;
    --bg-card: #FFFFFF;
    --bg-card-header: #F8FAFC;
    --text-main: #0F172A;
    --text-muted: #475569;
    --text-light: #64748B;
    --border-color: #E2E8F0;
    --border-blue: #BAE6FD;
    --topbar-bg: #FFFFFF;
    --topbar-border: #E2E8F0;
    --footer-bg: #FFFFFF;
    --footer-border: #E2E8F0;
    --input-bg: #FFFFFF;
    --input-border: #CBD5E1;
    --table-stripe: #F8FAFC;
    --table-hover: #F0F9FF;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 9999px;
    --sidebar-width: 270px;
    --shadow-subtle: 0 2px 10px rgba(2, 136, 209, 0.05);
    --shadow-card: 0 4px 20px rgba(2, 136, 209, 0.08);
    --shadow-hover: 0 10px 25px rgba(2, 136, 209, 0.16);
    --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================================================================
   DARK MODE PALETTE
   ==================================================================== */
[data-theme="dark"], body.dark-mode {
    --primary: #38BDF8;
    --primary-hover: #0288D1;
    --primary-dark: #7DD3FC;
    --primary-light: #0288D1;
    --primary-lighter: #0C4A6E;
    --primary-soft: #082F49;
    --sidebar-bg: linear-gradient(180deg, #071727 0%, #0A223B 40%, #05121F 100%);
    --sidebar-hover: rgba(56, 189, 248, 0.16);
    --sidebar-active: #0288D1;
    --bg-page: #0B1325;
    --bg-card: #152238;
    --bg-card-header: #111C30;
    --text-main: #F1F5F9;
    --text-muted: #94A3B8;
    --text-light: #64748B;
    --border-color: #1E3A5F;
    --border-blue: #0369A1;
    --topbar-bg: #111C30;
    --topbar-border: #1E3A5F;
    --footer-bg: #111C30;
    --footer-border: #1E3A5F;
    --input-bg: #0F1A2E;
    --input-border: #26456E;
    --table-stripe: #121F35;
    --table-hover: #1A2D4B;
    --shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.55);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ====================================================================
   APP LAYOUT (SIDEBAR + MAIN CONTENT AREA)
   ==================================================================== */
.sip-app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* SIDEBAR */
.sip-sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #013A63 0%, #014F86 40%, #01497C 100%);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    box-shadow: 4px 0 20px rgba(1, 58, 99, 0.25);
    overflow-y: auto;
    transition: var(--transition);
}

.sip-sidebar-brand {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    text-decoration: none;
    color: #FFFFFF;
    transition: var(--transition);
}

.sip-sidebar-logo {
    height: 54px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    transition: var(--transition);
}

.sip-sidebar-brand:hover .sip-sidebar-logo {
    transform: scale(1.06);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}

.sip-sidebar-brand-text h2 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1.2;
    color: #FFFFFF;
}

.sip-sidebar-brand-text span {
    font-size: 11px;
    color: #7DD3FC;
    font-weight: 600;
    display: block;
}

/* SIDEBAR USER CARD */
.sip-sidebar-user {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.08);
    margin: 14px 14px 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sip-sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFFFF;
    object-fit: contain;
    padding: 2px;
    border: 2px solid #38BDF8;
}

.sip-sidebar-user-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
}

.sip-sidebar-user-role {
    font-size: 10.5px;
    color: #FCD34D;
    font-weight: 600;
    margin-top: 2px;
}

/* SIDEBAR NAV LINKS */
.sip-sidebar-menu {
    list-style: none;
    padding: 10px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sip-menu-header {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #7DD3FC;
    font-weight: 800;
    padding: 10px 12px 4px 12px;
}

.sip-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.sip-sidebar-link i {
    font-size: 16px;
    color: #38BDF8;
    transition: var(--transition);
    width: 20px;
    text-align: center;
}

.sip-sidebar-link:hover {
    background: var(--sidebar-hover);
    color: #FFFFFF;
    transform: translateX(3px);
}

.sip-sidebar-link:hover i {
    color: #FFFFFF;
}

.sip-sidebar-link.active {
    background: linear-gradient(135deg, #0288D1 0%, #014F86 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.35);
    border-left: 4px solid #38BDF8;
}

.sip-sidebar-link.active i {
    color: #FFFFFF;
}

.sip-sidebar-footer {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 11px;
    color: #94A3B8;
    background: rgba(0, 0, 0, 0.15);
    transition: var(--transition);
}

/* SIDEBAR BACKDROP (MOBILE / TABLET) */
.sip-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 25, 44, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
}

.sip-sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* ====================================================================
   DESKTOP SIDEBAR COLLAPSED STATE (TOGGLE)
   ==================================================================== */
body.sidebar-collapsed .sip-sidebar {
    width: 76px;
}

body.sidebar-collapsed .sip-sidebar .sip-sidebar-brand {
    padding: 12px 6px;
}

body.sidebar-collapsed .sip-sidebar .sip-sidebar-logo {
    height: 38px;
    max-width: 48px;
}

body.sidebar-collapsed .sip-sidebar .sip-sidebar-brand-text,
body.sidebar-collapsed .sip-sidebar .sip-sidebar-user,
body.sidebar-collapsed .sip-sidebar .sip-menu-header,
body.sidebar-collapsed .sip-sidebar .sip-sidebar-link span,
body.sidebar-collapsed .sip-sidebar .sip-sidebar-footer {
    display: none !important;
}

body.sidebar-collapsed .sip-sidebar .sip-sidebar-menu {
    padding: 10px 8px;
}

body.sidebar-collapsed .sip-sidebar .sip-sidebar-link {
    justify-content: center;
    padding: 12px 8px;
}

body.sidebar-collapsed .sip-sidebar .sip-sidebar-link i {
    font-size: 20px;
    margin: 0;
}

body.sidebar-collapsed .sip-main-wrapper {
    margin-left: 76px;
    width: calc(100% - 76px);
}

/* ====================================================================
   MAIN CONTENT WRAPPER & TOPBAR
   ==================================================================== */
.sip-main-wrapper {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-page);
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================================================================
   TOPBAR & HEADER SYSTEM
   ==================================================================== */
.sip-topbar {
    background: var(--topbar-bg);
    border-bottom: 1.5px solid var(--topbar-border);
    padding: 0 28px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-subtle);
    transition: var(--transition);
}

.sip-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
    margin-right: 20px;
}

/* TOGGLE BUTTON SIDEBAR */
.sip-topbar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 19px;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    outline: none;
    box-shadow: none;
}

.sip-topbar-toggle:hover {
    background: var(--primary-lighter);
    border: none;
    outline: none;
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: none;
}

[data-theme="dark"] .sip-topbar-toggle {
    background: transparent;
    border: none;
    color: #CBD5E1;
    box-shadow: none;
}

[data-theme="dark"] .sip-topbar-toggle:hover {
    background: rgba(56, 189, 248, 0.15);
    border: none;
    outline: none;
    color: var(--primary);
}

/* TOPBAR TITLE & SUBTITLE */
.sip-topbar-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sip-topbar-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.sip-topbar-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1.5px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.sip-topbar-pill.pill-prov {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .sip-topbar-pill.pill-prov {
    background: rgba(245, 158, 11, 0.2);
    color: #FCD34D;
    border-color: rgba(251, 191, 36, 0.35);
}

.sip-topbar-pill.pill-kab {
    background: rgba(2, 136, 209, 0.12);
    color: #0288D1;
    border: 1px solid rgba(2, 136, 209, 0.3);
}

[data-theme="dark"] .sip-topbar-pill.pill-kab {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border-color: rgba(56, 189, 248, 0.35);
}

.sip-topbar-inst {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sip-topbar-divider-dot {
    color: var(--text-light);
    font-size: 11px;
    opacity: 0.6;
    flex-shrink: 0;
}

.sip-topbar-page-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sip-topbar-title h1 {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

[data-theme="dark"] .sip-topbar-title h1 {
    color: #F1F5F9;
}

/* TOPBAR RIGHT CONTROLS */
.sip-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* THEME TOGGLE BUTTON (DARK/LIGHT) */
.sip-theme-toggle {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--primary);
    border: none;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: none;
    outline: none;
    white-space: nowrap;
}

.sip-theme-toggle:hover {
    background: var(--primary-lighter);
    color: var(--primary);
    border: none;
    outline: none;
    transform: translateY(-1px);
    box-shadow: none;
}

.sip-theme-toggle i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.sip-theme-toggle:hover i {
    transform: rotate(15deg);
}

[data-theme="dark"] .sip-theme-toggle {
    background: transparent;
    border: none;
    color: #FCD34D;
    box-shadow: none;
}

[data-theme="dark"] .sip-theme-toggle:hover {
    background: rgba(251, 191, 36, 0.15);
    border: none;
    outline: none;
    color: #FCD34D;
}

/* ONLINE STATUS INDICATOR */
.sip-status-indicator {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(16, 185, 129, 0.1);
    border: none;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #10B981;
    white-space: nowrap;
    outline: none;
    box-shadow: none;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.6; }
}

/* HEADER USER DROPDOWN & BADGE */
.sip-user-dropdown {
    position: relative;
    display: inline-block;
}

.sip-user-badge-btn {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 6px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    transition: var(--transition);
    outline: none;
    box-shadow: none;
}

.sip-user-badge-btn:hover,
.sip-user-dropdown.show .sip-user-badge-btn {
    background: var(--primary-lighter);
    border: none;
    outline: none;
    box-shadow: none;
}

[data-theme="dark"] .sip-user-badge-btn {
    background: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="dark"] .sip-user-badge-btn:hover,
[data-theme="dark"] .sip-user-dropdown.show .sip-user-badge-btn {
    background: rgba(56, 189, 248, 0.12);
    border: none;
    outline: none;
    box-shadow: none;
}

/* GLOBAL HEADER BUTTONS: STRICT NO OUTLINE / NO BORDER */
.sip-topbar button,
.sip-topbar button:focus,
.sip-topbar button:focus-visible,
.sip-topbar button:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.sip-user-badge-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.sip-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 190px;
    line-height: 1.2;
}

.sip-user-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .sip-user-name {
    color: #F1F5F9;
}

.sip-user-role-badge {
    font-size: 9.5px;
    font-weight: 700;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sip-user-role-badge.badge-provinsi {
    color: #D97706;
}

[data-theme="dark"] .sip-user-role-badge.badge-provinsi {
    color: #FCD34D;
}

.sip-user-role-badge.badge-kabkota {
    color: #0288D1;
}

[data-theme="dark"] .sip-user-role-badge.badge-kabkota {
    color: #38BDF8;
}

.sip-dropdown-arrow {
    font-size: 11px;
    color: var(--text-light);
    transition: transform 0.22s ease, color 0.22s ease;
    margin-left: 2px;
}

.sip-user-dropdown.show .sip-dropdown-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}

/* DROPDOWN MENU BOX */
.sip-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 290px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

[data-theme="dark"] .sip-dropdown-menu {
    background: #111C30;
    border-color: #1E3A5F;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
}

.sip-user-dropdown.show .sip-dropdown-menu,
.sip-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.sip-dropdown-header {
    padding: 12px 18px 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card-header);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}

.sip-dropdown-avatar-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16));
}

.sip-dropdown-header-info {
    min-width: 0;
    flex: 1;
}

.sip-dropdown-user-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.25;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .sip-dropdown-user-name {
    color: #F8FAFC;
}

.sip-dropdown-user-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sip-dropdown-user-role {
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sip-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

.sip-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    text-decoration: none;
    color: var(--text-main);
    transition: var(--transition);
}

.sip-dropdown-item:hover {
    background: var(--primary-lighter);
    color: var(--primary-dark);
}

[data-theme="dark"] .sip-dropdown-item:hover {
    background: var(--sidebar-hover);
    color: var(--primary);
}

.sip-dropdown-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: var(--transition);
}

.sip-dropdown-item-icon.icon-profile {
    background: rgba(2, 136, 209, 0.12);
    color: var(--primary);
}

.sip-dropdown-item-icon.icon-users {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.sip-dropdown-item-icon.icon-logout {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

.sip-dropdown-item:hover .sip-dropdown-item-icon {
    transform: scale(1.08);
}

.sip-dropdown-item-content {
    flex: 1;
}

.sip-dropdown-item-title {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}

.sip-dropdown-item-desc {
    font-size: 10.5px;
    color: var(--text-light);
    margin-top: 2px;
}

.sip-dropdown-logout:hover {
    background: #FEF2F2 !important;
}

[data-theme="dark"] .sip-dropdown-logout:hover {
    background: rgba(239, 68, 68, 0.18) !important;
}

/* CONTAINER DALAM KONTEN (FULL WIDTH TANPA RUANG KOSONG) */
.sip-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 22px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* BREADCRUMB CONTAINER - DIHILANGKAN DI SEMUA HALAMAN */
.sip-breadcrumb {
    display: none !important;
}

.sip-breadcrumb:hover {
    box-shadow: var(--shadow-card);
    border-color: rgba(2, 136, 209, 0.35);
}

.sip-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(2, 136, 209, 0.08);
    transition: var(--transition);
}

.sip-breadcrumb a:hover {
    background: rgba(2, 136, 209, 0.18);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.sip-breadcrumb a i {
    font-size: 13px;
    color: var(--primary);
}

.sip-breadcrumb-separator {
    color: var(--text-light);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    opacity: 0.6;
}

.sip-breadcrumb-current {
    color: var(--text-main);
    font-weight: 700;
    padding: 3px 9px;
    background: var(--bg-card-header);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* HERO BANNER - MODERN, RAPI & SUPPORT DARK THEME */
.hero-banner {
    background: linear-gradient(135deg, #0277BD 0%, #0288D1 55%, #039BE5 100%);
    color: #FFFFFF;
    padding: 22px 28px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(2, 136, 209, 0.22);
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .hero-banner {
    background: linear-gradient(135deg, #0B2540 0%, #0E3256 50%, #134270 100%);
    border-color: #1E3A5F;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.hero-banner::after {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

[data-theme="dark"] .hero-banner::after {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(56, 189, 248, 0) 70%);
}

.hero-title {
    flex: 1;
    min-width: 280px;
    z-index: 1;
}

.hero-title h2 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    line-height: 1.3;
}

[data-theme="dark"] .hero-title h2 {
    color: #F8FAFC;
}

.hero-title p {
    font-size: 13.5px;
    opacity: 0.94;
    font-weight: 400;
    max-width: 740px;
    margin: 0;
    line-height: 1.5;
}

.hero-stats-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    z-index: 1;
}

.hero-stat-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    text-align: center;
    min-width: 88px;
    transition: var(--transition);
}

.hero-stat-card:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-2px);
}

[data-theme="dark"] .hero-stat-card {
    background: rgba(15, 26, 46, 0.65);
    border-color: rgba(56, 189, 248, 0.28);
}

[data-theme="dark"] .hero-stat-card:hover {
    background: rgba(15, 26, 46, 0.88);
    border-color: rgba(56, 189, 248, 0.5);
}

.hero-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
}

.hero-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.92;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* FLOWCHART GRID 2 KOLOM */
.flow-layout-grid {
    display: grid;
    grid-template-columns: 2.1fr 1fr;
    gap: 24px;
}

@media (max-width: 1100px) {
    .flow-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* CARDS UMUM & FLOW CARDS */
.sip-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 22px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    margin-bottom: 20px;
}

.sip-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--border-blue);
}

.border-sky { border-top: 5px solid #29B6F6 !important; }
.border-cyan { border-top: 5px solid #03A9F4 !important; }
.border-blue { border-top: 5px solid #0288D1 !important; }
.border-navy { border-top: 5px solid #01579B !important; }
.border-gold { border-top: 5px solid #F59E0B !important; }

.sip-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sip-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* MINI BOXES 3 KOLOM DI DATA USULAN */
.mini-boxes-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 768px) {
    .mini-boxes-3 {
        grid-template-columns: 1fr;
    }
}

.mini-box {
    background-color: var(--primary-soft);
    border: 1px solid var(--border-blue);
    padding: 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.mini-box:hover {
    background-color: #E0F2FE;
    transform: translateY(-2px);
}

.mini-box-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-box-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.mini-box-list li {
    padding: 3px 0;
    position: relative;
    padding-left: 14px;
}

.mini-box-list li::before {
    content: "•";
    color: var(--primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* TAGS ROW */
.tags-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tag-badge {
    background-color: var(--primary-lighter);
    color: var(--primary-dark);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--border-blue);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* VALIDASI BOX WITH BRANCHING */
.validation-box-container {
    background-color: #FAFCFF;
    border: 1.5px dashed var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-top: 10px;
}

.validation-flex {
    display: flex;
    gap: 20px;
    align-items: center;
}

@media (max-width: 640px) {
    .validation-flex {
        flex-direction: column;
    }
}

.validation-checks {
    flex: 2;
    list-style: none;
    font-size: 12.5px;
    color: var(--text-main);
}

.validation-checks li {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.validation-checks li i {
    color: var(--accent-green);
    font-size: 14px;
}

.validation-branch {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.branch-box {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    display: block;
    text-decoration: none;
    transition: var(--transition);
}

.branch-box span {
    font-size: 10.5px;
    font-weight: 400;
    display: block;
    opacity: 0.9;
}

.branch-invalid {
    background-color: #FEE2E2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

.branch-invalid:hover {
    background-color: #FECACA;
    transform: translateX(-2px);
}

.branch-valid {
    background-color: #DCFCE7;
    color: #16A34A;
    border: 1px solid #BBF7D0;
}

.branch-valid:hover {
    background-color: #BBF7D0;
    transform: translateX(2px);
}

/* STEPPER APBD PIPELINE */
.pipeline-stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    border: 1.5px solid #BAE6FD;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
    flex-wrap: wrap;
    gap: 8px;
}

.stepper-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(2, 136, 209, 0.08);
    border: 1px solid #E2E8F0;
    transition: var(--transition);
}

.stepper-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(2, 136, 209, 0.15);
    border-color: #38BDF8;
}

.stepper-arrow {
    color: #0288D1;
    font-size: 15px;
    font-weight: 900;
}

/* HIGHLIGHT WORKFLOW BOXES */
.box-highlight-yellow {
    background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
    border: 1.5px solid #FDE68A;
    color: #92400E;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.06);
    transition: var(--transition);
}

.box-highlight-yellow:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
}

.box-highlight-blue {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1.5px solid #BAE6FD;
    color: #0369A1;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(2, 136, 209, 0.06);
    transition: var(--transition);
}

.box-highlight-blue:hover {
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.12);
}

.box-highlight-purple {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    border: 1.5px solid #DDD6FE;
    color: #5B21B6;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.06);
    transition: var(--transition);
}

.box-highlight-purple:hover {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);
}

.box-highlight-orange {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    border: 1.5px solid #FED7AA;
    color: #9A3412;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.06);
    transition: var(--transition);
}

.box-highlight-orange:hover {
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12);
}

/* SIDE PANEL STYLING (KOMPETENSI & DIKLAT) */
.competency-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 22px;
    box-shadow: var(--shadow-card);
    border-top: 5px solid #00BCD4;
    border: 1px solid var(--border-color);
    border-top-width: 5px;
    margin-bottom: 20px;
    transition: var(--transition);
}

.competency-card:hover {
    box-shadow: var(--shadow-hover);
}

.competency-list {
    padding-left: 20px;
    margin: 12px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

.training-program-card {
    background: linear-gradient(135deg, #0288D1 0%, #01579B 100%);
    color: #FFFFFF;
    border-radius: var(--radius-md);
    padding: 22px;
    box-shadow: 0 6px 20px rgba(1, 87, 155, 0.25);
    margin-bottom: 20px;
    transition: var(--transition);
}

.training-program-card:hover {
    box-shadow: 0 10px 25px rgba(1, 87, 155, 0.35);
    transform: translateY(-2px);
}

.training-program-card h2 {
    font-size: 14.5px;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,0.22);
    padding-bottom: 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.training-list {
    padding-left: 20px;
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.96;
}

.feedback-loop-box {
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    text-align: center;
    margin-top: 16px;
    font-size: 11.5px;
    line-height: 1.45;
}

/* ====================================================================
   KOMPETENSI SDM & DIKLAT PAGE REFINEMENTS
   ==================================================================== */
.kompetensi-pilar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.pilar-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.pilar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #0288D1, #00BCD4);
    opacity: 0.9;
}

.pilar-card.pilar-card-feedback::before {
    background: linear-gradient(90deg, #10B981, #059669);
}

.pilar-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: var(--primary);
}

[data-theme="dark"] .pilar-card {
    background: #152238;
    border-color: #1E3A5F;
}

[data-theme="dark"] .pilar-card:hover {
    border-color: #38BDF8;
}

.pilar-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pilar-badge-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-dark);
    background: rgba(2, 136, 209, 0.1);
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

[data-theme="dark"] .pilar-badge-num {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
}

.pilar-card-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 6px;
    line-height: 1.35;
}

.pilar-card-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.pilar-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    font-size: 11px;
}

.pilar-weight-chip {
    font-weight: 700;
    color: #0288D1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[data-theme="dark"] .pilar-weight-chip {
    color: #38BDF8;
}

/* ====================================================================
   COOL MODERN BUTTONS (.btn & .sip-btn)
   ==================================================================== */
.btn, .sip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.btn i, .sip-btn i {
    font-size: 15px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover i, .sip-btn:hover i {
    transform: scale(1.2);
}

.btn:hover, .sip-btn:hover {
    transform: translateY(-2px);
}

.btn:active, .sip-btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary, .sip-btn-primary {
    background: linear-gradient(135deg, #0288D1 0%, #03A9F4 100%);
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(2, 136, 209, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary:hover, .sip-btn-primary:hover {
    background: linear-gradient(135deg, #01579B 0%, #0288D1 100%);
    box-shadow: 0 6px 20px rgba(2, 136, 209, 0.45);
}

.btn-success, .sip-btn-success {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-success:hover, .sip-btn-success:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.btn-warning, .sip-btn-warning {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-warning:hover, .sip-btn-warning:hover {
    background: linear-gradient(135deg, #B45309 0%, #D97706 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
}

.btn-danger, .sip-btn-danger {
    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-danger:hover, .sip-btn-danger:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}

.btn-light, .sip-btn-light {
    background: var(--bg-card);
    color: var(--text-main) !important;
    border: 1.5px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-light:hover, .sip-btn-light:hover {
    background: var(--bg-card-header);
    border-color: var(--primary);
    color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.15);
}

.btn-secondary {
    background: #E2E8F0;
    color: #334155 !important;
}

.btn-secondary:hover {
    background: #CBD5E1;
    color: #0F172A !important;
}

[data-theme="dark"] .btn-secondary {
    background: #1E3A5F;
    color: #F1F5F9 !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #334E68;
    color: #FFFFFF !important;
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary) !important;
    border: 1.5px solid var(--primary);
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(2, 136, 209, 0.3);
}

.btn-outline-danger {
    background: transparent;
    color: #DC2626 !important;
    border: 1.5px solid #DC2626;
}

.btn-outline-danger:hover {
    background: #DC2626;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

.btn-sm, .sip-btn-sm {
    padding: 6px 12px;
    font-size: 11.5px;
    border-radius: 8px;
}

.btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-lg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* STATUS BADGES */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}

.status-diajukan { background-color: #E0F2FE; color: #0288D1; }
.status-terverifikasi { background-color: #DCFCE7; color: #16A34A; }
.status-ditolak { background-color: #FEE2E2; color: #DC2626; }
.status-ditetapkan { background-color: #FEF3C7; color: #D97706; }
.status-prioritas1 { background-color: #FEF9C3; color: #A16207; border: 1px solid #FDE047; }
.status-prioritas2 { background-color: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
.status-prioritas3 { background-color: #FFEDD5; color: #C2410C; border: 1px solid #FDBA74; }

/* REGION BADGE IN TABLES */
.region-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--primary-dark);
}

.region-logo-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* JQUERY DATATABLES CUSTOM STYLING (BAHASA INDONESIA - SATU BARIS & SATU GARIS LURUS) */
/* ====================================================================
   JQUERY DATATABLES UNIFIED SUITE (BAHASA INDONESIA - SATU BARIS & SATU GARIS)
   Tampilkan Data di KIRI | Pencarian Data di KANAN (Sejajar Horisontal Lurus)
   ==================================================================== */
.dataTables_wrapper {
    font-size: 12.5px;
    color: var(--text-main);
    padding: 10px 0;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* 1. Baris Atas Dedicated Toolbar: Kiri = Tampilkan Data, Kanan = Cari Data (Pasti Satu Baris & Satu Garis) */
.sip-dt-toolbar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

/* Sisi Kiri: Tampilkan Data */
.sip-dt-toolbar .dataTables_length,
.dataTables_wrapper > .dataTables_length {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    height: 38px !important;
    line-height: 38px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.sip-dt-toolbar .dataTables_length label,
.dataTables_wrapper .dataTables_length label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 38px !important;
    line-height: 38px !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-main, #334155) !important;
    white-space: nowrap !important;
    cursor: default !important;
    box-sizing: border-box !important;
}

.sip-dt-toolbar .dataTables_length select,
.dataTables_wrapper .dataTables_length select {
    display: inline-block !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 8px !important;
    padding: 0 32px 0 12px !important;
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%230288D1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
}

.sip-dt-toolbar .dataTables_length select:hover,
.dataTables_wrapper .dataTables_length select:hover {
    border-color: #0288D1 !important;
    background-color: #F8FAFC !important;
    box-shadow: 0 2px 6px rgba(2, 136, 209, 0.12) !important;
}

.sip-dt-toolbar .dataTables_length select:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: #0288D1 !important;
    box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.18) !important;
}

/* Sisi Kanan: Pencarian Data */
.sip-dt-toolbar .dataTables_filter,
.dataTables_wrapper > .dataTables_filter {
    float: none !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    text-align: right !important;
    height: 38px !important;
    line-height: 38px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.sip-dt-toolbar .dataTables_filter label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 38px !important;
    line-height: 38px !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-main, #334155) !important;
    white-space: nowrap !important;
    cursor: default !important;
    box-sizing: border-box !important;
}

.sip-dt-toolbar .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input {
    display: inline-block !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    outline: none !important;
    transition: var(--transition) !important;
    width: 240px !important;
    max-width: 100% !important;
    background: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    box-sizing: border-box !important;
    margin: 0 0 0 4px !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.sip-dt-toolbar .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.18) !important;
}

/* 2. Bagian Tengah: Pembungkus Tabel Responsif Mandiri */
.sip-dt-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 14px !important;
    clear: both !important;
    display: block !important;
    box-sizing: border-box !important;
}

.sip-dt-table::-webkit-scrollbar {
    height: 6px;
}

.sip-dt-table::-webkit-scrollbar-thumb {
    background: rgba(2, 136, 209, 0.35);
    border-radius: 4px;
}

.sip-dt-table > table.dataTable,
.sip-dt-table > table.sip-datatable,
.dataTables_wrapper > table.dataTable {
    width: 100% !important;
    clear: both !important;
    margin-bottom: 0 !important;
}

/* 3. Bagian Bawah: Informasi Entri di Kiri, Paginasi di Kanan */
.sip-dt-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    padding: 0 !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.sip-dt-footer .dataTables_info,
.dataTables_wrapper > .dataTables_info {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--text-muted, #64748B) !important;
    line-height: normal !important;
}

.sip-dt-footer .dataTables_paginate,
.dataTables_wrapper > .dataTables_paginate {
    float: none !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    line-height: normal !important;
}

/* Clearfix pengaman fallback jika toolbar kustom tidak terbentuk */
.dataTables_wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Readonly State for Select Options & SipSelect (Standar Bina Marga Lock) */
select[aria-readonly="true"],
select[data-readonly="true"],
select.is-readonly,
.sip-select-wrapper.is-readonly {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

select[aria-readonly="true"],
select[data-readonly="true"],
select.is-readonly,
.sip-select-wrapper.is-readonly .sip-select-trigger {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #CBD5E1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.sip-select-wrapper.is-readonly .sip-select-chevron {
    opacity: 0.35 !important;
    pointer-events: none !important;
}

table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 15px !important;
}

table.dataTable thead th {
    background: linear-gradient(135deg, #E1F5FE 0%, #BAE6FD 100%);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 12px;
    padding: 12px 10px;
    border-bottom: 2px solid var(--primary-light) !important;
    text-align: left;
    white-space: nowrap;
}

table.dataTable tbody td {
    padding: 10px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

table.dataTable tbody tr:hover {
    background-color: var(--primary-soft) !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: var(--text-light);
    padding-top: 10px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--border-blue) !important;
    background: #FFFFFF !important;
    color: var(--primary-dark) !important;
    border-radius: var(--radius-sm) !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 2px !important;
    transition: var(--transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--primary-lighter) !important;
    color: var(--primary-dark) !important;
    border-color: var(--primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #FFFFFF !important;
    border-color: var(--primary-dark) !important;
    box-shadow: 0 2px 6px rgba(2, 136, 209, 0.25);
}

/* ====================================================================
   ULTRA-PREMIUM MODAL DIALOG (.sip-modal & .modal-box)
   ==================================================================== */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(11, 19, 37, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 99999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

.modal-overlay.active {
    display: flex !important;
    animation: modalFadeIn 0.22s ease-out;
}

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

.sip-modal, .modal-box {
    background: var(--bg-card);
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border: 1.5px solid var(--border-blue);
    animation: modalPopIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--text-main);
    margin: auto;
}

/* Pastikan form di dalam modal menjadi flex container yang membatasi tinggi body */
.sip-modal > form, .modal-box > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

@keyframes modalPopIn {
    from { transform: scale(0.92) translateY(16px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.sip-modal-header, .modal-header {
    background: linear-gradient(135deg, #014F86 0%, #0288D1 100%);
    color: #FFFFFF;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(1, 79, 134, 0.2);
    flex-shrink: 0 !important;
}

.sip-modal-header h3, .modal-title {
    font-size: 16.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #FFFFFF !important;
    letter-spacing: 0.3px;
}

.sip-modal-close, .modal-close {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF !important;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sip-modal-close:hover, .modal-close:hover {
    background: #EF4444;
    border-color: #EF4444;
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.sip-modal-body, .modal-body {
    padding: 24px 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(90vh - 140px) !important;
    color: var(--text-main);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) rgba(2, 136, 209, 0.08);
}

/* Scrollbar jelas, elegan dan nyaman di-scroll */
.sip-modal-body::-webkit-scrollbar, .modal-body::-webkit-scrollbar {
    width: 8px !important;
}
.sip-modal-body::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track {
    background: rgba(2, 136, 209, 0.06) !important;
    border-radius: 6px;
}
.sip-modal-body::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.sip-modal-body::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark) !important;
}

/* MODAL SECTION CARDS (ENAK DILIHAT & TERORGANISIR) */
.modal-section-card {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    transition: all 0.25s ease;
}

[data-theme="dark"] .modal-section-card,
body.dark-mode .modal-section-card {
    background: #111C30;
    border-color: #1E3A5F;
}

.modal-section-card:hover {
    border-color: #BAE6FD;
    box-shadow: 0 4px 18px rgba(2, 136, 209, 0.07);
}

.modal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #E2E8F0;
}

[data-theme="dark"] .modal-section-header,
body.dark-mode .modal-section-header {
    border-bottom-color: #1E3A5F;
}

.modal-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 800;
    color: #01579B;
    letter-spacing: 0.2px;
}

[data-theme="dark"] .modal-section-title,
body.dark-mode .modal-section-title {
    color: #38BDF8;
}

.modal-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #E0F2FE;
    color: #0288D1;
    font-size: 14.5px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(2, 136, 209, 0.12);
}

[data-theme="dark"] .modal-section-badge,
body.dark-mode .modal-section-badge {
    background: #0C4A6E;
    color: #7DD3FC;
}

.modal-section-subtitle {
    font-size: 11.5px;
    color: var(--text-light);
    font-weight: 500;
}

.sip-modal-footer, .modal-footer {
    background: var(--bg-card-header);
    border-top: 1.5px solid var(--border-color);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex-shrink: 0 !important;
}

.modal-footer-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-light);
    font-weight: 500;
    line-height: 1.4;
}

.modal-footer-hint i {
    font-size: 15px;
    color: var(--primary);
    flex-shrink: 0;
}

.modal-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

/* FORM ELEMENTS */
.form-group {
    margin-bottom: 14px;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    border: 1.5px solid var(--border-blue);
    border-radius: var(--radius-sm);
    background-color: #FFFFFF;
    color: var(--text-main);
    outline: none;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.15);
}

/* ====================================================================
   PREMIUM MODERN SELECT STYLES (SIPRIJA DESIGN SYSTEM)
   ==================================================================== */
.form-select,
select:not([multiple]):not(.native-select) {
    width: 100%;
    height: 42px;
    padding: 8px 38px 8px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: #1E293B;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%230288D1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    border: 1.5px solid #CBD5E1;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-select:hover:not(:disabled),
select:not([multiple]):not(.native-select):hover:not(:disabled) {
    border-color: #0288D1;
    background-color: #F8FAFC;
    box-shadow: 0 3px 8px rgba(2, 136, 209, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2301579B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-select:focus,
select:not([multiple]):not(.native-select):focus {
    border-color: #0288D1;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3.5px rgba(2, 136, 209, 0.18), 0 2px 5px rgba(0, 0, 0, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 12.5L10 7.5L15 12.5' stroke='%230288D1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-select:disabled,
select:not([multiple]):not(.native-select):disabled {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    opacity: 0.85;
}

/* Custom Optgroup & Option Styles */
.form-select optgroup,
select optgroup {
    font-weight: 800;
    font-size: 11.5px;
    color: #0288D1;
    background: #F8FAFC;
    padding: 8px 10px;
    letter-spacing: 0.4px;
}

.form-select option,
select option {
    font-weight: 500;
    font-size: 13px;
    color: #1E293B;
    background: #FFFFFF;
    padding: 9px 12px;
}

.form-select option:checked,
select option:checked {
    font-weight: 700;
    background-color: #E0F2FE;
    color: #0288D1;
}

/* Form Select Compact / Small Variant (Untuk Filter & Tabel) */
.form-select-sm,
.sip-filter-select,
.filter-select {
    height: 35px !important;
    padding: 5px 32px 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    background-size: 14px 14px !important;
    background-position: right 10px center !important;
}

/* ====================================================================
   SIPRIJA ULTRA-MODERN CUSTOM SELECT SUITE (SIPSELECT)
   Tampilan Dropdown & Options Popover Modern, Glassmorphic & Keren
   ==================================================================== */
.sip-select-native-hidden {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    top: 50% !important;
    left: 20px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.sip-select-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    font-family: inherit;
    display: block;
    vertical-align: middle;
}

.sip-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: 6px 12px;
    background-color: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1E293B;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.sip-select-trigger:hover {
    border-color: #0288D1;
    background-color: #F8FAFC;
    box-shadow: 0 2px 8px rgba(2, 136, 209, 0.12);
}

.sip-select-wrapper.is-open .sip-select-trigger,
.sip-select-trigger:focus-visible {
    border-color: #0288D1;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.18), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.sip-select-wrapper.is-invalid .sip-select-trigger {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.sip-select-wrapper.is-disabled .sip-select-trigger {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.85;
}

.sip-select-label-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sip-select-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.sip-select-badge-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: #E0F2FE;
    color: #0288D1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sip-select-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    color: #0288D1;
    font-size: 11px;
    font-weight: 800;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.sip-select-wrapper.is-open .sip-select-chevron {
    transform: rotate(180deg);
}

/* Custom Dropdown Popover (Floating Portal di depan seluruh Card - Full Edge-to-Edge) */
.sip-select-dropdown {
    position: fixed;
    background: #FFFFFF;
    border: 1.5px solid #0288D1;
    border-radius: 9px;
    box-shadow: 0 14px 34px rgba(2, 136, 209, 0.22), 0 4px 14px rgba(0, 0, 0, 0.08);
    padding: 0 !important;
    z-index: 999999999 !important;
    display: none;
    opacity: 1;
    overflow: hidden;
    animation: sipSelectPopIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes sipSelectPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Options List & Items - Mengisi Penuh 100% Lebar Tanpa Spasi Kosong */
.sip-select-options-list {
    max-height: 230px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 !important;
    margin: 0 !important;
}

.sip-select-options-list::-webkit-scrollbar {
    width: 5px;
}

.sip-select-options-list::-webkit-scrollbar-track {
    background: #F1F5F9;
}

.sip-select-options-list::-webkit-scrollbar-thumb {
    background: #BAE6FD;
    border-radius: 4px;
}

.sip-select-options-list::-webkit-scrollbar-thumb:hover {
    background: #0288D1;
}

/* Optgroup Header */
.sip-optgroup-group {
    margin: 0;
    padding: 0;
}

.sip-optgroup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    margin: 0;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0288D1;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    width: 100%;
    box-sizing: border-box;
}

.sip-optgroup-group:first-child .sip-optgroup-header {
    border-top: none;
}

/* Option Items (Penuh Edge-to-Edge, Enak Dilihat & Nyaman Dipilih) */
.sip-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 12.5px;
    font-weight: 500;
    color: #1E293B;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.sip-select-option:last-child {
    border-bottom: none;
}

.sip-select-option:hover {
    background-color: #F0F9FF;
    color: #0288D1;
}

.sip-select-option.is-selected {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    color: #0288D1;
    font-weight: 700;
}

.sip-select-option.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.sip-option-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sip-option-main-title {
    line-height: 1.35;
    font-size: 12.5px;
    word-break: break-word;
}

.sip-option-sub-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #0369A1;
    background: rgba(2, 136, 209, 0.1);
    padding: 1px 6px;
    border-radius: 3px;
    align-self: flex-start;
    margin-top: 2px;
}

.sip-select-option.is-selected .sip-option-sub-badge {
    background: rgba(2, 136, 209, 0.2);
    color: #01579B;
}

.sip-option-check-icon {
    font-size: 14px;
    color: #0288D1;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sip-select-option.is-selected .sip-option-check-icon {
    opacity: 1;
    transform: scale(1);
}

.sip-option-icon {
    font-size: 15px;
    color: var(--primary, #0288D1);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sip-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--primary, #0288D1);
}

/* Compact Variant (Filter Tabel / Bilah Filter) */
.sip-select-wrapper.is-sm .sip-select-trigger {
    min-height: 32px;
    height: 32px;
    padding: 3px 8px;
    font-size: 11.5px;
    border-radius: 6px;
}

.sip-select-wrapper.is-sm .sip-select-chevron {
    font-size: 10.5px;
    margin-left: 4px;
}

/* Pastikan Parent Card / Modal-section-card Berada di Bawah Portal / Elevasi Terjaga */
.sip-has-open-select,
.modal-section-card:has(.sip-select-wrapper.is-open),
.card:has(.sip-select-wrapper.is-open) {
    z-index: 99999 !important;
    position: relative !important;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 850px) {
    .form-row-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   SIPRIJA COMPACT ACTION DROPDOWN SYSTEM (ALL TABLES)
   Mengubah tombol aksi berjejer menjadi 1 tombol dropdown elegan
   ==================================================================== */
.sip-action-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.sip-action-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: #0288D1;
    background: #FFFFFF;
    border: 1.5px solid #BAE6FD;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(2, 136, 209, 0.08);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.sip-action-trigger i {
    font-size: 10px;
    transition: transform 0.22s ease;
}

.sip-action-trigger:hover {
    background: #0288D1;
    color: #FFFFFF;
    border-color: #0288D1;
    box-shadow: 0 3px 8px rgba(2, 136, 209, 0.25);
}

.sip-action-dropdown.is-open .sip-action-trigger {
    background: #01579B;
    color: #FFFFFF;
    border-color: #01579B;
    box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.2);
}

.sip-action-dropdown.is-open .sip-action-trigger i {
    transform: rotate(180deg);
}

.sip-action-dropdown.is-open .sip-action-menu {
    display: flex !important;
}

.sip-action-menu {
    display: none;
    flex-direction: column;
    min-width: 175px;
    max-width: 240px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 4px;
    z-index: 99999999 !important;
    animation: sipActionPopIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

@keyframes sipActionPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.sip-action-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: transparent;
    border: none;
    border-radius: 6px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sip-action-item i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.sip-action-item:hover {
    background-color: #F0F9FF;
    color: #0288D1;
    transform: translateX(2px);
}

.sip-action-item.text-danger {
    color: #EF4444;
}

.sip-action-item.text-danger:hover {
    background-color: #FEF2F2;
    color: #DC2626;
}

.sip-action-divider {
    height: 1px;
    background: #E2E8F0;
    margin: 3px 0;
}

/* Dark Mode Support for Action Dropdown */
[data-theme="dark"] .sip-action-trigger {
    background: #1E293B;
    color: #38BDF8;
    border-color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .sip-action-trigger:hover {
    background: #0288D1;
    color: #FFFFFF;
    border-color: #0288D1;
    box-shadow: 0 3px 10px rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .sip-action-dropdown.is-open .sip-action-trigger {
    background: #0288D1;
    color: #FFFFFF;
    border-color: #0288D1;
}

[data-theme="dark"] .sip-action-menu {
    background: #0F172A;
    border-color: #334155;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .sip-action-item {
    color: #E2E8F0;
}

[data-theme="dark"] .sip-action-item:hover {
    background: #1E293B;
    color: #38BDF8;
}

[data-theme="dark"] .sip-action-divider {
    background: #334155;
}

[data-theme="dark"] .sip-action-item.text-danger {
    color: #F87171;
}

[data-theme="dark"] .sip-action-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

/* ====================================================================
   OFFICIAL SINGLE-LINE COMPACT FOOTER
   ==================================================================== */
.sip-footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    padding: 14px 28px;
    margin-top: auto;
    color: var(--text-light);
    transition: var(--transition);
}

.sip-footer-single {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12.5px;
    text-align: center;
    line-height: 1.5;
}

.sip-footer-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    flex-shrink: 0;
}

.sip-footer-brand-title {
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 0.3px;
}

[data-theme="dark"] .sip-footer-brand-title {
    color: #7DD3FC;
}

.sip-footer-text {
    font-weight: 600;
    color: var(--text-main);
}

.sip-footer-sub {
    color: var(--text-muted);
}

.sip-footer-copy {
    color: var(--text-light);
    font-size: 12px;
}

.sip-footer-separator {
    color: var(--border-color);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

[data-theme="dark"] .sip-footer-separator {
    color: var(--border-blue);
}

/* ====================================================================
   STAT METRIC GRID & CARDS (.stat-grid & .stat-card)
   ==================================================================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

.stat-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: var(--transition);
    cursor: pointer;
    user-select: none;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(2, 136, 209, 0.12);
    border-color: var(--primary-light);
}

.stat-card.active-filter {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.22);
    background: var(--primary-soft);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-content h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.stat-content p {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

/* ====================================================================
   TABLE ACTION BUTTONS & FILTER PILLS
   ==================================================================== */
.sip-action-group,
.sip-action-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    vertical-align: middle;
}

.sip-action-subgroup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sip-action-divider {
    width: 1.5px;
    height: 18px;
    background: #CBD5E1;
    margin: 0 3px;
    flex-shrink: 0;
    border-radius: 1px;
    opacity: 0.85;
}

[data-theme="dark"] .sip-action-divider {
    background: #475569;
}

.sip-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    padding: 0;
}

.sip-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.sip-action-btn.btn-edit:hover {
    background: #E0F2FE;
    color: #0288D1;
    border-color: #BAE6FD;
}

.sip-action-btn.btn-reset:hover {
    background: #FEF3C7;
    color: #D97706;
    border-color: #FDE68A;
}

.sip-action-btn.btn-delete:hover {
    background: #FEE2E2;
    color: #DC2626;
    border-color: #FECACA;
}

.sip-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sip-filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sip-filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

.sip-filter-pill.active {
    background: var(--primary);
    color: #FFFFFF !important;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(2, 136, 209, 0.3);
}

/* ====================================================================
   DARK MODE COMPONENT OVERRIDES
   ==================================================================== */
[data-theme="dark"] .sip-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sip-card:hover {
    border-color: var(--border-blue);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .stat-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .stat-card h3 {
    color: #F1F5F9;
}

[data-theme="dark"] .stat-card p {
    color: #94A3B8;
}

[data-theme="dark"] .form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-main);
}

[data-theme="dark"] .form-control:focus {
    border-color: #38BDF8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

[data-theme="dark"] .form-select,
[data-theme="dark"] select:not([multiple]):not(.native-select) {
    background-color: #1E293B;
    border-color: #334155;
    color: #F1F5F9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2338BDF8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .form-select:hover:not(:disabled),
[data-theme="dark"] select:not([multiple]):not(.native-select):hover:not(:disabled) {
    background-color: #0F172A;
    border-color: #38BDF8;
    box-shadow: 0 3px 10px rgba(56, 189, 248, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%237DD3FC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .form-select:focus,
[data-theme="dark"] select:not([multiple]):not(.native-select):focus {
    background-color: #0F172A;
    border-color: #38BDF8;
    box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 12.5L10 7.5L15 12.5' stroke='%2338BDF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] select:not([multiple]):not(.native-select):disabled {
    background-color: #0F172A !important;
    border-color: #1E293B !important;
    color: #64748B !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .form-select optgroup,
[data-theme="dark"] select optgroup {
    background: #0F172A;
    color: #38BDF8;
}

[data-theme="dark"] .form-select option,
[data-theme="dark"] select option {
    background: #1E293B;
    color: #F1F5F9;
}

[data-theme="dark"] .form-select option:checked,
[data-theme="dark"] select option:checked {
    background: #0369A1;
    color: #FFFFFF;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: #1E293B;
    border-color: #334155;
    color: #F1F5F9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2338BDF8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select:hover {
    border-color: #38BDF8;
    background-color: #0F172A;
}

/* SipSelect Dark Mode */
[data-theme="dark"] .sip-select-trigger {
    background-color: #1E293B;
    border-color: #334155;
    color: #F8FAFC;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .sip-select-trigger:hover {
    border-color: #38BDF8;
    background-color: #0F172A;
    box-shadow: 0 3px 10px rgba(56, 189, 248, 0.15);
}

[data-theme="dark"] .sip-select-wrapper.is-open .sip-select-trigger {
    border-color: #38BDF8;
    background-color: #0F172A;
    box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .sip-select-chevron {
    color: #38BDF8;
}

[data-theme="dark"] .sip-select-dropdown {
    background: #0F172A;
    border-color: #38BDF8;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    padding: 0 !important;
}

[data-theme="dark"] .sip-optgroup-header {
    background: #111C30;
    color: #38BDF8;
    border-top-color: #1E3A5F;
    border-bottom-color: #1E3A5F;
}

[data-theme="dark"] .sip-select-option {
    color: #F1F5F9;
    border-bottom-color: #1E293B;
}

[data-theme="dark"] .sip-select-option:hover {
    background-color: #1E293B;
    color: #38BDF8;
}

[data-theme="dark"] .sip-select-option.is-selected {
    background: rgba(56, 189, 248, 0.2);
    color: #38BDF8;
}

[data-theme="dark"] .sip-option-sub-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #7DD3FC;
}

[data-theme="dark"] .sip-option-check-icon {
    color: #38BDF8;
}

[data-theme="dark"] .sip-select-badge-tag {
    background: rgba(56, 189, 248, 0.2);
    color: #38BDF8;
}

[data-theme="dark"] .sip-select-options-list::-webkit-scrollbar-track {
    background: #1E293B;
}

[data-theme="dark"] .sip-select-options-list::-webkit-scrollbar-thumb {
    background: #0288D1;
}

[data-theme="dark"] .form-label {
    color: #7DD3FC;
}

[data-theme="dark"] .sip-table {
    background-color: var(--bg-card);
    color: var(--text-main);
}

[data-theme="dark"] .sip-table th {
    background-color: var(--bg-card-header);
    color: #94A3B8;
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sip-table td {
    border-bottom-color: var(--border-color);
    color: var(--text-main);
}

[data-theme="dark"] .sip-table tr:hover td {
    background-color: var(--table-hover);
}

[data-theme="dark"] .modal-box,
[data-theme="dark"] .sip-modal-box {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .sip-modal-header {
    background: var(--bg-card-header);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer,
[data-theme="dark"] .sip-modal-footer {
    background: var(--bg-card-header);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .modal-title,
[data-theme="dark"] .sip-modal-title {
    color: #F1F5F9;
}

[data-theme="dark"] .mini-box {
    background: var(--bg-card-header);
    border-color: var(--border-color);
}

[data-theme="dark"] .mini-box-title {
    color: #7DD3FC;
}

[data-theme="dark"] .mini-box-list li {
    color: #CBD5E1;
}

[data-theme="dark"] .competency-card {
    background: linear-gradient(135deg, #0D2235 0%, #102A45 100%);
    border-color: #1E3A5F;
}

[data-theme="dark"] .training-program-card {
    background: linear-gradient(135deg, #092338 0%, #061B2E 100%);
    border-color: #1E3A5F;
}

[data-theme="dark"] .box-highlight-yellow {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #FDE68A;
}

[data-theme="dark"] .box-highlight-blue {
    background: rgba(2, 136, 209, 0.15);
    border-color: rgba(56, 189, 248, 0.35);
    color: #BAE6FD;
}

[data-theme="dark"] .box-highlight-purple {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(167, 139, 250, 0.35);
    color: #DDD6FE;
}

[data-theme="dark"] .box-highlight-orange {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(251, 146, 60, 0.35);
    color: #FED7AA;
}

[data-theme="dark"] .validation-box-container {
    background: var(--bg-card-header);
    border-color: var(--border-color);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-main);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
}


/* RESPONSIVE TOGGLE FOR SIDEBAR */
@media (max-width: 992px) {
    .sip-sidebar {
        transform: translateX(-100%);
    }
    .sip-sidebar.open {
        transform: translateX(0);
    }
    .sip-main-wrapper {
        margin-left: 0;
        width: 100%;
    }
}

/* Custom Scrollbar for Sidebar */
.sip-sidebar::-webkit-scrollbar {
    width: 6px;
}
.sip-sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
}
.sip-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
.sip-sidebar::-webkit-scrollbar-thumb:hover {
    background: #38BDF8;
}

@media (max-width: 850px) {
    .profile-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* RESPONSIVE TOPBAR & HEADER ADJUSTMENTS */
@media (max-width: 1200px) {
    .sip-topbar-inst {
        max-width: 180px;
    }
}

@media (max-width: 992px) {
    .sip-topbar {
        padding: 0 16px;
        height: 64px;
    }
    .sip-topbar-left {
        gap: 12px;
        margin-right: 12px;
    }
    .sip-topbar-inst,
    .sip-topbar-divider-dot,
    .sip-topbar-page-label {
        display: none;
    }
    .sip-topbar-title h1 {
        font-size: 14px;
    }
    .sip-topbar-right {
        gap: 8px;
    }
    .sip-user-info {
        max-width: 130px;
    }
}

@media (max-width: 768px) {
    .sip-topbar {
        padding: 0 12px;
        height: 60px;
    }
    .theme-text-label,
    .status-text-label {
        display: none;
    }
    .sip-theme-toggle {
        padding: 0 10px;
        height: 36px;
    }
    .sip-status-indicator {
        padding: 0 8px;
        height: 36px;
    }
    .sip-user-badge-btn {
        height: 36px;
        padding: 0 8px 0 5px;
        gap: 6px;
    }
    .sip-user-info {
        display: none;
    }
    .sip-dropdown-menu {
        right: -8px;
        width: 270px;
    }
    .hero-banner {
        padding: 18px 20px;
        gap: 14px;
    }
    .hero-title h2 {
        font-size: 18px;
    }
    .hero-title p {
        font-size: 12.5px;
    }
    .hero-stat-card {
        min-width: 76px;
        padding: 6px 10px;
    }
    .hero-stat-val {
        font-size: 17px;
    }
}

/* GIS PIN MARKERS */
.sip-bridge-marker {
    background: transparent !important;
    border: none !important;
}

.sip-gis-pin-wrapper {
    position: relative;
    width: 34px;
    height: 44px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sip-bridge-marker:hover .sip-gis-pin-wrapper {
    transform: translateY(-6px) scale(1.15);
    z-index: 99999 !important;
}

@keyframes sipPulseRadar {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.6);
        opacity: 0;
    }
}

.sip-pin-pulse {
    position: absolute;
    bottom: -4px;
    left: 17px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
    transform: translate(-50%, -50%);
    animation: sipPulseRadar 2s infinite ease-out;
    pointer-events: none;
}

/* ====================================================================
   FORM REQUIRED & OPTIONAL INDICATORS
   ==================================================================== */
.req-star {
    color: #EF4444;
    font-weight: 800;
    margin-left: 2px;
    font-size: 13.5px;
    line-height: 1;
}

.opt-badge {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    margin-left: 5px;
}

.form-req-notice {
    font-size: 12px;
    color: var(--text-muted);
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 8px;
    padding: 9px 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .form-req-notice {
    background: rgba(30, 41, 59, 0.6);
    border-color: #334155;
    color: #94A3B8;
}

/* ====================================================================
   SIDEBAR BRAND (RATA TENGAH) & DESKTOP COLLAPSE SYSTEM
   ==================================================================== */
.sip-sidebar-brand-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 74px;
    text-align: center;
    width: 100%;
}

.sip-sidebar-brand-wrapper .sip-sidebar-brand {
    padding: 0;
    border-bottom: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sip-sidebar-brand-wrapper .sip-sidebar-logo {
    display: block;
    margin: 0 auto;
}

/* Desktop Sidebar Collapsed State */
body.sidebar-collapsed .sip-sidebar {
    transform: translateX(-100%) !important;
}

body.sidebar-collapsed .sip-main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Mobile Sidebar Backdrop */
.sip-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 19, 37, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1045;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sip-sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

/* ====================================================================
   TOMBOL OTOMATIS KE ATAS (SCROLL TO TOP)
   ==================================================================== */
.sip-scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0288D1 0%, #014F86 100%);
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 24px rgba(2, 136, 209, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(18px) scale(0.85);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1040;
}

.sip-scroll-top-btn i {
    transition: transform 0.22s ease;
}

.sip-scroll-top-btn.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.sip-scroll-top-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 30px rgba(2, 136, 209, 0.6);
    background: linear-gradient(135deg, #039BE5 0%, #0288D1 100%);
}

.sip-scroll-top-btn:hover i {
    transform: translateY(-2px);
}

.sip-scroll-top-btn:active {
    transform: translateY(0) scale(0.95);
}

[data-theme="dark"] .sip-scroll-top-btn {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

/* ====================================================================
   BEAUTIFUL MODERN DIALOG & FLASH ALERTS (.sip-alert)
   ==================================================================== */
@keyframes sipAlertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sip-alert {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 22px;
    position: relative;
    border: 1.5px solid transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    animation: sipAlertSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sip-alert-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sip-alert-content {
    flex: 1;
    min-width: 0;
}

.sip-alert-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 3px;
    line-height: 1.3;
}

.sip-alert-desc {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.92;
}

.sip-alert-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: inherit;
    opacity: 0.55;
    padding: 0;
    line-height: 1;
    transition: all 0.2s ease;
    margin-left: 8px;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sip-alert-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
    transform: rotate(90deg);
}

/* Alert Success */
.sip-alert-success {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-color: #6EE7B7;
    color: #065F46;
}

.sip-alert-success .sip-alert-icon-badge {
    background: #10B981;
    color: #FFFFFF;
}

[data-theme="dark"] .sip-alert-success {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.6) 0%, rgba(6, 95, 70, 0.4) 100%);
    border-color: #059669;
    color: #A7F3D0;
}

/* Alert Danger / Error */
.sip-alert-danger {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border-color: #FCA5A5;
    color: #991B1B;
}

.sip-alert-danger .sip-alert-icon-badge {
    background: #EF4444;
    color: #FFFFFF;
}

[data-theme="dark"] .sip-alert-danger {
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.6) 0%, rgba(153, 27, 27, 0.4) 100%);
    border-color: #DC2626;
    color: #FECACA;
}

/* Alert Warning */
.sip-alert-warning {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border-color: #FCD34D;
    color: #92400E;
}

.sip-alert-warning .sip-alert-icon-badge {
    background: #F59E0B;
    color: #FFFFFF;
}

[data-theme="dark"] .sip-alert-warning {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.6) 0%, rgba(146, 64, 14, 0.4) 100%);
    border-color: #D97706;
    color: #FDE68A;
}

/* Alert Info */
.sip-alert-info {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border-color: #7DD3FC;
    color: #075985;
}

.sip-alert-info .sip-alert-icon-badge {
    background: #0288D1;
    color: #FFFFFF;
}

[data-theme="dark"] .sip-alert-info {
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.6) 0%, rgba(7, 89, 133, 0.4) 100%);
    border-color: #0288D1;
    color: #BAE6FD;
}

/* ======================================================= */
/* REUSABLE YEAR FILTER BAR                                */
/* ======================================================= */
/* REUSABLE YEAR FILTER BAR (ICON-RICH & HIGH-TECH)        */
/* ======================================================= */
.sip-year-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1.5px solid var(--border-blue);
    border-radius: 14px;
    padding: 12px 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
    gap: 14px;
    transition: var(--transition);
    position: relative;
}

[data-theme="dark"] .sip-year-filter-bar {
    background: #152238;
    border-color: #1E3A5F;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.sip-year-filter-bar:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--primary);
}

.year-filter-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.year-filter-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: 0.2px;
}

[data-theme="dark"] .year-filter-label {
    color: #38BDF8;
}

.year-filter-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(2, 136, 209, 0.12);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(2, 136, 209, 0.15);
    transition: transform 0.25s ease;
}

.sip-year-filter-bar:hover .year-filter-icon-badge {
    transform: scale(1.1) rotate(5deg);
}

[data-theme="dark"] .year-filter-icon-badge {
    background: rgba(56, 189, 248, 0.18);
    color: #38BDF8;
}

/* Custom Interactive Select Container with Dual Icons */
.year-select-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.year-select-icon {
    position: absolute;
    left: 12px;
    color: var(--primary);
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
    transition: transform 0.2s ease, color 0.2s ease;
}

.year-select-arrow {
    position: absolute;
    right: 12px;
    color: var(--text-light);
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
    transition: transform 0.25s ease, color 0.2s ease;
}

.year-select-container:hover .year-select-icon {
    transform: scale(1.15);
}

.year-select-container:hover .year-select-arrow {
    color: var(--primary);
}

.year-filter-select {
    min-width: 230px;
    font-size: 13px;
    font-weight: 700;
    padding: 8.5px 36px 8.5px 44px !important;
    border-radius: 10px;
    border: 1.5px solid #BAE6FD;
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(2, 136, 209, 0.08);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
}

[data-theme="dark"] .year-filter-select {
    background: #0F1A2E;
    border-color: #26456E;
    color: #F1F5F9;
}

.year-filter-select:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.18);
}

.year-filter-select:focus {
    border-color: #0288D1;
    box-shadow: 0 0 0 3.5px rgba(2, 136, 209, 0.22);
    outline: none;
}

.year-filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    border: 1.5px solid rgba(239, 68, 68, 0.28);
    color: #DC2626;
    text-decoration: none;
    transition: all 0.22s ease;
}

.year-filter-reset-btn:hover {
    background: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.year-filter-info {
    display: flex;
    align-items: center;
}

.year-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: rgba(2, 136, 209, 0.08);
    border: 1px solid rgba(2, 136, 209, 0.22);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

[data-theme="dark"] .year-filter-chip {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.25);
    color: #CBD5E1;
}

.year-filter-chip i {
    color: var(--primary);
    font-size: 14px;
}

/* ===== GIS UNIFIED CONTROL & LEGENDA CARD ===== */
.gis-unified-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-blue);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.gis-unified-card:hover {
    box-shadow: var(--shadow-card);
}
.gis-unified-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}
.gis-unified-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}
.gis-unified-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.35fr;
    gap: 24px;
    align-items: start;
}
.gis-unified-right {
    border-left: 1px solid var(--border-color);
    padding-left: 24px;
}
@media (max-width: 992px) {
    .gis-unified-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .gis-unified-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px dashed var(--border-color);
        padding-top: 16px;
    }
}
.gis-basemap-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.btn-basemap-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    background: var(--bg-body);
    border: 1.5px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-basemap-switch:hover {
    border-color: var(--primary);
    background: rgba(2, 136, 209, 0.08);
    color: var(--primary);
}
.btn-basemap-switch.active {
    background: linear-gradient(135deg, #0288D1, #01579B);
    border-color: #0288D1;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.35);
}
.gis-layers-toggle-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.gis-layer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}
.gis-layer-btn.active-rtrw {
    border-color: #0288D1;
    background: rgba(2, 136, 209, 0.1);
    color: #0288D1;
}
.gis-layer-btn.active-jalan {
    border-color: #E11D48;
    background: rgba(225, 29, 72, 0.1);
    color: #E11D48;
}
.gis-layer-btn.active-jembatan {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}
.gis-layer-btn.active-cluster {
    border-color: #6366F1;
    background: rgba(99, 102, 241, 0.12);
    color: #4F46E5;
}
.gis-layer-btn.active-heatmap {
    border-color: #F97316;
    background: rgba(249, 115, 22, 0.12);
    color: #EA580C;
}
.gis-layer-btn.active-measure {
    border-color: #0288D1;
    background: rgba(2, 136, 209, 0.12);
    color: #0288D1;
}
.gis-legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.gis-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
}
.gis-legend-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 10.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.22);
}

/* ====================================================================
   SIPRIJA ULTRA-RICH UI ANIMATIONS SUITE
   ==================================================================== */

/* 1. GIS Leaflet 3D Floating Photo Image Markers & Dynamic Radar System */
.sip-gis-marker-container {
    position: relative;
    width: 46px;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    perspective: 800px;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sip-gis-marker-container:hover {
    transform: translateY(-8px) scale(1.15);
    z-index: 99999 !important;
}

/* Floating Top Status Badge */
.sip-marker-badge {
    position: absolute;
    top: -12px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
    border: 1.5px solid #FFFFFF;
    display: flex;
    align-items: center;
    gap: 3px;
    animation: markerBadgeFloat 2.8s infinite ease-in-out;
    pointer-events: none;
    z-index: 10;
}

@keyframes markerBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.sip-badge-gold {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.55);
}

.sip-badge-emerald {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
}

.sip-badge-blue {
    background: linear-gradient(135deg, #0288D1, #01579B);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.45);
}

.sip-badge-red {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}

/* Modern Photo Pin Head */
.sip-photo-pin-head {
    position: relative;
    width: 44px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.32));
    transition: filter 0.25s ease;
}

.sip-gis-marker-container:hover .sip-photo-pin-head {
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
}

.sip-photo-frame {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 2.5px;
    background: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    position: relative;
    z-index: 2;
    transition: transform 0.25s ease;
}

.sip-gis-marker-container:hover .sip-photo-frame {
    transform: scale(1.05);
}

.sip-photo-img-wrap {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sip-photo-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Status Gradient Rings */
.pin-border-gold { background: linear-gradient(135deg, #F59E0B, #D97706); }
.pin-border-emerald { background: linear-gradient(135deg, #10B981, #059669); }
.pin-border-blue { background: linear-gradient(135deg, #0288D1, #01579B); }
.pin-border-red { background: linear-gradient(135deg, #EF4444, #DC2626); }

/* Downward Pointing Pin Tip */
.sip-photo-pin-pointer {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    margin-top: -3px;
    z-index: 1;
}

.pointer-gold { border-top: 10px solid #D97706; }
.pointer-emerald { border-top: 10px solid #059669; }
.pointer-blue { border-top: 10px solid #01579B; }
.pointer-red { border-top: 10px solid #DC2626; }

/* Status Icon Dot on Photo Rim */
.sip-photo-status-badge {
    position: absolute;
    bottom: 5px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    border: 1.5px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    z-index: 5;
    transition: transform 0.25s ease;
}

.sip-gis-marker-container:hover .sip-photo-status-badge {
    transform: scale(1.2);
}

/* Ground Anchor Radar Rings & Shadow */
.sip-marker-ground-anchor {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sip-marker-shadow {
    width: 18px;
    height: 6px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    filter: blur(2px);
    transition: all 0.25s ease;
}

.sip-gis-marker-container:hover .sip-marker-shadow {
    width: 12px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    filter: blur(3px);
}

/* Sonar Wave Rings on Ground */
.sip-radar-wave-1, .sip-radar-wave-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sip-radar-wave-1 {
    width: 24px;
    height: 24px;
    animation: markerRadarPing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.sip-radar-wave-2 {
    width: 24px;
    height: 24px;
    animation: markerRadarPing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite 0.75s;
}

@keyframes markerRadarPing {
    0% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0.9;
    }
    70% {
        transform: translate(-50%, -50%) scale(2.8);
        opacity: 0.15;
    }
    100% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0;
    }
}

.radar-gold { border: 2px solid #F59E0B; background: rgba(245, 158, 11, 0.25); }
.radar-emerald { border: 2px solid #10B981; background: rgba(16, 185, 129, 0.2); }
.radar-blue { border: 2px solid #0288D1; background: rgba(2, 136, 209, 0.2); }
.radar-red { border: 2px solid #EF4444; background: rgba(239, 68, 68, 0.25); }

/* ====================================================================
   COOL GLASSMORPHIC LEAFLET POPUP & CONTROL STYLES
   ==================================================================== */
/* Leaflet Zoom Control Top-Right */
.leaflet-control-zoom {
    border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    margin-top: 12px !important;
    margin-right: 12px !important;
}

[data-theme="dark"] .leaflet-control-zoom {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--primary-dark) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

[data-theme="dark"] .leaflet-control-zoom a {
    color: #38BDF8 !important;
}

.leaflet-control-zoom a:hover {
    background: rgba(2, 136, 209, 0.12) !important;
    color: var(--primary) !important;
}

.leaflet-control-zoom a:first-child {
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
}

[data-theme="dark"] .leaflet-control-zoom a:first-child {
    border-bottom-color: rgba(56, 189, 248, 0.2) !important;
}

/* Hilangkan outline kotak hitam pada Leaflet canvas, SVG paths, dan elemen interaktif saat diklik */
.leaflet-container,
.leaflet-container:focus,
.leaflet-container *:focus,
.leaflet-pane svg,
.leaflet-pane svg path,
.leaflet-interactive,
.leaflet-interactive:focus,
path.leaflet-interactive:focus,
.leaflet-marker-icon:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Pastikan pane popup Leaflet berada di atas HUD card dan tidak tertutup */
.leaflet-popup-pane {
    z-index: 1050 !important;
}

.leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(2, 136, 209, 0.1) !important;
    overflow: hidden !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    line-height: 1.4 !important;
}

.leaflet-popup-tip-container {
    margin-top: -1px !important;
}

.leaflet-popup-tip {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.sip-popup-card {
    min-width: min(280px, 86vw);
    max-width: min(320px, 90vw);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-main);
}

.sip-popup-header-img {
    position: relative;
    height: 125px;
    overflow: hidden;
    background: #E2E8F0;
}

.sip-popup-header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sip-popup-card:hover .sip-popup-header-img img {
    transform: scale(1.06);
}

.sip-popup-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(15,23,42,0.75) 100%);
    display: flex;
    align-items: flex-end;
    padding: 10px 12px;
}

.sip-popup-img-title {
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.sip-popup-badge-top {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #FFF;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
}

.sip-popup-body {
    padding: 12px 14px;
}

.sip-popup-region {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.sip-popup-region img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.sip-popup-region-text {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary-dark);
}

.sip-popup-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    font-size: 11px;
    background: rgba(241, 245, 249, 0.6);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    margin-bottom: 10px;
}

.sip-popup-spec-item {
    display: flex;
    flex-direction: column;
}

.sip-popup-spec-label {
    font-size: 9.5px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sip-popup-spec-val {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-main);
}

.sip-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.sip-popup-cost {
    font-size: 13px;
    font-weight: 800;
    color: #059669;
}


/* 2. Pipeline Flow Glowing Light Pulse */
@keyframes flowGlow {
    0%, 100% {
        color: #0288D1;
        transform: translateX(0);
        text-shadow: 0 0 0 rgba(2, 136, 209, 0);
    }
    50% {
        color: #00E5FF;
        transform: translateX(4px);
        text-shadow: 0 0 12px rgba(0, 229, 255, 0.85);
    }
}

.stepper-arrow {
    display: inline-block;
    animation: flowGlow 2.2s infinite ease-in-out;
}

.pipeline-stepper .stepper-item {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pipeline-stepper .stepper-item:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 16px rgba(2, 136, 209, 0.2);
    border-color: #0288D1;
}

/* 3. Slow Continuous Feedback Loop Rotation */
@keyframes feedbackSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.feedback-spin-icon {
    display: inline-block;
    animation: feedbackSpin 14s linear infinite;
}

/* 4. Button Click Micro-Ripple */
.btn, .sip-btn {
    position: relative;
    overflow: hidden;
}

.sip-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: sipRippleAnim 0.6s linear;
    pointer-events: none;
}

@keyframes sipRippleAnim {
    to {
        transform: scale(4.5);
        opacity: 0;
    }
}

/* 5. Shimmer Effect for Leaderboard Prioritas #1 */
@keyframes shimmerEffect {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer-gold {
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.4) 0%, rgba(253, 230, 138, 0.85) 50%, rgba(254, 243, 199, 0.4) 100%) !important;
    background-size: 200% 100% !important;
    animation: shimmerEffect 4s infinite linear;
}

.shimmer-badge {
    position: relative;
    overflow: hidden;
}

.shimmer-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmerSlide 3s infinite;
}

@keyframes shimmerSlide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 6. Toast Notification Animated System */
.sip-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.sip-toast {
    pointer-events: auto;
    min-width: 320px;
    max-width: 440px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
    border-left: 5px solid #0288D1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.sip-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.sip-toast.hide {
    transform: translateX(120%);
    opacity: 0;
}

.sip-toast-success { border-left-color: #10B981; }
.sip-toast-danger  { border-left-color: #EF4444; }
.sip-toast-warning { border-left-color: #F59E0B; }
.sip-toast-info    { border-left-color: #0288D1; }

.sip-toast-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.sip-toast-content {
    flex: 1;
}

.sip-toast-title {
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 2px;
}

.sip-toast-msg {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.sip-toast-close {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: var(--transition);
}

.sip-toast-close:hover {
    color: var(--text-main);
    background: rgba(0,0,0,0.06);
}

/* 7. Hover elevation micro-animations */
.hero-stat-card {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.hero-stat-card:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.hero-stat-val {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-stat-card:hover .hero-stat-val {
    transform: scale(1.12);
}

/* ====================================================================
   8. CLIENT-SIDE ANTI-SELECTION & ANTI-DRAG SECURITY HARDENING
   ==================================================================== */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Tetap izinkan seleksi & pengetikan normal pada input form */
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Cegah dragging gambar aset aplikasi */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ====================================================================
   9. GLOBAL RESPONSIVE DESIGN SYSTEM (ALL DEVICES: DESKTOP, TABLET, MOBILE)
   ==================================================================== */

/* Global Responsive Utilities & Fluid Media */
.table-responsive,
.sip-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Jika table-responsive membungkus DataTables, biarkan overflow visible
   karena .sip-dt-table yang menangani scroll horisontal mandiri */
.table-responsive:has(.dataTables_wrapper),
.table-responsive:has(.sip-dt-table) {
    overflow-x: visible !important;
    overflow: visible !important;
}

.table-responsive table,
.sip-table-container table,
table.sip-datatable,
table.dataTable {
    width: 100% !important;
    min-width: 680px;
}

/* Custom Scrollbar for Smooth Touch & Mobile Scrolling */
.table-responsive::-webkit-scrollbar,
.sip-table-container::-webkit-scrollbar,
.sip-dt-table::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.sip-table-container::-webkit-scrollbar-thumb,
.sip-dt-table::-webkit-scrollbar-thumb {
    background: rgba(2, 136, 209, 0.35);
    border-radius: 4px;
}

/* GIS Map Responsive Grid & Cards */
.gis-map-sidebar-grid {
    display: grid;
    grid-template-columns: 2.8fr 1.2fr;
    gap: 20px;
    margin-bottom: 24px;
    align-items: start;
}

.gis-map-card {
    height: 680px;
    min-height: 680px;
}

.gis-sidebar-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    height: 680px;
    margin-bottom: 0;
}

.gis-mobile-view-toggle {
    display: none;
}

/* --------------------------------------------------------------------
   BREAKPOINT: LAPTOP & SMALL DESKTOP (max-width: 1200px)
   -------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .sip-container {
        padding: 20px 24px;
    }

    .flow-layout-grid {
        grid-template-columns: 1.6fr 1fr;
        gap: 18px;
    }
}

/* --------------------------------------------------------------------
   BREAKPOINT: TABLET & IPAD (max-width: 992px)
   Off-Canvas Mobile Drawer Sidebar + 100% Main Content
   -------------------------------------------------------------------- */
@media (max-width: 992px) {
    /* Off-canvas mobile drawer sidebar */
    .sip-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35);
    }

    .sip-sidebar.open {
        transform: translateX(0);
    }

    /* Main wrapper expands to 100% full width */
    .sip-main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Container padding */
    .sip-container {
        padding: 18px 18px;
    }

    /* Hero Banner Stacks */
    .hero-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px 22px;
    }

    .hero-stats-row {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 8px;
    }

    .hero-stat-card {
        min-width: unset;
    }

    /* GIS Layout Stacks on Tablet */
    .gis-map-sidebar-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gis-map-card {
        height: 520px;
        min-height: 480px;
    }

    .gis-sidebar-card {
        height: auto !important;
        max-height: 500px !important;
        padding: 16px !important;
    }

    .flow-layout-grid {
        grid-template-columns: 1fr;
    }

    .mini-boxes-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------
   BREAKPOINT: MOBILE PHONES & PHABLETS (max-width: 768px)
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Topbar compact layout */
    .sip-topbar {
        padding: 0 14px;
        height: 62px;
    }

    .sip-topbar-left {
        gap: 10px;
        margin-right: 10px;
    }

    .sip-topbar-toggle {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .sip-topbar-inst {
        display: none !important;
    }

    .sip-topbar-title h1 {
        font-size: 13.5px;
        max-width: 200px;
    }

    .sip-topbar-pill {
        font-size: 9px;
        padding: 1px 6px;
    }

    .theme-text-label {
        display: none !important;
    }

    .sip-theme-toggle {
        padding: 0;
        width: 36px;
        height: 36px;
        justify-content: center;
        border-radius: 8px;
    }

    .sip-user-info {
        display: none !important;
    }

    .sip-user-badge-btn {
        padding: 4px;
        gap: 4px;
    }

    .sip-dropdown-arrow {
        display: none;
    }

    /* Dropdown position on mobile */
    .sip-dropdown-menu {
        right: -8px;
        width: 270px;
    }

    /* Container padding */
    .sip-container {
        padding: 14px 12px;
    }

    /* Hero Banner Mobile */
    .hero-title h2 {
        font-size: 17px;
    }

    .hero-title p {
        font-size: 12.5px;
    }

    .hero-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* DataTables Controls Pasti Satu Baris & Satu Garis Sejajar */
    .sip-dt-toolbar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }

    .sip-dt-toolbar .dataTables_length,
    .dataTables_wrapper .dataTables_length {
        width: auto !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
    }

    .sip-dt-toolbar .dataTables_length label,
    .dataTables_wrapper .dataTables_length label {
        font-size: 11.5px !important;
        gap: 4px !important;
        height: 36px !important;
        line-height: 36px !important;
    }

    .sip-dt-toolbar .dataTables_length select,
    .dataTables_wrapper .dataTables_length select {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 0 26px 0 8px !important;
    }

    .sip-dt-toolbar .dataTables_filter,
    .dataTables_wrapper .dataTables_filter {
        width: auto !important;
        margin: 0 !important;
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
    }

    .sip-dt-toolbar .dataTables_filter label,
    .dataTables_wrapper .dataTables_filter label {
        font-size: 11.5px !important;
        gap: 4px !important;
        height: 36px !important;
        line-height: 36px !important;
    }

    .sip-dt-toolbar .dataTables_filter input,
    .dataTables_wrapper .dataTables_filter input {
        width: 150px !important;
        max-width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
        margin-top: 10px !important;
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* GIS Map on Mobile */
    .gis-mobile-view-toggle {
        display: flex !important;
        gap: 8px;
        margin-bottom: 14px;
        width: 100%;
    }

    .gis-mobile-toggle-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 14px;
        font-size: 12.5px;
        font-weight: 700;
        border-radius: 10px;
        background: var(--bg-card);
        border: 1.5px solid var(--border-color);
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s ease;
        min-height: 42px;
        touch-action: manipulation;
    }

    .gis-mobile-toggle-btn.active {
        background: linear-gradient(135deg, #0288D1, #01579B);
        border-color: #0288D1;
        color: #FFFFFF;
        box-shadow: 0 4px 12px rgba(2, 136, 209, 0.35);
    }

    .gis-map-card {
        height: 440px !important;
        min-height: 380px !important;
        border-radius: 14px !important;
    }

    .gis-sidebar-card {
        height: auto !important;
        max-height: 440px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .gis-basemap-row,
    .gis-layers-toggle-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 6px;
    }

    .btn-basemap-switch,
    .gis-layer-btn {
        width: 100%;
        justify-content: center;
        padding: 9px 10px;
        font-size: 11px;
    }

    /* Filter Bars on Mobile */
    .sip-year-filter-bar,
    .year-filter-left {
        flex-direction: column;
        align-items: stretch;
    }

    .year-filter-select {
        width: 100% !important;
    }

    /* Grid & Columns Stacking */
    .mini-boxes-3,
    .pipeline-stepper {
        grid-template-columns: 1fr;
    }

    .stepper-arrow {
        display: none;
    }

    /* Modals & Dialogs on Mobile */
    .modal-overlay {
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sip-modal,
    .modal-box,
    .sip-modal-content,
    .modal-dialog,
    .sip-lcd-modal {
        width: 100% !important;
        max-width: 96vw !important;
        max-height: 94vh !important;
        border-radius: 16px !important;
        margin: auto !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    }

    .sip-modal-header,
    .modal-header {
        padding: 14px 16px !important;
        gap: 10px !important;
    }

    .sip-modal-header h3,
    .modal-title {
        font-size: 14px !important;
        line-height: 1.35 !important;
        gap: 8px !important;
    }

    .sip-modal-close,
    .modal-close {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 18px !important;
        border-radius: 8px !important;
    }

    .sip-modal-body,
    .modal-body {
        padding: 14px 14px !important;
        max-height: calc(94vh - 128px) !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-section-card {
        padding: 12px 12px !important;
        margin-bottom: 14px !important;
        border-radius: 10px !important;
    }

    .modal-section-header {
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .modal-section-title {
        font-size: 12.5px !important;
        gap: 8px !important;
    }

    .modal-section-badge {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    .sip-modal-footer,
    .modal-footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .modal-footer-hint {
        font-size: 11px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .modal-footer-actions {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }

    .modal-footer-actions > button,
    .modal-footer-actions > a,
    .modal-footer-actions > .btn,
    .modal-footer-actions > .sip-btn,
    .modal-footer-actions .btn-icon-lg {
        flex: 1 1 50% !important;
        min-height: 44px !important;
        width: auto !important;
        justify-content: center !important;
        font-size: 13px !important;
        text-align: center !important;
        border-radius: 10px !important;
    }

    /* Form Controls & iOS Safari Auto-Zoom Prevention */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="file"],
    select,
    textarea {
        font-size: 16px !important; /* Mencegah auto-zoom Safari iOS pada layar iPhone */
        min-height: 44px !important;
        box-sizing: border-box !important;
    }

    .form-label {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    /* DataTables & Table Horizontal Scroll */
    .table-responsive,
    .sip-table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
    }

    .sip-datatable th, .sip-datatable td {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }

    .sip-action-btns, .btn-action-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .sip-action-btns .sip-action-btn,
    .btn-action-icon {
        min-width: 36px !important;
        min-height: 36px !important;
        width: 36px !important;
        height: 36px !important;
    }

    /* GIS Map & Filters on Mobile */
    .gis-filter-bar-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .gis-filter-select {
        width: 100% !important;
        min-width: unset !important;
        flex: 1 1 100% !important;
    }

    .gis-filter-reset-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 40px !important;
    }

    /* HUD Top-Left (Monitoring Spasial Summary) */
    .hud-top-left {
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        bottom: auto !important;
        max-width: calc(100% - 64px) !important;
        width: auto !important;
        padding: 0 !important;
    }

    .hud-top-left .hud-header {
        padding: 8px 10px !important;
    }

    .hud-top-left.collapsed .hud-body {
        display: none !important;
    }

    /* HUD Bottom-Left (Live Inspector Card saat titik diklik) */
    .hud-bottom-left {
        bottom: 56px !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        max-width: calc(100% - 20px) !important;
        width: auto !important;
        padding: 0 !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;
    }

    /* HUD Bottom-Right (Quick Telemetry & Tools) */
    .hud-bottom-right {
        bottom: 10px !important;
        right: 10px !important;
        left: auto !important;
        top: auto !important;
        padding: 6px 8px !important;
        gap: 6px !important;
        max-width: calc(100% - 20px) !important;
    }

    .hud-bottom-right #hudLiveCoords {
        display: none !important;
    }

    .hud-tool-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 15px !important;
    }

    .hud-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .hud-stat-item {
        padding: 4px 6px !important;
    }

    .hud-stat-num {
        font-size: 13px !important;
    }

    .hud-stat-lbl {
        font-size: 8.5px !important;
    }

    .gis-detail-stat-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Filter Pills & Tabs on Mobile */
    .tab-jenis-pill, .sip-filter-pill {
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 11.5px !important;
        padding: 7px 10px !important;
        min-height: 38px !important;
    }

    .year-filter-info {
        width: 100% !important;
    }

    .year-filter-chip {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 11px !important;
    }

    /* KPI Cards on Mobile */
    .rl-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .rl-kpi-card {
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    .rl-kpi-card div:first-child div:nth-child(2) {
        font-size: 18px !important;
    }

    .rl-kpi-icon-bubble {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    /* Detail Usulan Modal Responsiveness */
    .usulan-detail-header-card {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .usulan-detail-header-card img {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 220px !important;
        height: 120px !important;
    }

    .usulan-detail-klaster-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .usulan-detail-pendukung-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Coordinate selection buttons */
    .coord-btn-selection {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .coord-choice-btn {
        min-height: 46px !important;
        padding: 10px 12px !important;
    }

    /* Stepper Track on Mobile */
    .sip-stepper-track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        justify-content: flex-start !important;
    }

    .sip-stepper-step {
        min-width: 120px !important;
        flex-shrink: 0 !important;
    }

    /* Footer Mobile Stack */
    .sip-footer {
        padding: 16px 12px;
    }

    .sip-footer-single {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .sip-footer-separator {
        display: none;
    }

    /* Toast Notification Positioning on Mobile */
    .sip-toast-container {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: unset;
    }
}

/* --------------------------------------------------------------------
   BREAKPOINT: EXTRA SMALL PHONES (max-width: 480px)
   -------------------------------------------------------------------- */
@media (max-width: 480px) {
    .sip-topbar-title h1 {
        font-size: 12px;
        max-width: 135px;
    }

    .sip-container {
        padding: 10px 8px;
    }

    .sip-card {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .hero-banner {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .hero-stat-card {
        padding: 6px 8px;
    }

    .hero-stat-val {
        font-size: 17px;
    }

    .hero-stat-lbl {
        font-size: 9px;
    }

    .gis-map-card {
        height: 360px !important;
    }

    .sip-modal, .modal-box {
        max-width: 98vw !important;
        max-height: 96vh !important;
        border-radius: 14px !important;
    }

    .sip-modal-body, .modal-body {
        padding: 12px 10px !important;
        max-height: calc(96vh - 120px) !important;
    }

    .sip-modal-header, .modal-header {
        padding: 12px 14px !important;
    }

    .sip-modal-header h3, .modal-title {
        font-size: 13px !important;
    }

    .rl-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .hud-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ====================================================================
   SIPRIJA ULTRA-MODERN GLOBAL CONFIRMATION & ALERT DIALOG SUITE
   ==================================================================== */
/* ====================================================================
   DIALOG KONFIRMASI GLOBAL — SUPER PREMIUM REDESIGN
   Glassmorphism backdrop · Shimmer border · Animated particles
   Dual pulse rings · Shimmer button sweep · Geometric decorations
   ==================================================================== */

/* === OVERLAY === */
.sip-gcd-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999999 !important; /* Di atas modal-overlay (z-index: 99999) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 16px;
}
.sip-gcd-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* === BACKDROP — multi-layer glassmorphism === */
.sip-gcd-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 20%, rgba(99,102,241,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(249,115,22,0.14) 0%, transparent 55%),
        rgba(10, 18, 40, 0.72);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    animation: gcdBackdropIn 0.35s ease both;
}
@keyframes gcdBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* === MODAL CARD === */
.sip-gcd-modal {
    position: relative;
    background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFF 100%);
    border-radius: 28px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.30),
        0 8px 24px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.9);
    padding: 48px 40px 36px;
    text-align: center;
    max-width: 460px;
    width: 100%;
    transform: scale(0.82) translateY(36px) rotateX(6deg);
    transition: transform 0.44s cubic-bezier(.12, 0.9, .29, 1.02);
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.7);
}
.sip-gcd-overlay.show .sip-gcd-modal {
    transform: scale(1) translateY(0) rotateX(0deg);
}

[data-theme="dark"] .sip-gcd-modal {
    background: linear-gradient(160deg, #1E293B 0%, #0F172A 100%);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.65),
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.06);
}

/* === SHIMMER BORDER RING (rotating conic gradient) === */
.sip-gcd-shimmer-ring {
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(99,102,241,0.7) 15%,
        rgba(249,115,22,0.6) 30%,
        transparent 45%,
        rgba(99,102,241,0.5) 60%,
        transparent 75%
    );
    animation: gcdShimmerSpin 3.5s linear infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.sip-gcd-overlay.show .sip-gcd-shimmer-ring {
    opacity: 1;
}
.sip-gcd-shimmer-ring::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 28px;
    background: #FFFFFF;
}
[data-theme="dark"] .sip-gcd-shimmer-ring::after {
    background: #1E293B;
}
@keyframes gcdShimmerSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* === GEOMETRIC DECORATIONS === */
.sip-gcd-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.sip-gcd-deco-1 {
    width: 140px;
    height: 140px;
    top: -50px;
    right: -40px;
    background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
    animation: gcdDecoFloat1 6s ease-in-out infinite;
}
.sip-gcd-deco-2 {
    width: 100px;
    height: 100px;
    bottom: -30px;
    left: -30px;
    background: radial-gradient(circle, rgba(249,115,22,0.10) 0%, transparent 70%);
    animation: gcdDecoFloat2 7s ease-in-out infinite 1s;
}
.sip-gcd-deco-3 {
    width: 70px;
    height: 70px;
    top: 60px;
    left: 10px;
    background: radial-gradient(circle, rgba(16,185,129,0.08) 0%, transparent 70%);
    animation: gcdDecoFloat1 8s ease-in-out infinite 2s;
}
@keyframes gcdDecoFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(8px,-10px) scale(1.05); }
}
@keyframes gcdDecoFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(-6px,8px) scale(1.08); }
}

/* === CLOSE BUTTON === */
.sip-gcd-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #E2E8F0;
    background: rgba(248,250,252,0.9);
    color: #94A3B8;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    z-index: 10;
}
.sip-gcd-close-btn:hover {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #DC2626;
    transform: rotate(90deg) scale(1.12);
    box-shadow: 0 2px 8px rgba(220,38,38,0.2);
}
[data-theme="dark"] .sip-gcd-close-btn {
    background: rgba(51,65,85,0.9);
    border-color: #475569;
    color: #94A3B8;
}
[data-theme="dark"] .sip-gcd-close-btn:hover {
    background: rgba(71,85,105,0.9);
    border-color: #EF4444;
    color: #FCA5A5;
}

/* === ICON WRAP — dual pulse rings + glow === */
.sip-gcd-icon-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border-radius: 50%;
    animation: gcdIconPop 0.55s cubic-bezier(.12, 0.9, .29, 1.15) 0.12s both;
}
@keyframes gcdIconPop {
    0%   { transform: scale(0.3) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(4deg);  opacity: 1; }
    100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

/* Dual Pulse Rings */
.sip-gcd-pulse-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    animation: gcdPulseRing1 2.4s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
.sip-gcd-pulse-ring-2 {
    inset: -14px;
    animation: gcdPulseRing2 2.4s cubic-bezier(0.24, 0, 0.38, 1) 0.8s infinite;
}
@keyframes gcdPulseRing1 {
    0%   { transform: scale(1);    opacity: 0.9; }
    100% { transform: scale(1.6);  opacity: 0; }
}
@keyframes gcdPulseRing2 {
    0%   { transform: scale(1);    opacity: 0.55; }
    100% { transform: scale(1.8);  opacity: 0; }
}

/* Icon color schemes per type */
.sip-gcd-icon-wrap.type-danger {
    color: #DC2626;
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    box-shadow: 0 8px 32px rgba(220,38,38,0.30), 0 0 0 1px rgba(220,38,38,0.12);
}
.sip-gcd-icon-wrap.type-danger .sip-gcd-pulse-ring      { border: 2px solid rgba(239,68,68,0.5); }
.sip-gcd-icon-wrap.type-danger .sip-gcd-pulse-ring-2    { border: 1.5px solid rgba(239,68,68,0.25); }
[data-theme="dark"] .sip-gcd-icon-wrap.type-danger      { background: linear-gradient(135deg,#451A1A,#5C1D1D); color:#F87171; }

.sip-gcd-icon-wrap.type-warning {
    color: #D97706;
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    box-shadow: 0 8px 32px rgba(217,119,6,0.30), 0 0 0 1px rgba(217,119,6,0.12);
}
.sip-gcd-icon-wrap.type-warning .sip-gcd-pulse-ring     { border: 2px solid rgba(245,158,11,0.5); }
.sip-gcd-icon-wrap.type-warning .sip-gcd-pulse-ring-2   { border: 1.5px solid rgba(245,158,11,0.25); }
[data-theme="dark"] .sip-gcd-icon-wrap.type-warning     { background: linear-gradient(135deg,#452A0A,#5C380E); color:#FBBF24; }

.sip-gcd-icon-wrap.type-primary,
.sip-gcd-icon-wrap.type-info {
    color: #0288D1;
    background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
    box-shadow: 0 8px 32px rgba(2,136,209,0.30), 0 0 0 1px rgba(2,136,209,0.12);
}
.sip-gcd-icon-wrap.type-primary .sip-gcd-pulse-ring,
.sip-gcd-icon-wrap.type-info    .sip-gcd-pulse-ring     { border: 2px solid rgba(2,136,209,0.5); }
.sip-gcd-icon-wrap.type-primary .sip-gcd-pulse-ring-2,
.sip-gcd-icon-wrap.type-info    .sip-gcd-pulse-ring-2   { border: 1.5px solid rgba(2,136,209,0.25); }
[data-theme="dark"] .sip-gcd-icon-wrap.type-primary,
[data-theme="dark"] .sip-gcd-icon-wrap.type-info        { background: linear-gradient(135deg,#0C3456,#0A4272); color:#38BDF8; }

.sip-gcd-icon-wrap.type-success {
    color: #059669;
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    box-shadow: 0 8px 32px rgba(5,150,105,0.30), 0 0 0 1px rgba(5,150,105,0.12);
}
.sip-gcd-icon-wrap.type-success .sip-gcd-pulse-ring     { border: 2px solid rgba(16,185,129,0.5); }
.sip-gcd-icon-wrap.type-success .sip-gcd-pulse-ring-2   { border: 1.5px solid rgba(16,185,129,0.25); }
[data-theme="dark"] .sip-gcd-icon-wrap.type-success     { background: linear-gradient(135deg,#064E3B,#065F46); color:#34D399; }

/* === TITLE & MESSAGE === */
#sipGcdTitle {
    font-size: 21px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 10px 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.4px;
    line-height: 1.25;
}
[data-theme="dark"] #sipGcdTitle { color: #F1F5F9; }

.sip-gcd-message {
    font-size: 14.5px;
    color: #64748B;
    margin: 0 0 22px 0;
    line-height: 1.7;
    font-family: 'Plus Jakarta Sans', sans-serif;
    word-break: break-word;
}
[data-theme="dark"] .sip-gcd-message { color: #94A3B8; }

/* === EXTRA INFO BOX === */
.sip-gcd-extra {
    background: linear-gradient(135deg, #F8FAFC, #EFF6FF);
    border: 1px solid #DBEAFE;
    border-left: 4px solid #3B82F6;
    border-radius: 12px;
    padding: 11px 15px;
    font-size: 12.5px;
    color: #475569;
    margin: -8px 0 22px 0;
    text-align: left;
    line-height: 1.6;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
[data-theme="dark"] .sip-gcd-extra {
    background: linear-gradient(135deg,#0F172A,#1E293B);
    border-color: #1E40AF;
    border-left-color: #3B82F6;
    color: #CBD5E1;
}

/* === ACTION BUTTONS === */
.sip-gcd-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 4px;
}

/* Cancel button */
.sip-gcd-btn-cancel {
    flex: 1;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #475569;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 0.1px;
}
.sip-gcd-btn-cancel:hover {
    background: #F1F5F9;
    border-color: #94A3B8;
    color: #1E293B;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.sip-gcd-btn-cancel:active { transform: translateY(0); box-shadow: none; }
[data-theme="dark"] .sip-gcd-btn-cancel {
    background: #334155;
    border-color: #475569;
    color: #E2E8F0;
}
[data-theme="dark"] .sip-gcd-btn-cancel:hover {
    background: #3F4F65;
    border-color: #94A3B8;
    color: #FFFFFF;
}

/* Confirm button — with shimmer sweep */
.sip-gcd-btn-confirm {
    flex: 1.3;
    padding: 12px 20px;
    border-radius: 14px;
    border: none;
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.2px;
}

/* Shimmer sweep layer inside button */
.sip-gcd-btn-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255,255,255,0.35) 50%,
        transparent 80%
    );
    transform: translateX(-100%);
    transition: transform 0s;
}
.sip-gcd-btn-confirm:hover .sip-gcd-btn-shimmer {
    transform: translateX(100%);
    transition: transform 0.55s ease;
}

/* Confirm variants */
.sip-gcd-btn-confirm,
.sip-gcd-btn-confirm.type-danger {
    background: linear-gradient(135deg, #C01E1E, #EF4444, #F87171);
    box-shadow: 0 6px 20px rgba(220,38,38,0.40), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sip-gcd-btn-confirm:hover,
.sip-gcd-btn-confirm.type-danger:hover {
    background: linear-gradient(135deg, #991B1B, #DC2626, #EF4444);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(220,38,38,0.52), inset 0 1px 0 rgba(255,255,255,0.18);
}

.sip-gcd-btn-confirm.type-warning {
    background: linear-gradient(135deg, #B45309, #F59E0B, #FCD34D);
    box-shadow: 0 6px 20px rgba(217,119,6,0.40), inset 0 1px 0 rgba(255,255,255,0.2);
    color: #fff;
}
.sip-gcd-btn-confirm.type-warning:hover {
    background: linear-gradient(135deg, #92400E, #D97706, #F59E0B);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(217,119,6,0.52), inset 0 1px 0 rgba(255,255,255,0.2);
}

.sip-gcd-btn-confirm.type-primary,
.sip-gcd-btn-confirm.type-info {
    background: linear-gradient(135deg, #014F86, #0288D1, #38BDF8);
    box-shadow: 0 6px 20px rgba(2,136,209,0.40), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sip-gcd-btn-confirm.type-primary:hover,
.sip-gcd-btn-confirm.type-info:hover {
    background: linear-gradient(135deg, #013A64, #0277BD, #0288D1);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(2,136,209,0.52), inset 0 1px 0 rgba(255,255,255,0.18);
}

.sip-gcd-btn-confirm.type-success {
    background: linear-gradient(135deg, #047857, #059669, #34D399);
    box-shadow: 0 6px 20px rgba(5,150,105,0.40), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sip-gcd-btn-confirm.type-success:hover {
    background: linear-gradient(135deg, #064E3B, #047857, #059669);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(5,150,105,0.52), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sip-gcd-btn-confirm:active { transform: translateY(0); }

/* === PARTICLE DOTS (floating decorations at bottom) === */
.sip-gcd-particles {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    pointer-events: none;
}
.sip-gcd-particles span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(148,163,184,0.35);
    animation: gcdParticleBounce 1.8s ease-in-out infinite;
}
.sip-gcd-particles span:nth-child(1) { animation-delay: 0.0s; }
.sip-gcd-particles span:nth-child(2) { animation-delay: 0.2s; }
.sip-gcd-particles span:nth-child(3) { animation-delay: 0.4s; }
.sip-gcd-particles span:nth-child(4) { animation-delay: 0.6s; background: rgba(148,163,184,0.2); }
.sip-gcd-particles span:nth-child(5) { animation-delay: 0.8s; background: rgba(148,163,184,0.15); }
.sip-gcd-particles span:nth-child(6) { animation-delay: 1.0s; background: rgba(148,163,184,0.10); }
@keyframes gcdParticleBounce {
    0%,80%,100% { transform: scale(0.7); opacity: 0.4; }
    40%          { transform: scale(1.2); opacity: 1; }
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .sip-gcd-modal {
        padding: 40px 22px 30px;
        border-radius: 24px;
    }
    .sip-gcd-btns {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .sip-gcd-btn-cancel,
    .sip-gcd-btn-confirm {
        width: 100%;
        flex: none;
    }
}

/* ====================================================================
   GIS MAP FLOATING HUD OVERLAY CARDS & TELEMETRY SUITE
   ==================================================================== */
.gis-map-card {
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.gis-map-card.fullscreen-mode {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
}

.gis-map-hud-card {
    position: absolute;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(2, 136, 209, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow: hidden;
}

[data-theme="dark"] .gis-map-hud-card {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(56, 189, 248, 0.22);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

/* Position Placements */
.hud-top-left {
    top: 14px;
    left: 14px;
    width: 340px;
}

.hud-bottom-left {
    bottom: 14px;
    left: 14px;
    max-width: 360px;
    width: calc(100% - 28px);
    display: none;
}

.hud-bottom-left.active {
    display: block;
    animation: hudSlideUp 0.35s cubic-bezier(.22, 1, .36, 1) both;
}

.hud-bottom-right {
    bottom: 14px;
    right: 14px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

@keyframes hudSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Card Header */
.hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

[data-theme="dark"] .hud-header {
    border-bottom-color: rgba(30, 58, 95, 0.7);
}

.hud-title-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

[data-theme="dark"] .hud-title-badge {
    color: var(--primary-light);
}

.hud-pulse-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.7);
    animation: hudDotPulse 2s infinite;
}

@keyframes hudDotPulse {
    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);
    }
}

.hud-btn-toggle {
    background: transparent;
    border: none;
    color: var(--text-light);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.hud-btn-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main);
}

[data-theme="dark"] .hud-btn-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
}

/* Card Body & Stats Grid */
.hud-body {
    padding: 12px 14px;
}

.hud-top-left.collapsed .hud-body {
    display: none;
}

.hud-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.hud-stat-item {
    background: rgba(240, 249, 255, 0.6);
    border: 1px solid rgba(186, 230, 253, 0.6);
    border-radius: 10px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hud-stat-item:hover,
.hud-stat-item.active {
    background: #FFFFFF;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(2, 136, 209, 0.2);
}

[data-theme="dark"] .hud-stat-item {
    background: rgba(17, 28, 48, 0.7);
    border-color: rgba(30, 58, 95, 0.8);
}

[data-theme="dark"] .hud-stat-item:hover,
[data-theme="dark"] .hud-stat-item.active {
    background: #1E293B;
    border-color: var(--primary-light);
}

.hud-stat-num {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}

.hud-stat-lbl {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 2px;
}

.hud-investment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(2, 136, 209, 0.08), rgba(16, 185, 129, 0.08));
    border: 1px dashed rgba(2, 136, 209, 0.3);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 11.5px;
}

.hud-inv-label {
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.hud-inv-val {
    font-weight: 800;
    color: #059669;
    font-size: 12px;
}

[data-theme="dark"] .hud-inv-val {
    color: #34D399;
}

/* Inspector Floating Card */
.hud-inspector-content {
    padding: 12px 14px;
}

.hud-inspect-grid {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.hud-inspect-img {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    object-fit: cover;
    border: 1.5px solid var(--border-blue);
    flex-shrink: 0;
}

.hud-inspect-info {
    flex: 1;
    overflow: hidden;
}

.hud-inspect-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.hud-inspect-region {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.hud-inspect-cost {
    font-size: 12.5px;
    font-weight: 800;
    color: #059669;
    margin-top: 3px;
}

.hud-inspect-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px dashed rgba(226, 232, 240, 0.7);
    padding-top: 8px;
}

[data-theme="dark"] .hud-inspect-actions {
    border-top-color: rgba(30, 58, 95, 0.7);
}

.hud-action-btn {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.hud-btn-primary {
    background: linear-gradient(135deg, #0288D1, #01579B);
    color: #FFFFFF;
}

.hud-btn-primary:hover {
    background: linear-gradient(135deg, #0277BD, #014F86);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.hud-btn-secondary {
    background: #F1F5F9;
    color: #475569;
}

[data-theme="dark"] .hud-btn-secondary {
    background: #334155;
    color: #CBD5E1;
}

.hud-btn-secondary:hover {
    background: #E2E8F0;
    color: #0F172A;
}

/* Telemetry & Tools Card (Bottom Right) */
.hud-telemetry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.hud-coords {
    font-family: monospace;
    font-size: 11px;
    color: #0288D1;
    display: flex;
    align-items: center;
    gap: 4px;
}

[data-theme="dark"] .hud-coords {
    color: #38BDF8;
}

.hud-zoom-badge {
    background: rgba(2, 136, 209, 0.12);
    color: var(--primary);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
}

.hud-tools-actions {
    display: flex;
    gap: 6px;
    margin-left: 6px;
    padding-left: 8px;
    border-left: 1px solid rgba(226, 232, 240, 0.8);
}

[data-theme="dark"] .hud-tools-actions {
    border-left-color: rgba(30, 58, 95, 0.8);
}

.hud-tool-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #FFFFFF;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hud-tool-btn:hover {
    background: #F0F9FF;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

[data-theme="dark"] .hud-tool-btn {
    background: #1E293B;
    border-color: #334155;
    color: #E2E8F0;
}

[data-theme="dark"] .hud-tool-btn:hover {
    background: #0C3456;
    border-color: #38BDF8;
    color: #38BDF8;
}

@media (max-width: 768px) {
    .hud-top-left {
        width: calc(100% - 28px);
        max-width: none;
    }
    .hud-bottom-right {
        bottom: 8px;
        right: 8px;
        left: 8px;
        justify-content: space-between;
    }
    .hud-bottom-left {
        bottom: 58px;
        left: 8px;
        width: calc(100% - 16px);
    }
}

/* ==========================================================================
   HUMANIZED UI / UX ENHANCEMENTS (PUPR KALSEL PREMIUM SYSTEM)
   1. Dynamic Warm Greeting Pill
   2. Command Palette (Ctrl + K Spotlight Search)
   3. Visual Stepper Status Tracker (Alur 4 Tahapan)
   4. One-Click GPS Geolocation Auto-Fill Button
   5. Smart Friendly Empty States
   ========================================================================== */

/* 1. Dynamic Warm Greeting Pill */
.sip-greeting-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #0369A1;
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(186, 230, 253, 0.6));
    border: 1px solid rgba(56, 189, 248, 0.35);
    white-space: nowrap;
    transition: all 0.25s ease;
}
.sip-greeting-pill i {
    color: #F59E0B;
    font-size: 12px;
}
[data-theme="dark"] .sip-greeting-pill {
    color: #7DD3FC;
    background: rgba(12, 52, 86, 0.7);
    border-color: rgba(56, 189, 248, 0.25);
}

/* 2. Topbar Command Palette Quick Trigger Button */
.sip-cmd-palette-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F1F5F9;
    border: 1.5px solid #E2E8F0;
    color: #64748B;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Plus Jakarta Sans', sans-serif;
    user-select: none;
}
.sip-cmd-palette-btn:hover {
    background: #FFFFFF;
    border-color: #0288D1;
    color: #0288D1;
    box-shadow: 0 3px 12px rgba(2, 136, 209, 0.15);
    transform: translateY(-1px);
}
.sip-cmd-palette-btn .sip-cp-btn-text {
    color: #64748B;
    font-size: 12px;
}
.sip-cmd-palette-btn:hover .sip-cp-btn-text {
    color: #0288D1;
}
.sip-cmd-palette-btn .sip-cp-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #E2E8F0;
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
    font-weight: 700;
    color: #475569;
    border: 1px solid #CBD5E1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
[data-theme="dark"] .sip-cmd-palette-btn {
    background: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}
[data-theme="dark"] .sip-cmd-palette-btn:hover {
    background: #0C3456;
    border-color: #38BDF8;
    color: #38BDF8;
}
[data-theme="dark"] .sip-cmd-palette-btn .sip-cp-shortcut {
    background: #334155;
    border-color: #475569;
    color: #CBD5E1;
}
@media (max-width: 640px) {
    .sip-cmd-palette-btn .sip-cp-btn-text,
    .sip-cmd-palette-btn .sip-cp-shortcut {
        display: none;
    }
    .sip-cmd-palette-btn {
        padding: 8px 10px;
    }
}

/* 3. Command Palette Modal & Overlay */
.sip-cp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1), visibility 0.25s;
}
.sip-cp-overlay.active {
    opacity: 1;
    visibility: visible;
}
.sip-cp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sip-cp-modal {
    position: relative;
    width: 100%;
    max-width: 620px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.sip-cp-overlay.active .sip-cp-modal {
    transform: scale(1) translateY(0);
}
[data-theme="dark"] .sip-cp-modal {
    background: #111827;
    border: 1px solid #1F2937;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.sip-cp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1.5px solid #F1F5F9;
    background: #FFFFFF;
}
[data-theme="dark"] .sip-cp-header {
    background: #111827;
    border-bottom-color: #1F2937;
}
.sip-cp-search-icon {
    font-size: 20px;
    color: #0288D1;
    flex-shrink: 0;
}
.sip-cp-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: #0F172A;
    background: transparent;
    font-family: inherit;
}
.sip-cp-input::placeholder {
    color: #94A3B8;
    font-weight: 500;
}
[data-theme="dark"] .sip-cp-input {
    color: #F8FAFC;
}
.sip-cp-esc-badge {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: #64748B;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}
.sip-cp-esc-badge:hover {
    background: #E2E8F0;
    color: #0F172A;
}
[data-theme="dark"] .sip-cp-esc-badge {
    background: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}

.sip-cp-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    max-height: 420px;
}
.sip-cp-body::-webkit-scrollbar {
    width: 6px;
}
.sip-cp-body::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 99px;
}
[data-theme="dark"] .sip-cp-body::-webkit-scrollbar-thumb {
    background: #334155;
}

.sip-cp-group-title {
    font-size: 11px;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 12px 4px;
}
[data-theme="dark"] .sip-cp-group-title {
    color: #64748B;
}

.sip-cp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 2px;
}
.sip-cp-item:hover,
.sip-cp-item.selected {
    background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
    color: #0288D1;
    transform: translateX(3px);
}
[data-theme="dark"] .sip-cp-item {
    color: #E2E8F0;
}
[data-theme="dark"] .sip-cp-item:hover,
[data-theme="dark"] .sip-cp-item.selected {
    background: rgba(2, 136, 209, 0.18);
    color: #38BDF8;
}

.sip-cp-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #F1F5F9;
    color: #0288D1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.2s;
}
.sip-cp-item:hover .sip-cp-item-icon,
.sip-cp-item.selected .sip-cp-item-icon {
    background: #0288D1;
    color: #FFFFFF;
    transform: scale(1.05);
}
[data-theme="dark"] .sip-cp-item-icon {
    background: #1E293B;
    color: #38BDF8;
}

.sip-cp-item-info {
    flex: 1;
    min-width: 0;
}
.sip-cp-item-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sip-cp-item-desc {
    font-size: 11px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .sip-cp-item-desc {
    color: #94A3B8;
}

.sip-cp-item-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    background: #E2E8F0;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
[data-theme="dark"] .sip-cp-item-badge {
    background: #1E293B;
    color: #94A3B8;
}

.sip-cp-empty {
    text-align: center;
    padding: 36px 20px;
    color: #94A3B8;
}
.sip-cp-empty i {
    font-size: 32px;
    color: #CBD5E1;
    display: block;
    margin-bottom: 8px;
}
.sip-cp-empty p {
    font-size: 13px;
    margin: 0;
}

.sip-cp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 10px 20px;
    border-top: 1px solid #F1F5F9;
    background: #F8FAFC;
    font-size: 11px;
    color: #64748B;
}
[data-theme="dark"] .sip-cp-footer {
    background: #0B1120;
    border-top-color: #1F2937;
    color: #94A3B8;
}
.sip-cp-footer-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sip-cp-footer-item kbd {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    color: #334155;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
[data-theme="dark"] .sip-cp-footer-item kbd {
    background: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

/* 4. COLORFUL VISUAL STEPPER STATUS TRACKER */
.sip-stepper-container {
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 50%, #F5F3FF 100%);
    border: 1.5px solid #BAE6FD;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] .sip-stepper-container {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-color: #334155;
}
.sip-stepper-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #1E293B;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
[data-theme="dark"] .sip-stepper-title {
    color: #F1F5F9;
}
.sip-stepper-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: 10px;
}
@media (max-width: 768px) {
    .sip-stepper-track {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}
@media (max-width: 480px) {
    .sip-stepper-track {
        grid-template-columns: 1fr;
    }
}
.sip-stepper-step {
    position: relative;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
[data-theme="dark"] .sip-stepper-step {
    background: #1E293B;
    border-color: #334155;
}

/* Individual Stage Theming */
.sip-stepper-step.step-1 {
    border-left: 4px solid #4F46E5;
    background: #EEF2FF;
    border-color: #C7D2FE;
}
[data-theme="dark"] .sip-stepper-step.step-1 {
    background: rgba(79, 70, 229, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    border-left: 4px solid #6366F1;
}

.sip-stepper-step.step-2 {
    border-left: 4px solid #0288D1;
    background: #F0F9FF;
    border-color: #BAE6FD;
}
[data-theme="dark"] .sip-stepper-step.step-2 {
    background: rgba(2, 136, 209, 0.12);
    border-color: rgba(56, 189, 248, 0.35);
    border-left: 4px solid #0288D1;
}

.sip-stepper-step.step-3 {
    border-left: 4px solid #7C3AED;
    background: #F5F3FF;
    border-color: #DDD6FE;
}
[data-theme="dark"] .sip-stepper-step.step-3 {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(167, 139, 250, 0.35);
    border-left: 4px solid #8B5CF6;
}

.sip-stepper-step.step-4 {
    border-left: 4px solid #059669;
    background: #ECFDF5;
    border-color: #A7F3D0;
}
[data-theme="dark"] .sip-stepper-step.step-4 {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
    border-left: 4px solid #10B981;
}

/* Status modifier overrides */
.sip-stepper-step.active {
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.15);
}
.sip-stepper-step.rejected {
    border-color: #EF4444 !important;
    background: #FEF2F2 !important;
    border-left: 4px solid #EF4444 !important;
}
[data-theme="dark"] .sip-stepper-step.rejected {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: #EF4444 !important;
}

/* Stepper Icons matching each Card Theme */
.sip-stepper-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

/* Step 1 Icon (Indigo) */
.sip-stepper-step.step-1 .sip-stepper-icon {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: #FFFFFF;
    border: 1.5px solid #4338CA;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.32);
}

/* Step 2 Icon (Sky Blue / Cyan, or Red if Rejected) */
.sip-stepper-step.step-2 .sip-stepper-icon {
    background: linear-gradient(135deg, #38BDF8 0%, #0288D1 100%);
    color: #FFFFFF;
    border: 1.5px solid #0284C7;
    box-shadow: 0 2px 8px rgba(2, 136, 209, 0.32);
}
.sip-stepper-step.step-2.rejected .sip-stepper-icon {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%) !important;
    color: #FFFFFF !important;
    border: 1.5px solid #DC2626 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.32) !important;
}

/* Step 3 Icon (Violet / Purple) */
.sip-stepper-step.step-3 .sip-stepper-icon {
    background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
    color: #FFFFFF;
    border: 1.5px solid #6D28D9;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.32);
}
.sip-stepper-step.step-3.pending .sip-stepper-icon {
    background: #EDE9FE;
    color: #7C3AED;
    border: 1.5px solid #C4B5FD;
    box-shadow: none;
}
[data-theme="dark"] .sip-stepper-step.step-3.pending .sip-stepper-icon {
    background: rgba(124, 58, 237, 0.25);
    color: #C4B5FD;
    border-color: rgba(167, 139, 250, 0.4);
}

/* Step 4 Icon (Emerald Green) */
.sip-stepper-step.step-4 .sip-stepper-icon {
    background: linear-gradient(135deg, #34D399 0%, #059669 100%);
    color: #FFFFFF;
    border: 1.5px solid #047857;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.32);
}
.sip-stepper-step.step-4.pending .sip-stepper-icon {
    background: #D1FAE5;
    color: #059669;
    border: 1.5px solid #A7F3D0;
    box-shadow: none;
}
[data-theme="dark"] .sip-stepper-step.step-4.pending .sip-stepper-icon {
    background: rgba(16, 185, 129, 0.25);
    color: #6EE7B7;
    border-color: rgba(52, 211, 153, 0.4);
}

.sip-stepper-label {
    min-width: 0;
    flex: 1;
}
.sip-stepper-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #1E293B;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .sip-stepper-name {
    color: #F1F5F9;
}
.sip-stepper-step.step-1 .sip-stepper-name { color: #3730A3; }
.sip-stepper-step.step-2 .sip-stepper-name { color: #075985; }
.sip-stepper-step.step-3 .sip-stepper-name { color: #5B21B6; }
.sip-stepper-step.step-4 .sip-stepper-name { color: #065F46; }

[data-theme="dark"] .sip-stepper-step.step-1 .sip-stepper-name { color: #A5B4FC; }
[data-theme="dark"] .sip-stepper-step.step-2 .sip-stepper-name { color: #7DD3FC; }
[data-theme="dark"] .sip-stepper-step.step-3 .sip-stepper-name { color: #C4B5FD; }
[data-theme="dark"] .sip-stepper-step.step-4 .sip-stepper-name { color: #6EE7B7; }

.sip-stepper-status {
    font-size: 9.5px;
    font-weight: 700;
    color: #64748B;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sip-stepper-step.step-1 .sip-stepper-status { color: #4F46E5; }
.sip-stepper-step.step-2 .sip-stepper-status { color: #0288D1; }
.sip-stepper-step.step-3 .sip-stepper-status { color: #7C3AED; }
.sip-stepper-step.step-4 .sip-stepper-status { color: #059669; }

.sip-stepper-step.step-3.pending .sip-stepper-status,
.sip-stepper-step.step-4.pending .sip-stepper-status {
    color: #94A3B8;
}

.sip-stepper-step.rejected .sip-stepper-status {
    color: #DC2626 !important;
}

/* 5. GPS AUTOFILL BUTTON */
.gps-autofill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
    border: 1.5px solid #BAE6FD;
    color: #0288D1;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.gps-autofill-btn:hover {
    background: #0288D1;
    color: #FFFFFF;
    border-color: #0288D1;
    box-shadow: 0 3px 10px rgba(2, 136, 209, 0.25);
    transform: translateY(-1px);
}
.gps-autofill-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}
.gps-autofill-btn i {
    font-size: 13px;
}
[data-theme="dark"] .gps-autofill-btn {
    background: #0C3456;
    border-color: #1E3A5F;
    color: #38BDF8;
}
[data-theme="dark"] .gps-autofill-btn:hover {
    background: #0288D1;
    color: #FFFFFF;
    border-color: #0288D1;
}

/* 6. SMART EMPTY STATES */
.sip-empty-card {
    text-align: center;
    padding: 48px 24px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 2px dashed #E2E8F0;
    margin: 20px 0;
}
[data-theme="dark"] .sip-empty-card {
    background: #111827;
    border-color: #1F2937;
}
.sip-empty-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    color: #0288D1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 16px;
    border: 2px solid #BAE6FD;
}
[data-theme="dark"] .sip-empty-icon-wrap {
    background: #0C3456;
    border-color: #1E3A5F;
    color: #38BDF8;
}
.sip-empty-title {
    font-size: 17px;
    font-weight: 800;
    color: #1E293B;
    margin: 0 0 6px 0;
}
[data-theme="dark"] .sip-empty-title {
    color: #F1F5F9;
}
.sip-empty-desc {
    font-size: 13px;
    color: #64748B;
    max-width: 440px;
    margin: 0 auto 20px;
    line-height: 1.5;
}
[data-theme="dark"] .sip-empty-desc {
    color: #94A3B8;
}

/* ====================================================================
   MODAL REALISASI BEAUTIFIED COMPONENTS & SECTIONS
   ==================================================================== */
.realisasi-section-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}
[data-theme="dark"] .realisasi-section-card {
    background: #1E293B;
    border-color: #334155;
    box-shadow: none;
}
.realisasi-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F1F5F9;
}
[data-theme="dark"] .realisasi-section-header {
    border-bottom-color: #334155;
}
.realisasi-section-title {
    font-size: 13px;
    font-weight: 800;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    letter-spacing: -0.2px;
}
[data-theme="dark"] .realisasi-section-title {
    color: #F8FAFC;
}

/* Header Paket Proyek di Modal Realisasi */
.realisasi-modal-hero {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1.5px solid #BAE6FD;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
}
[data-theme="dark"] .realisasi-modal-hero {
    background: linear-gradient(135deg, #1E293B 0%, #1E3A5F 100%);
    border-color: #334155;
}

/* Live progress comparative track */
.modal-progress-track {
    height: 8px;
    background: #E2E8F0;
    border-radius: 99px;
    overflow: hidden;
    position: relative;
    display: flex;
}
[data-theme="dark"] .modal-progress-track {
    background: #334155;
}

/* ====================================================================
   DOKUMENTASI FOTO PROGRES FISIK BERTAHAP (0%, 50%, 100%)
   ==================================================================== */
.milestone-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .milestone-upload-grid {
        grid-template-columns: 1fr;
    }
}
.milestone-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}
[data-theme="dark"] .milestone-card {
    background: #1E293B;
    border-color: #334155;
}
.milestone-card.milestone-0 {
    border-color: #CBD5E1;
}
.milestone-card.milestone-50 {
    border-color: #BAE6FD;
}
.milestone-card.milestone-100 {
    border-color: #A7F3D0;
}
.milestone-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.milestone-preview-box {
    width: 100%;
    height: 105px;
    border-radius: 8px;
    overflow: hidden;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
[data-theme="dark"] .milestone-preview-box {
    background: #0F172A;
    border-color: #334155;
}
.milestone-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.milestone-placeholder {
    text-align: center;
    color: #94A3B8;
    font-size: 11px;
    padding: 8px;
}
.milestone-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid #E2E8F0;
    margin-bottom: 16px;
    padding-bottom: 2px;
    overflow-x: auto;
}
[data-theme="dark"] .milestone-tabs {
    border-color: #334155;
}
.milestone-tab-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -4px;
}
.milestone-tab-btn:hover {
    color: #0288D1;
    background: rgba(2, 136, 209, 0.05);
}
.milestone-tab-btn.active {
    color: #0288D1;
    border-bottom-color: #0288D1;
    background: rgba(2, 136, 209, 0.08);
}
.milestone-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .milestone-compare-grid {
        grid-template-columns: 1fr;
    }
}
.milestone-compare-card {
    background: #FFFFFF;
    border: 1.5px solid #BAE6FD;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="dark"] .milestone-compare-card {
    background: #1E293B;
    border-color: #334155;
}

/* ==========================================================================
   SIPRIJA COMPREHENSIVE ANIMATION SUITE (Motion Design & Micro-Interactions)
   ========================================================================== */

/* 1. KARTU & CONTAINER HOVER LIFT DENGAN AMBIENT GLOW */
.stat-card, 
.pilar-card, 
.dashboard-widget-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.25s ease !important;
    will-change: transform, box-shadow;
}

.modal-section-card {
    transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.25s ease !important;
}

.stat-card:hover, 
.pilar-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 28px -6px rgba(2, 136, 209, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    border-color: #BAE6FD !important;
}

[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .pilar-card:hover {
    box-shadow: 0 14px 28px -6px rgba(2, 136, 209, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border-color: #0288D1 !important;
}

/* 2. TOMBOL CLICK BOUNCE & HOVER GLOW */
.btn, .sip-btn, .btn-icon, .btn-icon-lg, .sip-action-btn {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.2s ease, 
                background-color 0.2s ease, 
                color 0.2s ease,
                border-color 0.2s ease !important;
    position: relative;
    overflow: hidden;
}

.btn:hover, .sip-btn:hover, .btn-icon-lg:hover {
    transform: translateY(-1.5px);
}

.btn:active, .sip-btn:active, .btn-icon:active, .btn-icon-lg:active, .sip-action-btn:active {
    transform: scale(0.94) !important;
}

/* Tombol Primary Shimmer Highlight */
.btn-primary, .sip-btn-primary {
    background-size: 200% auto;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-primary:hover, .sip-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(2, 136, 209, 0.35) !important;
}

/* 3. MODAL POP & SMOOTH BACKDROP BLUR */
.modal-overlay {
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
}

.modal-overlay.show .sip-modal,
.modal-overlay.show .modal-box {
    animation: sipModalPopIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes sipModalPopIn {
    0% {
        opacity: 0;
        transform: scale(0.93) translateY(14px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 4. STATUS PILL BREATHING & SHIMMER PULSE */
.status-pill {
    position: relative;
    transition: all 0.2s ease;
}

/* Breathing pulse untuk status butuh revisi / kritis */
.status-ditolak, .sip-badge-red {
    animation: pulseDitolak 2.4s infinite ease-in-out;
}
@keyframes pulseDitolak {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
    }
}

/* Breathing glow untuk usulan baru diajukan */
.status-diajukan, .sip-badge-blue {
    animation: pulseDiajukan 2.8s infinite ease-in-out;
}
@keyframes pulseDiajukan {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(2, 136, 209, 0.3);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(2, 136, 209, 0);
    }
}

/* Kilau sukses untuk status Terverifikasi & Ditetapkan APBD */
.status-terverifikasi, .status-ditetapkan {
    position: relative;
    overflow: hidden;
}
.status-terverifikasi::after, .status-ditetapkan::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: badgeSuccessSweep 3.5s infinite linear;
}
@keyframes badgeSuccessSweep {
    0% { left: -100%; }
    30%, 100% { left: 160%; }
}

/* 5. STAGGERED TABLE ROWS SMOOTH REVEAL */
.sip-datatable tbody tr {
    animation: tableRowFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tableRowFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 6. PROGRESS BAR SMOOTH FILL TRANSITION */
.progress-fill, 
.milestone-track-fill,
.hud-stat-fill {
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 7. BEACON & RADAR PULSE UNTUK GIS MAP MARKER */
.sip-radar-wave-1, .sip-radar-wave-2 {
    animation: sipBeaconWave 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite !important;
}
.sip-radar-wave-2 {
    animation-delay: 1.1s !important;
}
@keyframes sipBeaconWave {
    0% {
        transform: scale(0.3);
        opacity: 0.85;
    }
    70% {
        opacity: 0.25;
    }
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* 8. MATERIAL RIPPLE WAVE EFFECT */
.sip-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: sipRippleEffect 0.55s ease-out;
    pointer-events: none;
}
@keyframes sipRippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ====================================================================
   DASHBOARD QUICK NAVIGATION CARDS (COLORFUL & ANIMATED)
   ==================================================================== */
.sip-quick-nav-card {
    margin-bottom: 0;
    padding: 16px 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.sip-quick-nav-card:hover {
    transform: translateY(-5px) scale(1.015);
}

.sip-quick-nav-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sip-quick-nav-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.sip-quick-nav-card:hover .sip-quick-nav-icon {
    transform: scale(1.14) rotate(6deg);
}

.sip-quick-nav-arrow {
    font-size: 18px;
    opacity: 0.35;
    transform: translateX(-4px);
    transition: all 0.28s ease;
    flex-shrink: 0;
}

.sip-quick-nav-card:hover .sip-quick-nav-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* 1. Emerald (Validasi 4 Pilar / Usulan Lolos) */
.quick-nav-emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.04) 100%) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.32) !important;
    border-left: 5px solid #10B981 !important;
}
.quick-nav-emerald .sip-quick-nav-icon {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.38);
}
.quick-nav-emerald:hover {
    box-shadow: 0 14px 28px -4px rgba(16, 185, 129, 0.28) !important;
    border-color: #10B981 !important;
}
.quick-nav-emerald .sip-quick-nav-arrow { color: #10B981; }

/* 2. Amber (Sistem DSS & SK Keputusan) */
.quick-nav-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.04) 100%) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.32) !important;
    border-left: 5px solid #F59E0B !important;
}
.quick-nav-amber .sip-quick-nav-icon {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.38);
}
.quick-nav-amber:hover {
    box-shadow: 0 14px 28px -4px rgba(245, 158, 11, 0.28) !important;
    border-color: #F59E0B !important;
}
.quick-nav-amber .sip-quick-nav-arrow { color: #F59E0B; }

/* 3. Cyan (Peta Spasial GIS Kalsel) */
.quick-nav-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(2, 136, 209, 0.04) 100%) !important;
    border: 1.5px solid rgba(6, 182, 212, 0.32) !important;
    border-left: 5px solid #06B6D4 !important;
}
.quick-nav-cyan .sip-quick-nav-icon {
    background: linear-gradient(135deg, #06B6D4 0%, #0288D1 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.38);
}
.quick-nav-cyan:hover {
    box-shadow: 0 14px 28px -4px rgba(6, 182, 212, 0.28) !important;
    border-color: #06B6D4 !important;
}
.quick-nav-cyan .sip-quick-nav-arrow { color: #06B6D4; }

/* 4. Purple (Realisasi APBD) */
.quick-nav-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(109, 40, 217, 0.04) 100%) !important;
    border: 1.5px solid rgba(139, 92, 246, 0.32) !important;
    border-left: 5px solid #8B5CF6 !important;
}
.quick-nav-purple .sip-quick-nav-icon {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.38);
}
.quick-nav-purple:hover {
    box-shadow: 0 14px 28px -4px rgba(139, 92, 246, 0.28) !important;
    border-color: #8B5CF6 !important;
}
.quick-nav-purple .sip-quick-nav-arrow { color: #8B5CF6; }

/* 5. Sky Blue (Data Usulan Daerah) */
.quick-nav-blue {
    background: linear-gradient(135deg, rgba(2, 136, 209, 0.1) 0%, rgba(3, 105, 161, 0.04) 100%) !important;
    border: 1.5px solid rgba(2, 136, 209, 0.32) !important;
    border-left: 5px solid #0288D1 !important;
}
.quick-nav-blue .sip-quick-nav-icon {
    background: linear-gradient(135deg, #0288D1 0%, #0369A1 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(2, 136, 209, 0.38);
}
.quick-nav-blue:hover {
    box-shadow: 0 14px 28px -4px rgba(2, 136, 209, 0.28) !important;
    border-color: #0288D1 !important;
}
.quick-nav-blue .sip-quick-nav-arrow { color: #0288D1; }

/* 6. Rose (Perlu Tindak Lanjut / Revisi) */
.quick-nav-rose {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.04) 100%) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.32) !important;
    border-left: 5px solid #EF4444 !important;
}
.quick-nav-rose .sip-quick-nav-icon {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.38);
}
.quick-nav-rose:hover {
    box-shadow: 0 14px 28px -4px rgba(239, 68, 68, 0.28) !important;
    border-color: #EF4444 !important;
}
.quick-nav-rose .sip-quick-nav-arrow { color: #EF4444; }

/* 7. Indigo (Akun Petugas) */
.quick-nav-indigo {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(79, 70, 229, 0.04) 100%) !important;
    border: 1.5px solid rgba(99, 102, 241, 0.32) !important;
    border-left: 5px solid #6366F1 !important;
}
.quick-nav-indigo .sip-quick-nav-icon {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.38);
}
.quick-nav-indigo:hover {
    box-shadow: 0 14px 28px -4px rgba(99, 102, 241, 0.28) !important;
    border-color: #6366F1 !important;
}
.quick-nav-indigo .sip-quick-nav-arrow { color: #6366F1; }

/* Dark mode adjustments */
[data-theme="dark"] .sip-quick-nav-card {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .quick-nav-emerald { background: rgba(16, 185, 129, 0.14) !important; }
[data-theme="dark"] .quick-nav-amber   { background: rgba(245, 158, 11, 0.14) !important; }
[data-theme="dark"] .quick-nav-cyan    { background: rgba(6, 182, 212, 0.14) !important; }
[data-theme="dark"] .quick-nav-purple  { background: rgba(139, 92, 246, 0.14) !important; }
[data-theme="dark"] .quick-nav-blue    { background: rgba(2, 136, 209, 0.14) !important; }
[data-theme="dark"] .quick-nav-rose    { background: rgba(239, 68, 68, 0.14) !important; }
[data-theme="dark"] .quick-nav-indigo  { background: rgba(99, 102, 241, 0.14) !important; }

/* ====================================================================
   GLOBAL TABLE SECTION HEADER — .sip-tbl-header
   Konsisten di semua halaman: Usulan, Verifikasi, Analisis,
   Realisasi, Pengguna, Kompetensi, Dashboard
   ==================================================================== */
.sip-tbl-header,
.rl-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 14px 14px 0 0;
    font-size: 14.5px;
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.2px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #01579B;
    border-bottom: 2px solid #BFDBFE;
}

/* Shimmer bar kiri */
.sip-tbl-header::before,
.rl-section-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 0;
    background: linear-gradient(to bottom, #0288D1, #3B82F6);
}

/* Ikon dalam header */
.sip-tbl-header > i,
.rl-section-header > i,
.sip-tbl-header .header-icon,
.rl-section-header .header-icon {
    font-size: 18px;
    flex-shrink: 0;
    color: inherit;
}

/* Count badge kanan */
.sip-tbl-header .tbl-header-count,
.rl-section-header .tbl-header-count,
.rl-section-header span[id^="count"] {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.55);
    color: #01579B;
    letter-spacing: 0;
    border: 1px solid rgba(2, 136, 209, 0.2);
}

/* Slot kanan tombol/badge */
.sip-tbl-header .tbl-header-actions,
.rl-section-header .tbl-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === VARIAN STANDAR REALISASI (BLUE) === */
.sip-tbl-header.th-blue,
.rl-section-header.berjalan,
.rl-section-header.selesai {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #01579B;
    border-bottom: 2px solid #BFDBFE;
}
.sip-tbl-header.th-blue::before,
.rl-section-header.berjalan::before,
.rl-section-header.selesai::before {
    background: linear-gradient(to bottom, #0288D1, #3B82F6);
}
[data-theme="dark"] .sip-tbl-header,
[data-theme="dark"] .rl-section-header,
[data-theme="dark"] .sip-tbl-header.th-blue,
[data-theme="dark"] .rl-section-header.berjalan,
[data-theme="dark"] .rl-section-header.selesai {
    background: linear-gradient(135deg, #1E293B 0%, #1E3A5F 100%);
    color: #7DD3FC;
    border-color: #334155;
}
[data-theme="dark"] .sip-tbl-header .tbl-header-count,
[data-theme="dark"] .rl-section-header .tbl-header-count,
[data-theme="dark"] .rl-section-header span[id^="count"] {
    background: rgba(255, 255, 255, 0.1);
    color: #7DD3FC;
    border-color: rgba(56, 189, 248, 0.25);
}

/* Green / Success */
.sip-tbl-header.th-green {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    color: #15803D;
    border-bottom: 2px solid #BBF7D0;
}
.sip-tbl-header.th-green::before { background: linear-gradient(to bottom, #10B981, #059669); }
[data-theme="dark"] .sip-tbl-header.th-green {
    background: linear-gradient(135deg, #1E293B 0%, #14301E 100%);
    color: #34D399;
    border-color: #334155;
}

/* Amber / Warning */
.sip-tbl-header.th-amber {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    color: #92400E;
    border-bottom: 2px solid #FDE68A;
}
.sip-tbl-header.th-amber::before { background: linear-gradient(to bottom, #F59E0B, #D97706); }
[data-theme="dark"] .sip-tbl-header.th-amber {
    background: linear-gradient(135deg, #1E293B 0%, #2D1F00 100%);
    color: #FBBF24;
    border-color: #334155;
}

/* Red / Danger */
.sip-tbl-header.th-red {
    background: linear-gradient(135deg, #FFF5F5 0%, #FEE2E2 100%);
    color: #991B1B;
    border-bottom: 2px solid #FECACA;
}
.sip-tbl-header.th-red::before { background: linear-gradient(to bottom, #EF4444, #DC2626); }
[data-theme="dark"] .sip-tbl-header.th-red {
    background: linear-gradient(135deg, #1E293B 0%, #2D0A0A 100%);
    color: #F87171;
    border-color: #334155;
}

/* Purple / Analisis */
.sip-tbl-header.th-purple {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    color: #5B21B6;
    border-bottom: 2px solid #DDD6FE;
}
.sip-tbl-header.th-purple::before { background: linear-gradient(to bottom, #8B5CF6, #7C3AED); }
[data-theme="dark"] .sip-tbl-header.th-purple {
    background: linear-gradient(135deg, #1E293B 0%, #1A0D2E 100%);
    color: #C4B5FD;
    border-color: #334155;
}

/* Slate / Neutral */
.sip-tbl-header.th-slate {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    color: #334155;
    border-bottom: 2px solid #E2E8F0;
}
.sip-tbl-header.th-slate::before { background: linear-gradient(to bottom, #64748B, #475569); }
[data-theme="dark"] .sip-tbl-header.th-slate {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    color: #CBD5E1;
    border-color: #334155;
}

/* ====================================================================
   GLOBAL EXECUTIVE KPI GRID & CARDS (Digunakan di Realisasi, Usulan, dll)
   ==================================================================== */
.rl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
    width: 100%;
}
.rl-kpi-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-md, 14px);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-subtle, 0 2px 8px rgba(0,0,0,0.03));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rl-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover, 0 8px 20px rgba(2, 136, 209, 0.08));
}
.rl-kpi-icon-bubble {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
[data-theme="dark"] .rl-kpi-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Badge Tahun Anggaran pada Baris Tabel */
.tahun-badge {
    display: inline-block;
    background: rgba(2, 136, 209, 0.1);
    border: 1px solid rgba(2, 136, 209, 0.25);
    color: #0277BD;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    margin-top: 3px;
}
[data-theme="dark"] .tahun-badge {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.25);
    color: #38BDF8;
}

/* ==================================================================== */
/* 7. PEMILIHAN METODE TITIK KOORDINAT (GPS VS MANUAL)                   */
/* ==================================================================== */
.coord-btn-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 640px) {
    .coord-btn-selection {
        grid-template-columns: 1fr;
    }
}
.coord-choice-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    color: var(--text-main, #1E293B);
    cursor: pointer;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
    width: 100%;
}
.coord-choice-btn:hover {
    background: #F0F9FF;
    border-color: #0288D1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.10);
}
.coord-choice-btn.active {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border-color: #0288D1;
    border-width: 2px;
    color: #01579B;
    box-shadow: 0 4px 14px rgba(2, 136, 209, 0.18);
}
.coord-choice-btn.active::after {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 13px;
    color: #0288D1;
    font-weight: 800;
}
.coord-choice-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #0288D1;
    transition: all 0.2s ease;
}
.coord-choice-btn.active .coord-choice-icon {
    background: #0288D1;
    border-color: #0288D1;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(2, 136, 209, 0.35);
}
.coord-choice-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.coord-choice-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}
.coord-choice-desc {
    font-size: 10.5px;
    color: var(--text-muted, #64748B);
    line-height: 1.3;
}
.coord-choice-btn.active .coord-choice-desc {
    color: #0369A1;
}

.sip-coord-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1.4;
    transition: all 0.2s ease;
}
.sip-coord-alert.alert-info {
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    color: #0369A1;
}
.sip-coord-alert.alert-warning {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
}
.sip-coord-alert.alert-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}

/* Dark theme support untuk pemilihan metode koordinat */
[data-theme="dark"] .coord-choice-btn {
    background: #1E293B;
    border-color: #334155;
    color: #F1F5F9;
}
[data-theme="dark"] .coord-choice-btn:hover {
    background: #0F2D4A;
    border-color: #0288D1;
}
[data-theme="dark"] .coord-choice-btn.active {
    background: #0C3456;
    border-color: #38BDF8;
    color: #38BDF8;
}
[data-theme="dark"] .coord-choice-btn.active::after {
    color: #38BDF8;
}
[data-theme="dark"] .coord-choice-icon {
    background: #0F172A;
    border-color: #334155;
    color: #38BDF8;
}
[data-theme="dark"] .coord-choice-btn.active .coord-choice-icon {
    background: #0288D1;
    border-color: #0288D1;
    color: #FFFFFF;
}
[data-theme="dark"] .coord-choice-desc {
    color: #94A3B8;
}
[data-theme="dark"] .coord-choice-btn.active .coord-choice-desc {
    color: #7DD3FC;
}
[data-theme="dark"] .sip-coord-alert.alert-info {
    background: #0C3456;
    border-color: #1E3A5F;
    color: #7DD3FC;
}
[data-theme="dark"] .sip-coord-alert.alert-warning {
    background: #3B2A10;
    border-color: #78350F;
    color: #FDE68A;
}
[data-theme="dark"] .sip-coord-alert.alert-success {
    background: #064E3B;
    border-color: #047857;
    color: #A7F3D0;
}

/* ====================================================================
   SIPRIJA ULTRA-MODERN RUPIAH INPUT GROUP (RAB & ANGGARAN)
   ==================================================================== */
.sip-rupiah-input-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border-blue, #BAE6FD);
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.22s ease;
}
.sip-rupiah-input-group:focus-within {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.sip-rupiah-prefix {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
    font-weight: 800;
    font-size: 14.5px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border-right: 1.5px solid #A7F3D0;
    user-select: none;
    letter-spacing: 0.5px;
}
.sip-rupiah-input {
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    box-shadow: none !important;
    flex: 1;
    background: transparent !important;
}
.sip-rupiah-terbilang-box {
    font-size: 11.5px;
    font-weight: 600;
    color: #047857;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    padding: 6px 12px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    transition: all 0.2s ease;
}
[data-theme="dark"] .sip-rupiah-input-group {
    background: #0F172A;
    border-color: #334155;
}
[data-theme="dark"] .sip-rupiah-prefix {
    background: #064E3B;
    color: #A7F3D0;
    border-right-color: #047857;
}
[data-theme="dark"] .sip-rupiah-input {
    color: #F1F5F9 !important;
}
[data-theme="dark"] .sip-rupiah-terbilang-box {
    background: #064E3B;
    color: #A7F3D0;
    border-color: #047857;
}

/* ====================================================================
   SIPRIJA MULTI-DEVICE RESPONSIVE DESIGN SYSTEM
   Optimized for: Smartphone / HP (<= 640px), Tablet (641px - 1024px), Laptop & Desktop (>= 1025px)
   Features:
   1. Dapat Dibaca (Fluid typography, high contrast, readable tables & stats)
   2. Dapat Diklik (Ergonomic 40px+ tap targets, no mis-clicks, touch-action: manipulation)
   3. Dilihat Enak (Modern cards, smooth wrapping, zero horizontal overflow, dark & light harmony)
   ==================================================================== */

/* --- 1. GLOBAL TOUCH & ERGONOMICS (ALL DEVICES) --- */
button, 
a, 
input, 
select, 
textarea, 
.btn, 
.sip-btn, 
.sip-filter-pill, 
.coord-choice-btn, 
.paginate_button,
.sip-topbar-toggle,
.sip-theme-toggle,
.sip-user-badge-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth Table Responsive Scroll Wrapper */
.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Prevent unwanted horizontal overflow globally */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 7 Kriteria DSS Grid Responsive Container */
.sip-7kriteria-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.sip-7kriteria-item {
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 8px 4px;
    border-radius: 8px;
    min-width: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sip-7kriteria-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(2, 136, 209, 0.12);
}
.sip-7kriteria-val {
    font-size: 14px;
    font-weight: 800;
    color: #0288D1;
    line-height: 1.2;
}
.sip-7kriteria-lbl {
    font-size: 11px;
    color: #334155;
    font-weight: 600;
    margin-top: 2px;
}
[data-theme="dark"] .sip-7kriteria-item {
    background: #0F172A;
    border-color: #1E3A5F;
}
[data-theme="dark"] .sip-7kriteria-val {
    color: #38BDF8;
}
[data-theme="dark"] .sip-7kriteria-lbl {
    color: #94A3B8;
}

/* --- 2. TABLET ADAPTATION (641px - 1024px) --- */
@media (max-width: 1024px) and (min-width: 641px) {
    /* Topbar Layout */
    .sip-topbar {
        padding: 0 20px !important;
        height: 66px !important;
    }
    .sip-topbar-title h1 {
        font-size: 15px !important;
        max-width: 280px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 7 Kriteria on Tablet: 4 and 3 columns */
    .sip-7kriteria-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    /* KPI Grids: 2 Columns */
    .rl-kpi-grid,
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* Quick Nav Cards: 2-3 Columns */
    .sip-quick-nav-card {
        padding: 14px 16px;
    }

    /* Action buttons tap target */
    .sip-datatable .btn-icon,
    .btn-icon {
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    /* Modal size on Tablet */
    .sip-modal,
    .modal-box {
        max-width: 88vw !important;
        width: 88vw !important;
    }

    /* GIS Map on Tablet */
    .gis-map-card {
        height: 520px !important;
    }
}

/* --- 3. SMARTPHONE / HP ADAPTATION (max-width: 640px) --- */
@media (max-width: 640px) {
    /* 3.1. TOPBAR ERGONOMICS */
    .sip-topbar {
        padding: 0 12px !important;
        height: 58px !important;
    }
    .sip-topbar-left {
        gap: 8px !important;
        margin-right: 6px !important;
    }
    .sip-topbar-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 22px !important;
        border-radius: 10px !important;
        background: rgba(2, 136, 209, 0.08) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    [data-theme="dark"] .sip-topbar-toggle {
        background: rgba(56, 189, 248, 0.12) !important;
    }
    .sip-topbar-title h1 {
        font-size: 13px !important;
        max-width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    .sip-topbar-pill {
        display: none !important;
    }
    .sip-topbar-right {
        gap: 6px !important;
    }
    .sip-theme-toggle {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .theme-text-label {
        display: none !important;
    }
    .sip-user-badge-btn {
        height: 38px !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
        gap: 4px !important;
    }
    .sip-user-badge-logo {
        width: 30px !important;
        height: 30px !important;
    }
    .sip-user-info,
    .sip-dropdown-arrow {
        display: none !important;
    }
    
    /* User Dropdown Position on Mobile */
    .sip-dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
    }

    /* 3.2. HERO BANNER & STATS ROW */
    .hero-banner {
        padding: 16px 14px !important;
        border-radius: 12px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .hero-title h2 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    .hero-title p {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin-top: 4px !important;
    }
    .hero-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .hero-stat-card {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        text-align: center !important;
    }
    .hero-stat-val {
        font-size: 18px !important;
        font-weight: 800 !important;
    }
    .hero-stat-lbl {
        font-size: 10.5px !important;
        margin-top: 2px !important;
    }
    .hero-actions,
    .hero-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 3.3. YEAR FILTER BAR ON MOBILE */
    .sip-year-filter-bar {
        padding: 12px 14px !important;
        border-radius: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .year-filter-left {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .year-select-container {
        width: 100% !important;
    }
    .year-filter-select {
        width: 100% !important;
        min-height: 42px !important;
        font-size: 13.5px !important;
    }
    .year-filter-reset-btn {
        width: 100% !important;
        min-height: 38px !important;
        justify-content: center !important;
    }
    .year-filter-info {
        width: 100% !important;
        text-align: center !important;
    }
    .year-filter-chip {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        font-size: 11.5px !important;
    }

    /* 3.4. KPI CARDS (2-COLUMN COMPACT ON HP) */
    .rl-kpi-grid,
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    .rl-kpi-card {
        padding: 12px 14px !important;
        border-radius: 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .rl-kpi-card > div:first-child > div:first-child {
        font-size: 10.5px !important;
    }
    .rl-kpi-card > div:first-child > div:nth-child(2) {
        font-size: 18px !important;
        margin-top: 2px !important;
    }
    .rl-kpi-card > div:first-child > div:last-child {
        font-size: 10px !important;
        display: none !important; /* Hide small subtitle to keep card compact */
    }
    .rl-kpi-icon-bubble {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* 3.5. QUICK NAV CARDS ON MOBILE */
    .sip-quick-nav-card {
        padding: 12px 14px !important;
        min-height: 48px !important;
    }
    .sip-quick-nav-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    /* 3.6. 7 KRITERIA GRID ON MOBILE: 2-3 COLUMNS READABLE */
    .sip-7kriteria-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    .sip-7kriteria-val {
        font-size: 13px !important;
    }
    .sip-7kriteria-lbl {
        font-size: 10px !important;
    }

    /* 3.7. TAB FILTER PILLS ON MOBILE (HORIZONTAL SCROLLING) */
    .tab-jenis-pill,
    .sip-filter-pill {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* 3.8. CARDS & SECTIONS */
    .sip-card {
        padding: 14px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }
    .sip-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    .sip-card-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    /* 3.9. TABLE HEADER & ACTIONS BAR ON MOBILE */
    .sip-tbl-header {
        padding: 12px 14px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .tbl-header-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-left: 0 !important;
    }
    .tbl-header-actions .btn,
    .tbl-header-actions a,
    .tbl-header-actions button {
        flex: 1 1 auto !important;
        min-height: 38px !important;
        justify-content: center !important;
        font-size: 12px !important;
        text-align: center !important;
    }
    .tbl-header-count {
        align-self: flex-start !important;
    }

    /* 3.10. DATATABLES MOBILE CONTROLS & CELLS (PASTI SATU BARIS) */
    .dataTables_wrapper {
        padding: 8px 0 !important;
    }
    .sip-dt-toolbar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }
    .sip-dt-toolbar .dataTables_length,
    .dataTables_wrapper .dataTables_length {
        width: auto !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
    }
    .sip-dt-toolbar .dataTables_length select,
    .dataTables_wrapper .dataTables_length select {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 0 24px 0 8px !important;
    }
    .sip-dt-toolbar .dataTables_filter,
    .dataTables_wrapper .dataTables_filter {
        width: auto !important;
        margin: 0 !important;
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
    }
    .sip-dt-toolbar .dataTables_filter label,
    .dataTables_wrapper .dataTables_filter label {
        width: auto !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        height: 36px !important;
        line-height: 36px !important;
    }
    .sip-dt-toolbar .dataTables_filter input,
    .dataTables_wrapper .dataTables_filter input {
        width: 140px !important;
        height: 36px !important;
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Table row cells & action buttons on mobile */
    table.sip-datatable th,
    table.sip-datatable td {
        padding: 10px 8px !important;
        font-size: 12.5px !important;
    }
    .sip-datatable .btn-icon,
    .btn-icon {
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    /* DataTables Pagination on Mobile */
    .dataTables_wrapper .dataTables_paginate {
        margin-top: 14px !important;
        gap: 4px !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        margin: 2px !important;
    }

    /* 3.11. FORM INPUTS & PREVENT IOS AUTO-ZOOM */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
        min-height: 44px !important;
        border-radius: 8px !important;
    }
    .form-row-2,
    .form-row-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .coord-choice-btn {
        min-height: 52px !important;
        padding: 12px 14px !important;
    }
    .coord-choice-title {
        font-size: 13px !important;
    }
    .coord-choice-desc {
        font-size: 11px !important;
    }

    /* 3.12. MODAL DIALOGS ON MOBILE */
    .modal-overlay {
        padding: 6px !important;
    }
    .sip-modal,
    .modal-box,
    .sip-modal-content,
    .modal-dialog {
        width: 100% !important;
        max-width: 98vw !important;
        max-height: 94vh !important;
        border-radius: 14px !important;
    }
    .sip-modal-header {
        padding: 12px 14px !important;
    }
    .sip-modal-header h3 {
        font-size: 13.5px !important;
    }
    .sip-modal-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 20px !important;
    }
    .sip-modal-body {
        padding: 12px 12px !important;
        max-height: calc(94vh - 120px) !important;
    }
    .sip-modal-footer {
        padding: 12px 12px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .sip-modal-footer .btn,
    .sip-modal-footer .sip-btn {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        font-size: 13.5px !important;
    }

    /* 3.13. GIS MAP ON MOBILE */
    .gis-map-card {
        height: 440px !important;
        min-height: 380px !important;
    }
    .gis-sidebar-card {
        height: auto !important;
        max-height: 440px !important;
        padding: 12px !important;
    }
    .gis-map-sidebar-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .gis-unified-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .gis-legend-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .hud-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    /* 3.14. FOOTER ON MOBILE */
    .sip-footer {
        padding: 16px 14px !important;
        text-align: center !important;
    }
    .sip-footer-content {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }
}

/* ====================================================================
   FITUR MODERN SIPRIJA: COMMAND PALETTE, NOTIF DRAWER & GUIDED TOUR
   ==================================================================== */

/* 1. TOPBAR BUTTONS */
.sip-topbar-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    padding: 7px 12px;
    border-radius: 99px;
    color: #64748B;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}
.sip-topbar-search-btn:hover {
    background: #E2E8F0;
    border-color: #CBD5E1;
    color: #1E293B;
}
.search-btn-kbd {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.sip-topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 7px 12px;
    border-radius: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.sip-topbar-icon-btn:hover {
    background: #EFF6FF;
    border-color: #BAE6FD;
    color: #0288D1;
}

.sip-notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #EF4444;
    color: #FFF;
    font-size: 10px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFF;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
}

/* 2. COMMAND PALETTE MODAL */
.sip-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    padding-left: 16px;
    padding-right: 16px;
}
.sip-palette-container {
    width: 100%;
    max-width: 620px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
    overflow: hidden;
    border: 1.5px solid #E2E8F0;
    animation: paletteSlideDown 0.18s ease-out;
}
@keyframes paletteSlideDown {
    from { opacity: 0; transform: translateY(-16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.sip-palette-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}
.sip-palette-search-icon {
    font-size: 18px;
    color: #0288D1;
}
.sip-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14.5px;
    font-weight: 500;
    color: #0F172A;
}
.sip-palette-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #94A3B8;
    cursor: pointer;
    line-height: 1;
}
.sip-palette-close:hover {
    color: #0F172A;
}
.sip-palette-body {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
}
.sip-palette-group-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94A3B8;
    padding: 8px 12px 4px 12px;
}
.sip-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sip-palette-item:hover,
.sip-palette-item.active {
    background: #F0F9FF;
}
.sip-palette-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.sip-palette-item-info {
    flex: 1;
    min-width: 0;
}
.sip-palette-item-title {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sip-palette-item-desc {
    font-size: 11.5px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sip-palette-item-action {
    font-size: 12px;
    color: #94A3B8;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.sip-palette-item:hover .sip-palette-item-action,
.sip-palette-item.active .sip-palette-item-action {
    opacity: 1;
    color: #0288D1;
}
.sip-palette-empty {
    padding: 36px 16px;
    text-align: center;
}
.sip-palette-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    font-size: 11px;
    color: #64748B;
}
.sip-palette-hints {
    display: flex;
    gap: 12px;
}
.sip-palette-hints kbd {
    background: #FFF;
    border: 1px solid #CBD5E1;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
}

/* 3. NOTIFICATION DRAWER */
.sip-notif-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    z-index: 99990;
}
.sip-notif-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 92vw;
    height: 100vh;
    background: #FFFFFF;
    box-shadow: -8px 0 30px rgba(0,0,0,0.18);
    z-index: 99995;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.sip-notif-drawer.open {
    transform: translateX(0);
}
.sip-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}
.sip-notif-header-icon {
    width: 34px;
    height: 34px;
    background: #EFF6FF;
    color: #0288D1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.sip-notif-action-btn {
    background: none;
    border: 1px solid #CBD5E1;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.sip-notif-action-btn:hover {
    background: #EFF6FF;
    border-color: #BAE6FD;
    color: #0288D1;
}
.sip-notif-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: #94A3B8;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.sip-notif-close-btn:hover {
    color: #0F172A;
}
.sip-notif-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sip-notif-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    transition: all 0.2s ease;
}
.sip-notif-item.unread {
    background: #F0F9FF;
    border-color: #BAE6FD;
}
.sip-notif-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.sip-notif-item-icon.bg-red { background: #FEE2E2; color: #DC2626; }
.sip-notif-item-icon.bg-amber { background: #FEF3C7; color: #D97706; }
.sip-notif-item-icon.bg-green { background: #DCFCE7; color: #16A34A; }
.sip-notif-item-content { flex: 1; min-width: 0; }
.sip-notif-item-title { font-size: 12.5px; font-weight: 700; color: #0F172A; margin-bottom: 3px; }
.sip-notif-item-text { font-size: 11.5px; color: #475569; line-height: 1.45; }
.sip-notif-item-time { font-size: 10.5px; color: #94A3B8; margin-top: 6px; }
.sip-notif-link { color: #0288D1; text-decoration: none; font-weight: 700; }
.sip-notif-footer {
    padding: 12px 18px;
    border-top: 1px solid #E2E8F0;
    background: #F8FAFC;
}

/* 4. GUIDED TOUR MODAL */
.sip-tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sip-tour-card {
    width: 100%;
    max-width: 520px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    overflow: hidden;
    animation: tourPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1.5px solid #E2E8F0;
}
@keyframes tourPop {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
.sip-tour-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}
.sip-tour-badge {
    font-size: 11px;
    font-weight: 800;
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    padding: 3px 10px;
    border-radius: 99px;
}
.sip-tour-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #94A3B8;
    cursor: pointer;
    line-height: 1;
}
.sip-tour-close:hover { color: #0F172A; }
.sip-tour-body { padding: 24px 22px; }
.sip-tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
}
.sip-tour-dots {
    display: flex;
    gap: 6px;
}
.sip-tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #CBD5E1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sip-tour-dot.active {
    width: 22px;
    border-radius: 99px;
    background: #0288D1;
}

/* 5. RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    .search-btn-label { display: none; }
    .search-btn-kbd { display: none; }
    .sip-topbar-search-btn { padding: 7px 10px; border-radius: 8px; }
    .icon-btn-label { display: none; }
    .sip-palette-overlay { padding-top: 6vh; }
}

/* 6. DARK MODE OVERRIDES */
[data-theme="dark"] .sip-topbar-search-btn {
    background: #1E293B;
    border-color: #334155;
    color: #94A3B8;
}
[data-theme="dark"] .search-btn-kbd {
    background: #0F172A;
    border-color: #475569;
    color: #CBD5E1;
}
[data-theme="dark"] .sip-topbar-icon-btn {
    background: #1E293B;
    border-color: #334155;
    color: #E2E8F0;
}
[data-theme="dark"] .sip-palette-container,
[data-theme="dark"] .sip-notif-drawer,
[data-theme="dark"] .sip-tour-card {
    background: #0F172A;
    border-color: #334155;
    color: #F8FAFC;
}
[data-theme="dark"] .sip-palette-header,
[data-theme="dark"] .sip-palette-footer,
[data-theme="dark"] .sip-notif-header,
[data-theme="dark"] .sip-notif-footer,
[data-theme="dark"] .sip-tour-header,
[data-theme="dark"] .sip-tour-footer {
    background: #1E293B;
    border-color: #334155;
}
[data-theme="dark"] .sip-palette-input {
    color: #F8FAFC;
}
[data-theme="dark"] .sip-palette-item:hover,
[data-theme="dark"] .sip-palette-item.active {
    background: #1E293B;
}
[data-theme="dark"] .sip-palette-item-title {
    color: #F8FAFC;
}
[data-theme="dark"] .sip-notif-item {
    background: #1E293B;
    border-color: #334155;
}
[data-theme="dark"] .sip-notif-item.unread {
    background: #1E293B;
    border-color: #0288D1;
}
[data-theme="dark"] .sip-notif-item-title {
    color: #F8FAFC;
}
[data-theme="dark"] .sip-notif-item-text {
    color: #94A3B8;
}

/* ==========================================================================
   SLIDE-OVER QUICK PREVIEW DRAWER & PULSING STATUS INDICATORS
   ========================================================================== */
.sip-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1050;
}

.sip-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.sip-quick-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 92vw;
    background: #FFFFFF;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1055;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sip-quick-drawer.active {
    transform: translateX(0);
}

.sip-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border-bottom: 1px solid #BAE6FD;
}

.sip-drawer-title-box {
    flex: 1;
    min-width: 0;
}

.sip-drawer-title {
    font-size: 15px;
    font-weight: 800;
    color: #0369A1;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sip-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(2, 136, 209, 0.12);
    color: #0288D1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 12px;
}

.sip-drawer-close:hover {
    background: #E11D48;
    color: #FFFFFF;
}

.sip-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sip-drawer-section {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
}

.sip-drawer-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sip-drawer-footer {
    padding: 14px 20px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Pulsing Status Indicators */
.pulse-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.pulse-dot.success {
    background: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulseGlowSuccess 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

.pulse-dot.warning {
    background: #F59E0B;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulseGlowWarning 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

.pulse-dot.danger {
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: pulseGlowDanger 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

.pulse-dot.info {
    background: #0288D1;
    box-shadow: 0 0 0 0 rgba(2, 136, 209, 0.7);
    animation: pulseGlowInfo 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulseGlowSuccess {
    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); }
}

@keyframes pulseGlowWarning {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

@keyframes pulseGlowDanger {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes pulseGlowInfo {
    0% { box-shadow: 0 0 0 0 rgba(2, 136, 209, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(2, 136, 209, 0); }
    100% { box-shadow: 0 0 0 0 rgba(2, 136, 209, 0); }
}

/* Financial Metrics Ticker for Dashboard */
.sip-metrics-ticker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.sip-ticker-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.sip-ticker-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.sip-ticker-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.sip-ticker-info {
    flex: 1;
    min-width: 0;
}

.sip-ticker-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
    margin-bottom: 3px;
}

.sip-ticker-value {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.sip-ticker-sub {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
}

/* Dark Mode Support for Quick Drawer & Ticker */
[data-theme="dark"] .sip-quick-drawer {
    background: #0F172A;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .sip-drawer-header {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    border-color: #334155;
}

[data-theme="dark"] .sip-drawer-title {
    color: #38BDF8;
}

[data-theme="dark"] .sip-drawer-section,
[data-theme="dark"] .sip-drawer-footer {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .sip-ticker-card {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .sip-ticker-value {
    color: #F8FAFC;
}

/* Hilangkan kotak prefix Rp di halaman analisis dan realisasi sesuai instruksi pengguna */
body.page-analisis .sip-rupiah-prefix,
body.page-realisasi .sip-rupiah-prefix,
#modalUpdateRealisasi .sip-rupiah-prefix,
#modalKeputusanPimpinan .sip-rupiah-prefix {
    display: none !important;
}

body.page-analisis .sip-rupiah-input-group,
body.page-realisasi .sip-rupiah-input-group,
#modalUpdateRealisasi .sip-rupiah-input-group,
#modalKeputusanPimpinan .sip-rupiah-input-group {
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#modalUpdateRealisasi .sip-rupiah-input,
#modalKeputusanPimpinan .sip-rupiah-input {
    border: 1px solid var(--border-color, #E2E8F0) !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    width: 100% !important;
}

/* ==============================================================
   GIS MAP ADVANCED FEATURES (CLUSTER, MEASURE TOOL, HEATMAP)
============================================================== */
.hud-tool-btn.active-tool {
    background: #0288D1 !important;
    color: #FFF !important;
    border-color: #0288D1 !important;
    box-shadow: 0 2px 8px rgba(2, 136, 209, 0.4) !important;
}

/* Floating Measurement Tool Bar / Badge */
.gis-measure-badge {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    background: rgba(15, 23, 42, 0.94);
    color: #FFF;
    padding: 8px 16px;
    border-radius: 50px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    border: 1.5px solid #0288D1;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
}
.measure-badge-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0288D1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #FFF;
    flex-shrink: 0;
}
.measure-badge-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.measure-badge-title {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.measure-badge-val {
    font-size: 14.5px;
    color: #38BDF8;
    font-weight: 800;
    font-family: monospace;
}

/* Custom Marker Cluster Styling */
.marker-cluster-small {
    background-color: rgba(2, 136, 209, 0.25) !important;
}
.marker-cluster-small div {
    background: linear-gradient(135deg, #0288D1 0%, #01579B 100%) !important;
    color: #FFF !important;
    font-weight: 800 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.4) !important;
}
.marker-cluster-medium {
    background-color: rgba(16, 185, 129, 0.25) !important;
}
.marker-cluster-medium div {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFF !important;
    font-weight: 800 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}
.marker-cluster-large {
    background-color: rgba(245, 158, 11, 0.25) !important;
}
.marker-cluster-large div {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    color: #FFF !important;
    font-weight: 800 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
}

/* ==============================================================
   KOMPETENSI RADAR & MATRIKS KESIAPAN SDM 13 KABUPATEN/KOTA
============================================================== */
.kompetensi-radar-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 992px) {
    .kompetensi-radar-grid {
        grid-template-columns: 1fr;
    }
}
.radar-chart-container {
    position: relative;
    width: 100%;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.readiness-rank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.readiness-rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-card-header);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}
.readiness-rank-item:hover {
    transform: translateX(4px);
    border-color: #0288D1;
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.08);
}
.pilar-mini-scores {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.pilar-mini-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.rekomendasi-diklat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(2, 136, 209, 0.08);
    color: #0288D1;
    border: 1px solid rgba(2, 136, 209, 0.2);
    text-decoration: none;
    max-width: 260px;
    line-height: 1.3;
}
.rekomendasi-diklat-chip:hover {
    background: rgba(2, 136, 209, 0.15);
    color: #01579B;
}

/* ==============================================================
   REALISASI: BURN-RATE TRACKER & KENDALA MITIGASI RISIKO
============================================================== */
.burn-rate-kendala-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 992px) {
    .burn-rate-kendala-grid {
        grid-template-columns: 1fr;
    }
}
.burn-stat-box {
    background: var(--bg-card-header);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
}
.kendala-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}
.kendala-item-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    transition: all 0.2s ease;
    border-left: 4px solid #0288D1;
}
.kendala-item-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border-color: #0288D1;
}
.kendala-item-card.status-open {
    border-left-color: #EF4444;
}
.kendala-item-card.status-proses {
    border-left-color: #F59E0B;
}
.kendala-item-card.status-tuntas {
    border-left-color: #10B981;
}
.kendala-cat-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}