/**
* SIMBUN (Sistem Informasi Manajemen Buncis)
* iOS-Inspired Production Design System CSS
* Primary Theme: Soft Green (Agri-Tech), Clean Whites, Subtle Slate Greys
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Palette: Soft Modern Green & Neutral iOS Grays */
    --ios-primary: #15803D;
    --ios-primary-hover: #166534;
    --ios-primary-light: #ECFDF5;
    --ios-primary-subtle: #D1FAE5;
    --ios-primary-border: #A7F3D0;

    --ios-bg: #F8FAFC;
    --ios-card-bg: #FFFFFF;
    --ios-text: #0F172A;
    --ios-text-secondary: #64748B;
    --ios-text-tertiary: #94A3B8;
    --ios-border: #E2E8F0;
    --ios-border-focus: #16A34A;

    /* Shadows */
    --ios-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ios-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    --ios-shadow-md: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 8px -2px rgba(15, 23, 42, 0.04);
    --ios-shadow-lg: 0 14px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 14px -4px rgba(15, 23, 42, 0.04);
    --ios-shadow-modal: 0 24px 60px -8px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);

    /* iOS System Accents */
    --ios-blue: #0284C7;
    --ios-blue-light: #F0F9FF;
    --ios-green: #16A34A;
    --ios-green-light: #F0FDF4;
    --ios-yellow: #CA8A04;
    --ios-yellow-light: #FEFCE8;
    --ios-orange: #EA580C;
    --ios-orange-light: #FFF7ED;
    --ios-red: #DC2626;
    --ios-red-light: #FEF2F2;
    --ios-purple: #7C3AED;
    --ios-purple-light: #F5F3FF;
    --ios-neutral-light: #F1F5F9;

    /* Metrics & Radii */
    --ios-radius-sm: 8px;
    --ios-radius-md: 12px;
    --ios-radius-lg: 18px;
    --ios-radius-xl: 24px;
    --sidebar-width: 270px;
    --header-height: 72px;

    /* Transitions */
    --ios-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ios-transition: all 0.22s var(--ios-spring);
}
* { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #F8FAFC; background-image:
        radial-gradient(at 100% 0%, rgba(21, 128, 61, 0.04) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(14, 165, 233, 0.03) 0px, transparent 50%); background-attachment: fixed; color: var(--ios-text); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; }

/* ==========================================================================
LAYOUT STRUCTURE: SIDEBAR & MAIN WRAPPER
========================================================================== */
.app-wrapper { display: flex; min-height: 100vh; position: relative; width: 100%; }

/* Sidebar */
.app-sidebar { width: var(--sidebar-width); background: #F8FAFC; border-right: 1px solid #E2E8F0; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040; display: flex; flex-direction: column; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
.sidebar-header { height: var(--header-height); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E2E8F0; background: #F8FAFC; flex-shrink: 0; }
.brand-logo { display: flex; align-items: center; text-decoration: none; color: var(--ios-text); -webkit-tap-highlight-color: transparent; }
.brand-wrapper-full { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.sidebar-brand-icon { height: 38px; width: auto; object-fit: contain; display: block; flex-shrink: 0; }
.brand-divider { width: 1.5px; height: 30px; background-color: #CBD5E1; margin: 0 11px; flex-shrink: 0; }
.brand-text-group { display: flex; flex-direction: column; justify-content: center; text-align: left; }
.brand-title-simbun { font-size: 21px; font-weight: 800; color: #166534; letter-spacing: -0.3px; line-height: 1; margin: 0; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.brand-subtitle-simbun { font-size: 9.5px; font-weight: 600; color: #1E293B; letter-spacing: -0.15px; line-height: 1.2; margin-top: 3px; white-space: nowrap; }
.sidebar-logo-mini { height: 36px; width: 36px; object-fit: contain; display: none; transition: all 0.2s ease; }
.brand-icon-box { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #15803D 0%, #16A34A 100%); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 22px; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35); }
.brand-title { font-weight: 800; font-size: 19px; letter-spacing: -0.5px; line-height: 1.1; margin: 0; color: #0F172A; }
.brand-subtitle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ios-primary); }

/* Sidebar Navigation Items */
.sidebar-content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 14px; }
.sidebar-content::-webkit-scrollbar { width: 4px; }
.sidebar-content::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 4px; }
.nav-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ios-text-secondary); padding: 14px 14px 6px; }
.nav-item { margin-bottom: 3px; list-style: none; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--ios-radius-md); color: #334155; font-weight: 600; font-size: 13.5px; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; position: relative; outline: none !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation; }
.nav-link i { font-size: 17px; width: 20px; text-align: center; color: #94A3B8; transition: color 0.15s ease, transform 0.15s ease; }
.nav-link:focus, .nav-link:focus-visible { outline: none !important; box-shadow: none !important; }
.nav-link:not(.active):hover { background: #E2E8F0 !important; color: #0F172A !important; transform: translateX(2px); }
.nav-link:not(.active):hover i { color: var(--ios-primary) !important; transform: scale(1.08); }
.nav-link:not(.active):active { transform: scale(0.98); }

/* Active State: Persistent Solid Apple Green, White Text & Icon, ZERO Flicker */
.nav-link.active, .nav-link.active:hover, .nav-link.active:focus, .nav-link.active:focus-visible, .nav-link.active:active { background: linear-gradient(135deg, #15803D 0%, #16A34A 100%) !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(21, 128, 61, 0.32) !important; transform: none !important; outline: none !important; transition: none !important; }
.nav-link.active i, .nav-link.active:hover i, .nav-link.active:focus i, .nav-link.active:focus-visible i, .nav-link.active:active i, .nav-link.active span, .nav-link.active:hover span, .nav-link.active:focus span, .nav-link.active:focus-visible span, .nav-link.active:active span { color: #FFFFFF !important; transform: scale(1.05) !important; transition: none !important; }
.sidebar-footer { padding: 14px 16px; border-top: 1px solid #E2E8F0; background: #F8FAFC; flex-shrink: 0; transform: translateZ(0); backface-visibility: hidden; }

/* ==========================================================================
SIDEBAR UNDUH APLIKASI (MOBILE PWA & APK) - ELEGANT & PROFESSIONAL
========================================================================== */
.sidebar-apk-btn { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 8px 10px !important; border-radius: 12px !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; outline: none !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; transform: translateZ(0); backface-visibility: hidden; }
.sidebar-apk-btn:hover { background: #FFFFFF !important; border-color: #10B981 !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15) !important; transform: translateY(-1px) !important; }
.sidebar-apk-btn:active { transform: scale(0.98) !important; }
.sidebar-apk-btn .apk-icon-wrap { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important; color: #059669 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; flex-shrink: 0 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; transition: transform 0.2s ease !important; }
.sidebar-apk-btn:hover .apk-icon-wrap { transform: scale(1.06) !important; }
.sidebar-apk-btn .apk-info-wrap { min-width: 0 !important; flex: 1 !important; text-align: left !important; }
.sidebar-apk-btn .apk-btn-title { font-size: 12px !important; font-weight: 700 !important; color: #0F172A !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.sidebar-apk-btn .apk-btn-sub { font-size: 10.5px !important; font-weight: 600 !important; color: #059669 !important; line-height: 1.2 !important; margin-top: 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.sidebar-apk-btn .apk-action-pill { width: 24px !important; height: 24px !important; border-radius: 7px !important; background: #F1F5F9 !important; color: #64748B !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; flex-shrink: 0 !important; transition: all 0.2s ease !important; }
.sidebar-apk-btn:hover .apk-action-pill { background: #059669 !important; color: #FFFFFF !important; transform: translateY(1px) !important; }
.user-compact-card { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px 10px; border-radius: var(--ios-radius-md); background: #FFFFFF; border: 1px solid #E2E8F0; outline: none !important; overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent !important; transform: translateZ(0); backface-visibility: hidden; }
.user-compact-card:focus, .user-compact-card:focus-visible, .user-compact-card:active { outline: none !important; box-shadow: none !important; border-color: #E2E8F0 !important; }
.user-compact-card:hover { background: #FFFFFF; border-color: #CBD5E1; box-shadow: var(--ios-shadow-sm); outline: none !important; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.user-avatar-circle { width: 40px; height: 40px; border-radius: 50%; background: #E2E8F0; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); outline: none !important; border: 2px solid #FFFFFF; -webkit-tap-highlight-color: transparent !important; transform: translateZ(0); backface-visibility: hidden; }
.user-avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; outline: none !important; border: none !important; border-radius: 50%; transform: translateZ(0); }
.user-compact-info { flex: 1; min-width: 0; overflow: hidden; transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.user-compact-name { font-weight: 700; font-size: 13.5px; color: var(--ios-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-compact-role { font-size: 11.5px; color: var(--ios-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Main Content Area */
.app-main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-width: 0; transition: var(--ios-transition); }

/* Header Navbar */
.app-header { height: var(--header-height); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--ios-border); position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.header-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }

/* Sidebar Toggle Button (Desktop & Mobile) */
.sidebar-toggle-btn { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid #E2E8F0; background: #FFFFFF; color: #1E293B; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); position: relative; flex-shrink: 0; }
.sidebar-toggle-btn:hover { background: #F8FAFC; color: var(--ios-primary); border-color: #CBD5E1; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.sidebar-close-btn { width: 36px !important; height: 36px !important; border-radius: 11px !important; margin-left: 8px !important; }
@media (min-width: 992px) { .sidebar-close-btn { display: none !important; } }
@media (max-width: 991.98px) { .sidebar-close-btn { display: inline-flex !important; } }
.sidebar-toggle-btn:active { transform: scale(0.94); background: #F1F5F9; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.sidebar-toggle-btn:focus-visible { outline: 2px solid var(--ios-primary); outline-offset: 2px; }
.sidebar-toggle-btn .sidebar-icon { display: block; transition: all 0.2s ease; }

/* Default state on Desktop: Sidebar is Expanded (Open) */
.sidebar-toggle-btn .sidebar-icon-open { display: block; }
.sidebar-toggle-btn .sidebar-icon-closed { display: none; }

/* Collapsed / Hidden state on Desktop */
.sidebar-hidden .sidebar-toggle-btn .sidebar-icon-open, .sidebar-collapsed .sidebar-toggle-btn .sidebar-icon-open, html.sidebar-init-hidden .sidebar-toggle-btn .sidebar-icon-open { display: none !important; }
.sidebar-hidden .sidebar-toggle-btn .sidebar-icon-closed, .sidebar-collapsed .sidebar-toggle-btn .sidebar-icon-closed, html.sidebar-init-hidden .sidebar-toggle-btn .sidebar-icon-closed { display: block !important; }

/* Mobile drawer toggle icons */

@media (max-width: 991.98px) {
    .sidebar-toggle-btn .sidebar-icon-open { display: none; }
    .sidebar-toggle-btn .sidebar-icon-closed { display: block; }
    .drawer-open .sidebar-toggle-btn .sidebar-icon-open { display: block !important; }
    .drawer-open .sidebar-toggle-btn .sidebar-icon-closed { display: none !important; }
}
.header-title-block { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.header-page-title, .header-title h1 { font-size: 16.5px; font-weight: 800; margin: 0; letter-spacing: -0.3px; color: #0F172A; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-breadcrumb { font-size: 11.5px; color: #64748B; display: flex; align-items: center; gap: 6px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-right { display: flex; align-items: center; gap: 14px; }
.header-posko-badge { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9999px; background: var(--ios-primary-light); color: var(--ios-primary); font-size: 12.5px; font-weight: 700; border: 1px solid var(--ios-primary-border); }

/* ==========================================================================
PAGE CONTAINER & ROOT VIEW TRANSITION (SMOOTH & RESPONSIVE iOS SPRING)
========================================================================== */
@keyframes simbunIosPageEnter {
    0% {
        opacity: 0.88;
        transform: translate3d(0, 8px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

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

.page-content-wrapper {
    opacity: 1;
    animation: simbunIosPageEnter 0.24s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

.page-container, main { opacity: 1; transform: none; }
.page-container { padding: 28px 32px; flex: 1; }

/* Smooth & Responsive iOS Entrance Transition for Menu Data Cards */
.page-content-wrapper .card-ios:not(.modal-content),
.page-content-wrapper .ios-card:not(.modal-content),
.page-content-wrapper .posko-card-container,
.page-content-wrapper .kpi-metric-card,
.page-content-wrapper .filter-single-row-card {
    animation: simbunIosCardEnter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.page-content-wrapper .row > [class*="col-"]:nth-child(1) > .card-ios,
.page-content-wrapper .row > [class*="col-"]:nth-child(1) > .posko-card-container,
.page-content-wrapper .row > [class*="col-"]:nth-child(1) > .kpi-metric-card { animation-delay: 0.01s; }
.page-content-wrapper .row > [class*="col-"]:nth-child(2) > .card-ios,
.page-content-wrapper .row > [class*="col-"]:nth-child(2) > .posko-card-container,
.page-content-wrapper .row > [class*="col-"]:nth-child(2) > .kpi-metric-card { animation-delay: 0.035s; }
.page-content-wrapper .row > [class*="col-"]:nth-child(3) > .card-ios,
.page-content-wrapper .row > [class*="col-"]:nth-child(3) > .posko-card-container,
.page-content-wrapper .row > [class*="col-"]:nth-child(3) > .kpi-metric-card { animation-delay: 0.06s; }
.page-content-wrapper .row > [class*="col-"]:nth-child(4) > .card-ios,
.page-content-wrapper .row > [class*="col-"]:nth-child(4) > .posko-card-container,
.page-content-wrapper .row > [class*="col-"]:nth-child(4) > .kpi-metric-card { animation-delay: 0.085s; }

/* Page Content Header */
.page-header { margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 800; color: #0F172A; letter-spacing: -0.4px; }
.page-header p, .page-header .text-muted, .page-header-subtitle { font-size: 13px; line-height: 1.45; color: #6b7280; margin-top: 3px; overflow-wrap: break-word; word-break: normal; }

/* ==========================================================================
iOS CARDS & STAT METRICS (.card-ios & .ios-card)
========================================================================== */
.card-ios, .ios-card { background: #FFFFFF; border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 20px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 16px -2px rgba(15, 23, 42, 0.04); transition: box-shadow 0.22s ease, border-color 0.22s ease; position: relative; }
.card-ios:hover, .ios-card:hover { box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05); border-color: #CBD5E1; }
.card-header-clean { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid #F1F5F9; }
.card-title-clean { font-weight: 800; font-size: 16px; letter-spacing: -0.3px; margin: 0; color: var(--ios-text); display: flex; align-items: center; gap: 10px; }

/* Stat Typography Scale */
.stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #64748B; margin-bottom: 4px; }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; margin: 2px 0 6px 0; color: #0F172A; }
.stat-unit { font-size: 14px; font-weight: 600; color: #64748B; margin-left: 2px; }
.stat-sublabel { font-size: 12px; color: #64748B; font-weight: 500; }

/* Stat Icon Box */
.stat-icon-box { width: 50px; height: 50px; min-width: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.card-ios:hover .stat-icon-box { transform: scale(1.08); }

/* Stat Icon Color Themes */
.stat-icon-emerald { background: #ECFDF5; color: #15803D; border: 1px solid #A7F3D0; }
.stat-icon-green { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.stat-icon-blue { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.stat-icon-amber, .stat-icon-yellow { background: #FEF3C7; color: #D97706; border: 1px solid #FDE68A; }
.stat-icon-rose, .stat-icon-red { background: #FFF1F2; color: #E11D48; border: 1px solid #FECDD3; }
.stat-icon-purple { background: #FAF5FF; color: #7C3AED; border: 1px solid #E9D5FF; }
.stat-icon-indigo { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
.stat-icon-teal { background: #F0FDFA; color: #0D9488; border: 1px solid #99F6E4; }
.stat-icon-slate, .stat-icon-neutral { background: #F8FAFC; color: #475569; border: 1px solid #E2E8F0; }

/* ==========================================================================
ELEGANT GRADIENT TINTS FOR STAT / KPI CARDS (APPLE iOS PRESTIGE STYLE)
Gradasi warna hidup nan elegan dengan interaksi hover melayang (floating lift)
========================================================================== */
.card-ios:has(.stat-value), .card-ios:has(.stat-icon-box), .ios-card:has(.stat-value), .ios-card:has(.stat-icon-box) { background: linear-gradient(135deg, #FFFFFF 20%, #F8FAFC 65%, #F1F5F9 100%); border: 1px solid rgba(226, 232, 240, 0.95); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: default; }
.card-ios:has(.stat-value):hover, .card-ios:has(.stat-icon-box):hover, .ios-card:has(.stat-value):hover, .ios-card:has(.stat-icon-box):hover { transform: translateY(-4px) scale(1.01) !important; }
.card-ios:has(.stat-value):hover .stat-icon-box, .card-ios:has(.stat-icon-box):hover .stat-icon-box, .ios-card:has(.stat-value):hover .stat-icon-box, .ios-card:has(.stat-icon-box):hover .stat-icon-box { transform: scale(1.12) rotate(3deg); }

/* 1. Posko & Informasi Utama: Vivid Sky Blue Gradient */
.card-ios:has(.stat-icon-blue), .ios-card:has(.stat-icon-blue) { background: linear-gradient(135deg, #FFFFFF 20%, #EFF6FF 58%, #DBEAFE 100%) !important; border-color: #BFDBFE !important; }
.card-ios:has(.stat-icon-blue):hover, .ios-card:has(.stat-icon-blue):hover { border-color: #60A5FA !important; box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.16) !important; }

/* 2. Distribusi Benih: Vivid Mint Emerald Gradient */
.card-ios:has(.stat-icon-emerald), .ios-card:has(.stat-icon-emerald) { background: linear-gradient(135deg, #FFFFFF 20%, #ECFDF5 58%, #D1FAE5 100%) !important; border-color: #A7F3D0 !important; }
.card-ios:has(.stat-icon-emerald):hover, .ios-card:has(.stat-icon-emerald):hover { border-color: #34D399 !important; box-shadow: 0 10px 25px -4px rgba(21, 128, 61, 0.16) !important; }

/* 3. Benih Tertanam & Capaian Sortir: Vivid Natural Green Gradient */
.card-ios:has(.stat-icon-green), .ios-card:has(.stat-icon-green) { background: linear-gradient(135deg, #FFFFFF 20%, #F0FDF4 58%, #DCFCE7 100%) !important; border-color: #BBF7D0 !important; }
.card-ios:has(.stat-icon-green):hover, .ios-card:has(.stat-icon-green):hover { border-color: #4ADE80 !important; box-shadow: 0 10px 25px -4px rgba(22, 163, 74, 0.16) !important; }

/* 4. Sisa Stok & Mutu Sortir: Vivid Warm Amber Gradient */
.card-ios:has(.stat-icon-amber), .card-ios:has(.stat-icon-yellow), .ios-card:has(.stat-icon-amber), .ios-card:has(.stat-icon-yellow) { background: linear-gradient(135deg, #FFFFFF 20%, #FFFBEB 58%, #FEF3C7 100%) !important; border-color: #FDE68A !important; }
.card-ios:has(.stat-icon-amber):hover, .card-ios:has(.stat-icon-yellow):hover, .ios-card:has(.stat-icon-amber):hover, .ios-card:has(.stat-icon-yellow):hover { border-color: #FBBF24 !important; box-shadow: 0 10px 25px -4px rgba(217, 119, 6, 0.16) !important; }

/* 5. Raw Material & Panen: Vivid Lavender Purple Gradient */
.card-ios:has(.stat-icon-purple), .ios-card:has(.stat-icon-purple) { background: linear-gradient(135deg, #FFFFFF 20%, #FAF5FF 58%, #F3E8FF 100%) !important; border-color: #E9D5FF !important; }
.card-ios:has(.stat-icon-purple):hover, .ios-card:has(.stat-icon-purple):hover { border-color: #C084FC !important; box-shadow: 0 10px 25px -4px rgba(124, 58, 237, 0.16) !important; }

/* 6. Finished Goods (Lolos): Vivid Fresh Teal Gradient */
.card-ios:has(.stat-icon-teal), .ios-card:has(.stat-icon-teal) { background: linear-gradient(135deg, #FFFFFF 20%, #F0FDFA 58%, #CCFBF1 100%) !important; border-color: #99F6E4 !important; }
.card-ios:has(.stat-icon-teal):hover, .ios-card:has(.stat-icon-teal):hover { border-color: #2DD4BF !important; box-shadow: 0 10px 25px -4px rgba(13, 148, 136, 0.16) !important; }

/* 7. Reject & Peringatan: Vivid Coral Rose Gradient */
.card-ios:has(.stat-icon-rose), .card-ios:has(.stat-icon-red), .ios-card:has(.stat-icon-rose), .ios-card:has(.stat-icon-red) { background: linear-gradient(135deg, #FFFFFF 20%, #FFF1F2 58%, #FFE4E6 100%) !important; border-color: #FECDD3 !important; }
.card-ios:has(.stat-icon-rose):hover, .card-ios:has(.stat-icon-red):hover, .ios-card:has(.stat-icon-rose):hover, .ios-card:has(.stat-icon-red):hover { border-color: #FB7185 !important; box-shadow: 0 10px 25px -4px rgba(225, 29, 72, 0.16) !important; }

/* 8. Target & Efisiensi: Vivid Royal Indigo Gradient */
.card-ios:has(.stat-icon-indigo), .ios-card:has(.stat-icon-indigo) { background: linear-gradient(135deg, #FFFFFF 20%, #EEF2FF 58%, #E0E7FF 100%) !important; border-color: #C7D2FE !important; }
.card-ios:has(.stat-icon-indigo):hover, .ios-card:has(.stat-icon-indigo):hover { border-color: #818CF8 !important; box-shadow: 0 10px 25px -4px rgba(79, 70, 229, 0.16) !important; }

/* 9. Netral / Slate */
.card-ios:has(.stat-icon-slate), .card-ios:has(.stat-icon-neutral), .ios-card:has(.stat-icon-slate), .ios-card:has(.stat-icon-neutral) { background: linear-gradient(135deg, #FFFFFF 20%, #F8FAFC 58%, #E2E8F0 100%) !important; border-color: #CBD5E1 !important; }
.card-ios:has(.stat-icon-slate):hover, .card-ios:has(.stat-icon-neutral):hover, .ios-card:has(.stat-icon-slate):hover, .ios-card:has(.stat-icon-neutral):hover { border-color: #94A3B8 !important; box-shadow: 0 10px 25px -4px rgba(100, 116, 139, 0.16) !important; }

/* ==========================================================================
STATIC iOS CARDS (.card-ios-static, .card-no-hover)
Menonaktifkan interaksi hover/floating lift/tilt untuk kartu informasi statis
========================================================================== */
.card-ios.card-ios-static, .card-ios.card-no-hover, .ios-card.card-ios-static, .ios-card.card-no-hover, .card-ios-static { transition: none !important; cursor: default !important; -webkit-tap-highlight-color: transparent !important; }
.card-ios.card-ios-static:hover, .card-ios.card-no-hover:hover, .ios-card.card-ios-static:hover, .ios-card.card-no-hover:hover, .card-ios.card-ios-static:active, .card-ios.card-no-hover:active, .card-ios:has(.stat-icon-box).card-ios-static:hover, .card-ios:has(.stat-icon-green).card-ios-static:hover, .card-ios:has(.stat-icon-box).card-no-hover:hover, .card-ios:has(.stat-icon-green).card-no-hover:hover { transform: none !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important; border-color: #BBF7D0 !important; }
.card-ios.card-ios-static .stat-icon-box, .card-ios.card-no-hover .stat-icon-box, .card-ios.card-ios-static:hover .stat-icon-box, .card-ios.card-no-hover:hover .stat-icon-box, .card-ios.card-ios-static:active .stat-icon-box, .card-ios.card-no-hover:active .stat-icon-box, .card-ios:has(.stat-icon-box).card-ios-static:hover .stat-icon-box, .card-ios:has(.stat-icon-box).card-no-hover:hover .stat-icon-box { transform: none !important; transition: none !important; }

/* Icon Glyph Fallbacks */
.bi-sprout::before, .bi-sprout-fill::before { content: "\f3cd" !important; font-family: "bootstrap-icons" !important; }

/* ==========================================================================
iOS BUTTONS (.btn-ios, .btn-ios-primary, etc.)
========================================================================== */
.btn-ios, .btn-ios-primary, .btn-ios-outline, .btn-ios-secondary, .btn-ios-success, .btn-ios-danger, .btn-ios-warning { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 13.5px; border-radius: var(--ios-radius-md); padding: 8px 18px; transition: var(--ios-transition); cursor: pointer; text-decoration: none; line-height: 1.4; white-space: nowrap; }

/* Compact / Small iOS Button Modifier */
.btn-sm.btn-ios, .btn-sm.btn-ios-primary, .btn-sm.btn-ios-outline, .btn-sm.btn-ios-secondary, .btn-sm.btn-ios-success, .btn-sm.btn-ios-danger, .btn-sm.btn-ios-warning, .btn-ios-sm { padding: 6px 14px !important; font-size: 12px !important; line-height: 1.25 !important; border-radius: 9px !important; height: 34px !important; min-height: 34px !important; gap: 6px !important; white-space: nowrap !important; }
.btn-sm.btn-ios i, .btn-sm.btn-ios-primary i, .btn-sm.btn-ios-outline i, .btn-sm.btn-ios-secondary i, .btn-sm.btn-ios-success i, .btn-sm.btn-ios-danger i, .btn-sm.btn-ios-warning i, .btn-ios-sm i { font-size: 13px !important; }

/* iOS Segmented Detail Tabs */
.tab-btn-detail { border: none !important; font-weight: 600 !important; font-size: 12.5px !important; padding: 7px 14px !important; border-radius: 9px !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; color: #64748B !important; background: transparent !important; }
.tab-btn-detail.active { background: #FFFFFF !important; color: #0F172A !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important; }
.tab-btn-detail:not(.active):hover { background: rgba(255, 255, 255, 0.5) !important; color: #1E293B !important; }
.btn-ios:active, .btn-ios-primary:active, .btn-ios-outline:active { transform: scale(0.97); }

/* Primary Soft Green */
.btn-ios-primary { background: var(--ios-primary); color: #FFFFFF !important; border: 1px solid var(--ios-primary); box-shadow: 0 4px 12px rgba(21, 128, 61, 0.28); }
.btn-ios-primary:hover { background: var(--ios-primary-hover); color: #FFFFFF !important; box-shadow: 0 6px 16px rgba(21, 128, 61, 0.35); }

/* Outline Crisp White */
.btn-ios-outline { background: #FFFFFF; border: 1.5px solid var(--ios-border); color: #334155 !important; }
.btn-ios-outline:hover { background: #F8FAFC; border-color: #CBD5E1; color: #0F172A !important; }

/* Secondary */
.btn-ios-secondary { background: #F1F5F9; border: 1px solid #E2E8F0; color: #475569 !important; }
.btn-ios-secondary:hover { background: #E2E8F0; color: #1E293B !important; }

/* Success */
.btn-ios-success, .btn.btn-ios-success, button.btn-ios-success { --bs-btn-color: #FFFFFF !important; --bs-btn-bg: var(--ios-green) !important; --bs-btn-border-color: var(--ios-green) !important; --bs-btn-hover-color: #FFFFFF !important; --bs-btn-hover-bg: #15803D !important; --bs-btn-hover-border-color: #15803D !important; --bs-btn-active-color: #FFFFFF !important; --bs-btn-active-bg: #166534 !important; --bs-btn-active-border-color: #166534 !important; background: var(--ios-green) !important; background-color: var(--ios-green) !important; color: #FFFFFF !important; border: 1px solid var(--ios-green) !important; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important; }
.btn-ios-success:hover, .btn-ios-success:focus, .btn-ios-success:focus-visible, .btn.btn-ios-success:hover, .btn.btn-ios-success:focus, .btn.btn-ios-success:focus-visible, button.btn-ios-success:hover, button.btn-ios-success:focus, button.btn-ios-success:focus-visible { background: #15803D !important; background-color: #15803D !important; color: #FFFFFF !important; border-color: #15803D !important; box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35) !important; }
.btn-ios-success:active, .btn-ios-success.active, .btn.btn-ios-success:active, .btn.btn-ios-success.active, button.btn-ios-success:active, :not(.btn-check)+.btn-ios-success:active, :not(.btn-check)+.btn.btn-ios-success:active { background: #166534 !important; background-color: #166534 !important; color: #FFFFFF !important; border-color: #166534 !important; transform: scale(0.97) !important; }

/* Danger */
.btn-ios-danger, .btn.btn-ios-danger, button.btn-ios-danger { --bs-btn-color: #FFFFFF !important; --bs-btn-bg: #DC2626 !important; --bs-btn-border-color: #DC2626 !important; --bs-btn-hover-color: #FFFFFF !important; --bs-btn-hover-bg: #B91C1C !important; --bs-btn-hover-border-color: #B91C1C !important; --bs-btn-focus-shadow-rgb: 220, 38, 38 !important; --bs-btn-active-color: #FFFFFF !important; --bs-btn-active-bg: #991B1B !important; --bs-btn-active-border-color: #991B1B !important; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important; --bs-btn-disabled-color: #FFFFFF !important; --bs-btn-disabled-bg: #EF4444 !important; --bs-btn-disabled-border-color: #EF4444 !important; background: #DC2626 !important; background-color: #DC2626 !important; color: #FFFFFF !important; border: 1px solid #DC2626 !important; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28) !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.btn-ios-danger:hover, .btn.btn-ios-danger:hover, button.btn-ios-danger:hover { background: #B91C1C !important; background-color: #B91C1C !important; color: #FFFFFF !important; border-color: #B91C1C !important; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.38) !important; transform: translateY(-1px); }
.btn-ios-danger:focus, .btn-ios-danger:focus-visible, .btn.btn-ios-danger:focus, .btn.btn-ios-danger:focus-visible, button.btn-ios-danger:focus, button.btn-ios-danger:focus-visible { background: #B91C1C !important; background-color: #B91C1C !important; color: #FFFFFF !important; border-color: #B91C1C !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35) !important; outline: none !important; }
.btn-ios-danger:active, .btn-ios-danger.active, .btn.btn-ios-danger:active, .btn.btn-ios-danger.active, button.btn-ios-danger:active, :not(.btn-check)+.btn-ios-danger:active, :not(.btn-check)+.btn.btn-ios-danger:active { background: #991B1B !important; background-color: #991B1B !important; color: #FFFFFF !important; border-color: #991B1B !important; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important; transform: scale(0.97) !important; }
.btn-ios-danger:disabled, .btn-ios-danger.disabled, .btn.btn-ios-danger:disabled, .btn.btn-ios-danger.disabled, button.btn-ios-danger:disabled { background: #EF4444 !important; background-color: #EF4444 !important; color: #FFFFFF !important; opacity: 0.65 !important; border-color: #EF4444 !important; box-shadow: none !important; cursor: not-allowed !important; }
.btn-ios-danger i, .btn.btn-ios-danger i, button.btn-ios-danger i { color: #FFFFFF !important; }

/* Indigo / Royal Blue (Print, Documents & Reports) */
.btn-ios-indigo { background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%); color: #FFFFFF !important; border: 1px solid #1D4ED8; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28); }
.btn-ios-indigo:hover { background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%); color: #FFFFFF !important; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.38); }
.btn-ios-indigo:active { transform: scale(0.97); }

/* Soft Gray / Abu-abu Soft Button */
.btn-ios-soft-gray { background: #F8FAFC; border: 1.5px solid var(--ios-border); color: #334155 !important; font-weight: 500; }
.btn-ios-soft-gray:hover { background: #F1F5F9; border-color: #CBD5E1; color: #0F172A !important; }
.btn-ios-soft-gray:active { transform: scale(0.97); }

/* ==========================================================================
Apple iOS Siklus Status Filter Pills
========================================================================== */
.siklus-pill-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 15px; border-radius: 9999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; cursor: pointer; border: 1px solid transparent; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); background: #F8FAFC; color: #475569; user-select: none; outline: none; }
.siklus-pill-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.siklus-pill-btn:active { transform: scale(0.96); }
.siklus-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, 0.07); color: inherit; transition: all 0.2s ease; }

/* Base Inactive Colors */
.siklus-pill-btn.is-all { background: #F1F5F9; border-color: #CBD5E1; color: #1E293B; }
.siklus-pill-btn.is-aktif { background: rgba(14, 165, 233, 0.08); border-color: rgba(14, 165, 233, 0.3); color: #0284C7; }
.siklus-pill-btn.is-terpenuhi { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.3); color: #16A34A; }
.siklus-pill-btn.is-kurang { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); color: #D97706; }
.siklus-pill-btn.is-gagal { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #DC2626; }

/* Active Highlight States */
.siklus-pill-btn.is-all.is-active, .siklus-pill-btn.is-active[data-type="all"] { background: #0F172A !important; border-color: #0F172A !important; color: #FFFFFF !important; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.35); }
.siklus-pill-btn.is-aktif.is-active, .siklus-pill-btn.is-active[data-type="aktif"] { background: #0284C7 !important; border-color: #0284C7 !important; color: #FFFFFF !important; box-shadow: 0 3px 12px rgba(2, 132, 199, 0.35); }
.siklus-pill-btn.is-terpenuhi.is-active, .siklus-pill-btn.is-active[data-type="terpenuhi"] { background: #16A34A !important; border-color: #16A34A !important; color: #FFFFFF !important; box-shadow: 0 3px 12px rgba(22, 163, 74, 0.35); }
.siklus-pill-btn.is-kurang.is-active, .siklus-pill-btn.is-active[data-type="kurang"] { background: #D97706 !important; border-color: #D97706 !important; color: #FFFFFF !important; box-shadow: 0 3px 12px rgba(217, 119, 6, 0.35); }
.siklus-pill-btn.is-gagal.is-active, .siklus-pill-btn.is-active[data-type="gagal"] { background: #DC2626 !important; border-color: #DC2626 !important; color: #FFFFFF !important; box-shadow: 0 3px 12px rgba(220, 38, 38, 0.35); }
.siklus-pill-btn.is-active .siklus-pill-count { background: rgba(255, 255, 255, 0.28) !important; color: #FFFFFF !important; }

/* ==========================================================================
iOS PILL BADGES (.badge-ios)
========================================================================== */
.badge-ios { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 9999px; letter-spacing: -0.1px; }

/* Multi-line Centered Stacked Status Badges (Umur & Pencapaian) */
.badge-ios.badge-multiline { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: normal !important; padding: 3px 8px !important; line-height: 1.25 !important; min-width: 95px !important; border-radius: 8px !important; }
.badge-ios.badge-multiline span { text-align: center !important; }
.badge-ios-primary { background: var(--ios-primary-light); color: var(--ios-primary); border: 1px solid var(--ios-primary-border); }
.badge-ios-success { background: var(--ios-green-light); color: var(--ios-green); border: 1px solid #BBF7D0; }
.badge-ios-warning { background: var(--ios-yellow-light); color: var(--ios-yellow); border: 1px solid #FEF08A; }
.badge-ios-danger { background: var(--ios-red-light); color: var(--ios-red); border: 1px solid #FECACA; }
.badge-ios-secondary { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }
.badge-ios-neutral { background: #F8FAFC; color: #334155; border: 1px solid #CBD5E1; }

/* ==========================================================================
FORM CONTROLS (.form-control, .form-select)
========================================================================== */
.form-control, .form-select, .form-control-ios { border-radius: var(--ios-radius-md) !important; border: 1.5px solid #CBD5E1 !important; padding: 8px 14px; font-size: 13.5px; color: #0F172A; background-color: #FFFFFF; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.form-control:focus, .form-select:focus, .form-control-ios:focus { border-color: var(--ios-primary) !important; box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18) !important; outline: none; }
.form-label-ios, .form-label { font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: 6px; }

/* Password Visibility Toggle Wrapper & Button */
.password-toggle-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.password-toggle-wrapper .form-control { padding-right: 44px; }
.password-toggle-wrapper .btn-toggle-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: #94A3B8; cursor: pointer; border-radius: 8px; padding: 0; transition: all 0.15s ease-in-out; z-index: 4; }
.password-toggle-wrapper .btn-toggle-password:hover { color: #334155; background: rgba(148, 163, 184, 0.15); }
.password-toggle-wrapper .btn-toggle-password:active { transform: translateY(-50%) scale(0.92); }
.password-toggle-wrapper .btn-toggle-password i { font-size: 16.5px; line-height: 1; }

/* ==========================================================================
GLOBAL iOS MODAL & POPUP BACKDROP (ELEGANT FROSTED GLASS BLUR + SIMULTANEOUS 0MS)
========================================================================== */
.modal-backdrop { background: rgba(15, 23, 42, 0.42) !important; backdrop-filter: blur(8px) saturate(145%) !important; -webkit-backdrop-filter: blur(8px) saturate(145%) !important; z-index: 1050 !important; transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: opacity !important; }
.modal-backdrop.fade { opacity: 0 !important; }
.modal-backdrop.show { opacity: 1 !important; backdrop-filter: blur(8px) saturate(145%) !important; -webkit-backdrop-filter: blur(8px) saturate(145%) !important; }

/* ==========================================================================
iOS MODAL DIALOGS ANIMATION & STYLING (SIMULTANEOUS IN-OUT SPRING TRANSITION)
========================================================================== */
.modal { z-index: 1060 !important; }
.modal.fade { opacity: 0 !important; transition: opacity 0.16s cubic-bezier(0.32, 0.72, 0, 1) !important; }
.modal.fade.show { opacity: 1 !important; transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important; }
.modal-dialog { margin: 1.25rem auto !important; max-height: calc(100vh - 2.5rem); }
.modal-dialog-centered { min-height: calc(100% - 2.5rem) !important; }
.modal.fade .modal-dialog { transform: scale(0.94) translate3d(0, 10px, 0) !important; opacity: 1 !important; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: transform !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; }
.modal.show .modal-dialog { transform: scale(1) translate3d(0, 0, 0) !important; opacity: 1 !important; will-change: transform !important; }
.modal.fade:not(.show) .modal-dialog { transform: scale(0.95) translate3d(0, 8px, 0) !important; opacity: 1 !important; transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1) !important; }

/* UNIVERSAL iOS MODAL CONTENT STYLING */
.modal-content, .modal-content.card-ios, .ios-modal { background: #FFFFFF !important; border-radius: 20px !important; border: 1px solid rgba(226, 232, 240, 0.85) !important; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.3),
        0 0 0 1px rgba(0, 0, 0, 0.05) !important; overflow: hidden !important; max-height: calc(100vh - 2.5rem) !important; display: flex !important; flex-direction: column !important; }

/* Dukungan jika modal-content membungkus <form> secara langsung */
.modal-content>form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: calc(100vh - 2.5rem) !important; overflow: hidden !important; }
.modal-content>form>.modal-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; flex: 1 1 auto !important; min-height: 0 !important; }
.modal-content>form>.modal-footer { flex-shrink: 0 !important; }
.ios-modal-header, .modal-header { padding: 18px 24px 14px !important; border-bottom: 1px solid #F1F5F9 !important; background: #FFFFFF !important; flex-shrink: 0 !important; }
.modal-header .modal-title, .modal-header h5, .modal-header h6 { font-weight: 700 !important; color: #0F172A !important; letter-spacing: -0.2px !important; }
.modal-header .btn-close { border-radius: 50% !important; padding: 8px !important; margin: -4px -4px -4px auto !important; background-size: 10px !important; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; opacity: 0.55 !important; }
.modal-header .btn-close:hover { opacity: 1 !important; background-color: #F1F5F9 !important; transform: scale(1.08) !important; }
.modal-body { padding: 20px 24px !important; color: #334155 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; flex: 1 1 auto; }
.ios-modal-footer, .modal-footer { padding: 14px 24px 18px !important; border-top: 1px solid #F1F5F9 !important; background: #FAFAFC !important; flex-shrink: 0 !important; }

/* ==========================================================================
DATATABLES & TABLES STYLING (UNIFIED, PIXEL-ALIGNED & ELEGANT)
========================================================================== */
.table-simbun, .table { width: 100%; margin-bottom: 0; border-collapse: separate !important; border-spacing: 0 !important; }
table.dataTable.table-simbun th, table.dataTable.table-simbun td, .table-simbun th, .table-simbun td { box-sizing: border-box !important; -webkit-box-sizing: border-box !important; }

/* Header Typography & Horizontal Metrics: WAJIB IDENTIK antara scrollHead dan scrollBody agar lebar kolom 100% lurus */
.table-simbun thead th, .table thead th, table.dataTable thead th { background-color: #F8FAFC !important; color: #475569 !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; padding: 13px 14px !important; border-top: none !important; border-bottom: 1.5px solid #E2E8F0 !important; vertical-align: middle !important; white-space: nowrap !important; }

/* Padding horizontal kolom sortable:
   - Rata kiri (default / text-start): padding-left 14px (sama persis dengan td), padding-right 24px untuk ruang panah sort
   - Rata tengah (text-center / dt-center): padding-left 22px & padding-right 22px simetris agar teks header tepat di titik tengah (50%) sejajar lurus dengan isi td di bawahnya */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc { padding-left: 14px !important; padding-right: 24px !important; }

table.dataTable thead > tr > th.text-center.sorting,
table.dataTable thead > tr > th.text-center.sorting_asc,
table.dataTable thead > tr > th.text-center.sorting_desc,
table.dataTable thead > tr > th.dt-center.sorting,
table.dataTable thead > tr > th.dt-center.sorting_asc,
table.dataTable thead > tr > th.dt-center.sorting_desc { padding-left: 22px !important; padding-right: 22px !important; text-align: center !important; }

table.dataTable thead > tr > th.text-center:not(.sorting):not(.sorting_asc):not(.sorting_desc),
table.dataTable thead > tr > th.dt-center:not(.sorting):not(.sorting_asc):not(.sorting_desc) { padding-left: 14px !important; padding-right: 14px !important; text-align: center !important; }

table.dataTable thead > tr > th.text-start,
table.dataTable thead > tr > th.dt-left { text-align: left !important; }

table.dataTable thead > tr > th.text-end,
table.dataTable thead > tr > th.dt-right { text-align: right !important; }

table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after { right: 7px !important; }

.table-simbun tbody td, .table tbody td { padding: 12px 14px !important; font-size: 12.5px !important; color: #1E293B !important; font-weight: 400 !important; border-top: none !important; border-bottom: 1px solid #F1F5F9 !important; vertical-align: middle !important; white-space: nowrap !important; }
.table-simbun tbody tr:hover td, .table-hover tbody tr:hover td { background-color: #F6FBF7 !important; }

/* Hindari teks bold di kolom data pada seluruh menu tabel agar seragam & mudah dibaca */
.table-simbun tbody td strong, .table-simbun tbody td b, .table-simbun tbody td .fw-bold, .table-simbun tbody td .fw-semibold, .table tbody td strong, .table tbody td b, .table tbody td .fw-bold, .table tbody td .fw-semibold, table.dataTable tbody td strong, table.dataTable tbody td b, table.dataTable tbody td .fw-bold, table.dataTable tbody td .fw-semibold { font-weight: 500 !important; }

/* Teks pada kolom Trace Code / kode: Teks biasa tanpa background & tanpa border */
.table-simbun code, .table code, table.dataTable code, .table-simbun .badge.bg-light, table.dataTable .badge.bg-light { background: transparent !important; background-color: transparent !important; color: inherit !important; padding: 0 !important; border-radius: 0 !important; font-family: inherit !important; font-size: inherit !important; font-weight: 400 !important; border: none !important; display: inline !important; box-shadow: none !important; }

/* DataTables Controls (Length & Filter) */
.dataTables_wrapper { padding: 0 !important; }
.dataTables_wrapper .dataTables_length label { font-size: 12.5px; font-weight: 600; color: #64748B; display: flex; align-items: center; gap: 8px; }
.dataTables_wrapper .dataTables_length select { border-radius: 10px !important; border: 1.5px solid #CBD5E1 !important; padding: 6px 28px 6px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #0F172A !important; background-color: #FFFFFF !important; outline: none !important; transition: border-color 0.18s ease, box-shadow 0.18s ease !important; }
.dataTables_wrapper .dataTables_length select:focus { border-color: var(--ios-primary) !important; box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15) !important; }
.dataTables_wrapper .dataTables_filter label { font-size: 12.5px; font-weight: 600; color: #64748B; margin-bottom: 0; }
.dataTables_wrapper .dataTables_filter input { border-radius: 9999px !important; border: 1.5px solid #CBD5E1 !important; padding: 7px 18px !important; font-size: 13px !important; color: #0F172A !important; outline: none !important; width: 240px !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, width 0.22s ease !important; background-color: #FFFFFF !important; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ios-primary) !important; box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15) !important; width: 280px !important; }
.dataTables_wrapper .dataTables_info { font-size: 12.5px !important; color: #64748B !important; font-weight: 500 !important; padding-top: 12px !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: 8px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px !important; padding: 6px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #334155 !important; border: 1px solid transparent !important; transition: all 0.18s ease !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #F1F5F9 !important; color: #0F172A !important; border-color: #E2E8F0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--ios-primary) !important; color: #FFFFFF !important; border-color: var(--ios-primary) !important; box-shadow: 0 2px 8px rgba(21, 128, 61, 0.3) !important; }

/* Smooth iOS-like Table Row Materialization */
.table-simbun { min-width: 100%; }
.table-simbun tbody tr { transition: background-color 0.15s ease !important; }
.table-simbun tbody td { vertical-align: middle !important; }

/* DataTables Clean Loading State (Translucent iOS Pill & Smooth Body Dim) */
div.dataTables_wrapper.dt-processing-active .dataTables_scrollBody, div.dataTables_wrapper.dt-processing-active table.dataTable tbody { opacity: 0.45; transition: opacity 0.15s ease; pointer-events: none; }
div.dataTables_wrapper div.dataTables_processing.card, div.dataTables_wrapper div.dataTables_processing { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(203, 213, 225, 0.9) !important; border-radius: 9999px !important; box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important; padding: 7px 18px !important; color: #0F172A !important; font-weight: 600 !important; font-size: 12.5px !important; margin: 0 !important; z-index: 105 !important; width: auto !important; min-width: 0 !important; height: auto !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; transition: opacity 0.15s ease; }

/* Sembunyikan 4 titik default DataTables yang bertumpuk */
div.dataTables_wrapper div.dataTables_processing>div:last-child { display: none !important; }

/* Ketika DataTables menyetel inline style display: none, sembunyikan sepenuhnya */
div.dataTables_wrapper div.dataTables_processing[style*="none"] { display: none !important; }

/* ==========================================================================
UNIFIED 1-ROW FILTER BAR (SERAGAM 1 PINTU SEPERTI DASHBOARD)
========================================================================== */
.filter-single-row-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; }
.filter-micro-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.4px !important; color: #64748B !important; text-transform: uppercase !important; margin-bottom: 5px !important; display: flex !important; align-items: center !important; gap: 5px !important; white-space: nowrap !important; }
.filter-single-row-select, .filter-single-row-date { height: 36px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #1E293B !important; background-color: #FFFFFF !important; border: 1.5px solid #CBD5E1 !important; border-radius: 9px !important; padding: 4px 10px !important; transition: all 0.2s ease !important; }
.filter-single-row-select:focus, .filter-single-row-date:focus { border-color: #007AFF !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14) !important; outline: none !important; }
.filter-single-row-select { padding-right: 28px !important; }

/* ==========================================================================
SIMBUN iOS CUSTOM SELECT PICKER (MOBILE & DESKTOP FLOATING DROPDOWN)
Mencegah browser HP memunculkan dialog modal / wheel native Android/iOS
========================================================================== */

/* ==========================================================================
SIMBUN SELECT PICKER RESPONSIVE ADAPTATION:
1. LAPTOP / PC (>= 768px): 100% NATIVE SELECT SEPERTI AWAL
2. HP / SMARTPHONE (< 768px): CUSTOM FLOATING DROPDOWN ANTI-MODAL ANDROID
========================================================================== */

@media (min-width: 768px) {

    /* Sembunyikan SEMUA wrapper kustom di Laptop / PC */
    .simbun-custom-select-wrap, .simbun-cs-dt-length { display: none !important; }

    /* Kembalikan native select 100% seperti semula */
    select.simbun-custom-select-applied { display: block !important; position: static !important; width: 100% !important; height: auto !important; opacity: 1 !important; clip: auto !important; pointer-events: auto !important; }
    .dataTables_wrapper .dataTables_length select.simbun-custom-select-applied { display: inline-block !important; width: auto !important; height: auto !important; }
    select.filter-single-row-select.simbun-custom-select-applied { height: 36px !important; display: block !important; }
}

@media (max-width: 767.98px) {

    /* Sembunyikan native select di HP agar browser HP tidak memunculkan modal/wheel native */
    select.simbun-custom-select-applied { display: none !important; }

    /* Tampilkan custom floating dropdown di HP */
    .simbun-custom-select-wrap { position: relative !important; width: 100% !important; display: block !important; }
    .simbun-cs-dt-length { display: inline-block !important; width: auto !important; vertical-align: middle !important; margin: 0 4px !important; }
}
.simbun-custom-select-btn { height: 36px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #1E293B !important; background-color: #FFFFFF !important; background-image: none !important; border: 1.5px solid #CBD5E1 !important; border-radius: 9px !important; padding: 4px 10px !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important; cursor: pointer !important; text-align: left !important; width: 100% !important; white-space: nowrap !important; }
.simbun-custom-select-btn::after { display: none !important; }
.simbun-custom-select-btn:hover { border-color: #94A3B8 !important; background-color: #F8FAFC !important; }
.simbun-custom-select-btn:focus, .simbun-custom-select-btn.show { border-color: #007AFF !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14) !important; outline: none !important; background-color: #FFFFFF !important; }
.simbun-custom-select-btn.show .bi-chevron-down { transform: rotate(180deg) !important; }
.simbun-custom-select-menu { border-radius: 12px !important; background: #FFFFFF !important; box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.15), 0 4px 8px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.06) !important; border: 1px solid #E2E8F0 !important; padding: 5px !important; margin-top: 5px !important; z-index: 1055 !important; min-width: 100% !important; max-width: calc(100vw - 24px) !important; max-height: 280px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; }
.simbun-cs-item { padding: 7px 11px !important; font-size: 12.5px !important; font-weight: 500 !important; color: #334155 !important; border-radius: 7px !important; transition: background-color 0.15s ease, color 0.15s ease !important; cursor: pointer !important; border: none !important; background: transparent !important; width: 100% !important; white-space: normal !important; word-break: break-word !important; line-height: 1.35 !important; text-align: left !important; }
.simbun-cs-item .simbun-cs-item-text { flex: 1 1 auto !important; word-break: break-word !important; white-space: normal !important; line-height: 1.35 !important; }
.simbun-cs-item:hover, .simbun-cs-item:focus { background-color: #F1F5F9 !important; color: #0F172A !important; }

/* Apple iOS System Blue Active Selection */
.simbun-cs-item.active-item { background-color: #EFF6FF !important; color: #007AFF !important; font-weight: 600 !important; }
.simbun-cs-item.active-item:hover { background-color: #DBEAFE !important; color: #007AFF !important; }
.simbun-cs-item.active-item .simbun-cs-check { color: #007AFF !important; display: inline-block !important; }

/* ==========================================================================
SIMBUN KPI METRIC CARDS (MOBILE-RESPONSIVE & PADDING-SAFE)
Menjamin teks pada card KPI tidak terpotong oleh border aksen kiri di HP
========================================================================== */
.kpi-metric-card { padding: 12px 14px !important; border-radius: 14px !important; background: #FFFFFF !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important; border: 1px solid rgba(226, 232, 240, 0.95) !important; height: 100% !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; }

/* DataTables Length Custom Select Wrapper */
.simbun-cs-dt-length .simbun-custom-select-btn { height: 32px !important; min-width: 68px !important; padding: 2px 8px !important; font-size: 12.5px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; border-radius: 9px !important; }
.simbun-cs-dt-length .simbun-custom-select-menu { min-width: 80px !important; }

/* Form & Modal Custom Select Styling */
.simbun-custom-select-form .simbun-custom-select-btn { height: auto !important; min-height: 40px !important; font-size: 13px !important; font-weight: 500 !important; padding: 8px 12px !important; border-radius: 10px !important; background-color: #FFFFFF !important; border: 1.5px solid #CBD5E1 !important; }
.simbun-custom-select-form .simbun-cs-label { white-space: normal !important; word-break: break-word !important; line-height: 1.35 !important; text-align: left !important; }
.simbun-custom-select-form .simbun-custom-select-btn:hover { border-color: #94A3B8 !important; }
.simbun-custom-select-form .simbun-custom-select-btn:focus, .simbun-custom-select-form .simbun-custom-select-btn.show { border-color: #007AFF !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14) !important; }
.simbun-custom-select-form .simbun-custom-select-btn.is-invalid { border-color: #DC2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important; }
.simbun-custom-select-form .simbun-cs-item { font-size: 13px !important; padding: 8px 12px !important; }
.simbun-cs-label.is-placeholder { color: #94A3B8 !important; font-weight: 400 !important; }

/* ==========================================================================
DASHBOARD HERO BANNER & CHART TITLES (MOBILE-SAFE & ELEGANT)
========================================================================== */
.dashboard-hero-card { border: 1px solid #E2E8F0 !important; }
.dashboard-hero-icon { width: 44px; height: 44px; font-size: 22px; }
.dashboard-hero-title { font-size: 19px; letter-spacing: -0.2px; }
.dashboard-hero-desc { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }

@media (max-width: 575.98px) {
    .dashboard-hero-card { padding: 12px 14px !important; border-radius: 16px !important; }
    .dashboard-hero-icon { width: 32px !important; height: 32px !important; font-size: 16px !important; border-radius: 9px !important; }
    .dashboard-hero-title { font-size: 15px !important; line-height: 1.25 !important; }
    .dashboard-hero-desc { font-size: 11.5px !important; line-height: 1.35 !important; margin-top: 2px !important; }
    .dashboard-hero-badge { align-self: flex-end !important; margin-left: auto !important; }
    .dashboard-hero-badge .badge-ios { font-size: 10.5px !important; padding: 3px 8px !important; margin-top: 2px !important; }
}
.dashboard-chart-title { font-size: 17px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #0F172A !important; }

@media (max-width: 575.98px) {
    .dashboard-chart-card { padding: 14px 12px !important; }
    .dashboard-chart-title { font-size: 14.5px !important; line-height: 1.35 !important; letter-spacing: -0.2px !important; word-break: normal !important; overflow-wrap: break-word !important; }
    .dashboard-chart-title i { font-size: 14px !important; margin-right: 6px !important; }
}

/* Modal Sortir Raw Material - Box Tanggal Panen Styling */
#boxPilihTanggalPanen { padding: 14px 16px !important; }
#boxPilihTanggalPanen .simbun-custom-select-btn { border: 1.5px solid #0284C7 !important; background-color: #FFFFFF !important; border-radius: 10px !important; color: #0C4A6E !important; font-weight: 600 !important; font-size: 12px !important; height: 42px !important; min-height: 42px !important; padding: 0 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08) !important; }
#boxPilihTanggalPanen .simbun-custom-select-btn .simbun-cs-label { font-size: 12px !important; font-weight: 600 !important; color: #0C4A6E !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1 !important; flex-grow: 1 !important; text-align: left !important; }
#boxPilihTanggalPanen .simbun-custom-select-btn .bi-chevron-down { color: #0284C7 !important; font-size: 12px !important; margin-left: 8px !important; flex-shrink: 0 !important; }
#boxPilihTanggalPanen .simbun-custom-select-btn:focus, #boxPilihTanggalPanen .simbun-custom-select-btn.show { border-color: #0284C7 !important; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.22) !important; background-color: #FFFFFF !important; }

/* ==========================================================================
SELECT2 iOS DESIGN SYSTEM OVERRIDE (ELEGANT & SEAMLESS WITH SIMBUN UI)
Menjadikan kolom Select2 (seperti Nama Mitra di Data Tanam) 100% seragam
dengan form input lainnya: height 40px, border-radius 10px, clean chevron.
========================================================================== */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single { height: 40px !important; background-color: #FFFFFF !important; border: 1.5px solid #CBD5E1 !important; border-radius: 10px !important; padding: 6px 12px !important; display: flex !important; align-items: center !important; transition: border-color 0.18s ease, box-shadow 0.18s ease !important; position: relative !important; outline: none !important; }
.select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--single { border-color: #007AFF !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14) !important; outline: none !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #1E293B !important; font-size: 13px !important; font-weight: 500 !important; line-height: 26px !important; padding-left: 0 !important; padding-right: 28px !important; width: 100% !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #94A3B8 !important; font-weight: 400 !important; font-size: 13px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; width: 28px !important; position: absolute !important; top: 0 !important; right: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* Ganti segitiga default Select2 dengan chevron iOS yang rapi */
.select2-container--default .select2-selection--single .select2-selection__arrow b { border: none !important; width: 8px !important; height: 8px !important; border-right: 1.8px solid #64748B !important; border-bottom: 1.8px solid #64748B !important; transform: rotate(45deg) !important; margin: -3px 0 0 -4px !important; transition: transform 0.2s ease !important; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(-135deg) !important; margin: 2px 0 0 -4px !important; }

/* Tombol clear (x) pada Select2 */
.select2-container--default .select2-selection--single .select2-selection__clear { color: #94A3B8 !important; font-size: 16px !important; line-height: 1 !important; margin-right: 18px !important; font-weight: bold !important; }
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: #DC2626 !important; }

/* Dropdown Menu Select2 Popover */
.select2-dropdown { border-radius: 12px !important; background: #FFFFFF !important; border: none !important; box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.15), 0 4px 8px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.06) !important; overflow: hidden !important; margin-top: 4px !important; z-index: 1075 !important; }
.select2-container--default .select2-search--dropdown { padding: 8px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1.5px solid #CBD5E1 !important; border-radius: 8px !important; padding: 6px 10px !important; font-size: 12.5px !important; outline: none !important; transition: border-color 0.15s ease !important; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #007AFF !important; box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.14) !important; }
.select2-container--default .select2-results__option { padding: 8px 12px !important; font-size: 13px !important; font-weight: 500 !important; color: #334155 !important; border-radius: 6px !important; margin: 2px 4px !important; transition: background-color 0.12s ease !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #F1F5F9 !important; color: #0F172A !important; }
.select2-container--default .select2-results__option[aria-selected="true"] { background-color: #ECFDF5 !important; color: #059669 !important; font-weight: 600 !important; }

/* ==========================================================================
SIMBUN iOS SMOOTH POPUP ANIMATION (SWEETALERT2 & POPUPS)
Responsif, cepat (150ms), GPU accelerated, tanpa flicker / jatuh dari atas
========================================================================== */

@keyframes simbunIosPopupIn {
    0% { opacity: 0; transform: scale(0.96) translate3d(0, 5px, 0); }
    100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes simbunIosPopupOut {
    0% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
    100% { opacity: 0; transform: scale(0.98) translate3d(0, 4px, 0); }
}
.simbun-ios-alert-enter { animation: simbunIosPopupIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; will-change: transform, opacity !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; }
.simbun-ios-alert-leave { animation: simbunIosPopupOut 0.1s ease-in forwards !important; will-change: transform, opacity !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; }

/* ==========================================================================
SIMBUN iOS GLASSMORPHISM DATEPICKER POPOVER & AUTO-MASKING
========================================================================== */
.simbun-dp-wrap { position: relative !important; display: inline-block !important; width: 100% !important; }
.simbun-dp-input { padding-right: 32px !important; font-family: inherit !important; letter-spacing: 0.3px !important; }
.simbun-dp-icon { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 13.5px !important; color: #64748B !important; cursor: pointer !important; pointer-events: auto !important; transition: color 0.15s ease !important; }
.simbun-dp-icon:hover { color: #007AFF !important; }
.simbun-dp-popover { background: #FFFFFF !important; border: 1px solid rgba(226, 232, 240, 0.95) !important; box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04) !important; border-radius: 16px !important; padding: 12px 14px !important; width: 270px !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; user-select: none !important; -webkit-user-select: none !important; }
.simbun-dp-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; }
.simbun-dp-nav-btn { width: 28px !important; height: 28px !important; border-radius: 8px !important; border: none !important; background: #F1F5F9 !important; color: #334155 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; cursor: pointer !important; transition: all 0.15s ease !important; }
.simbun-dp-nav-btn:hover { background: #E2E8F0 !important; color: #0F172A !important; }
.simbun-dp-title-group { display: flex !important; gap: 4px !important; }
.simbun-dp-month-select, .simbun-dp-year-select { border: 1px solid #E2E8F0 !important; border-radius: 7px !important; font-size: 11.5px !important; font-weight: 700 !important; color: #0F172A !important; padding: 3px 6px !important; background: #F8FAFC !important; outline: none !important; cursor: pointer !important; }
.simbun-dp-weekdays { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; text-align: center !important; font-size: 10px !important; font-weight: 700 !important; color: #94A3B8 !important; text-transform: uppercase !important; margin-bottom: 6px !important; }
.simbun-dp-days { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; }
.simbun-dp-day-cell { width: 32px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11.5px !important; font-weight: 600 !important; color: #1E293B !important; border-radius: 7px !important; cursor: pointer !important; transition: all 0.12s ease !important; margin: auto !important; }
.simbun-dp-day-cell:hover:not(.disabled) { background: #E0F2FE !important; color: #0284C7 !important; }
.simbun-dp-day-cell.is-today { border: 1.5px solid #007AFF !important; color: #007AFF !important; font-weight: 700 !important; }
.simbun-dp-day-cell.is-selected { background: #007AFF !important; color: #FFFFFF !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(0, 122, 255, 0.35) !important; }
.simbun-dp-day-cell.other-month { color: #CBD5E1 !important; cursor: default !important; pointer-events: none !important; }
.simbun-dp-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 8px !important; margin-top: 8px !important; border-top: 1px solid #F1F5F9 !important; }
.simbun-dp-footer-btn { border: none !important; background: transparent !important; font-size: 11px !important; padding: 3px 6px !important; border-radius: 6px !important; cursor: pointer !important; transition: background-color 0.15s ease !important; }
.simbun-dp-footer-btn:hover { background: #F1F5F9 !important; }

/* ==========================================================================
SWEETALERT2 SIMBUN GREEN EMERALD DESIGN SYSTEM & ANTI-CLASH FIXES
========================================================================== */
.swal2-container { z-index: 10000 !important; padding: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; will-change: opacity !important; }
body:not(.swal2-toast-shown) .swal2-backdrop-show { backdrop-filter: blur(8px) saturate(145%) !important; -webkit-backdrop-filter: blur(8px) saturate(145%) !important; background: rgba(15, 23, 42, 0.42) !important; }

/* Modal Popup Soft Rounded (18px - 20px) Elegan & Bersih */
.simbun-alert-popup:not(.swal2-toast), .ios-swal-popup:not(.swal2-toast), div.swal2-popup.simbun-alert-popup:not(.swal2-toast), div.swal2-popup.ios-swal-popup:not(.swal2-toast), div:where(.swal2-container) div:where(.swal2-popup):not(.swal2-toast) { width: auto !important; min-width: 320px !important; max-width: min(440px, 92vw) !important; padding: 24px 22px 20px !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 20px 45px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04) !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; border: 1px solid rgba(226, 232, 240, 0.8) !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; }

/* Tipografi Judul (Slate-800, Font-Weight 700 - SATU-SATUNYA TEKS BOLD UTAMA) */
.simbun-alert-title:not(.simbun-toast-title), .ios-swal-title, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-title { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; font-size: 19px !important; line-height: 1.35 !important; letter-spacing: -0.3px !important; color: #1E293B !important; margin: 0 0 8px 0 !important; padding: 0 !important; word-break: break-word !important; max-width: 100% !important; }

/* Tipografi Konten Teks / Deskripsi (Slate-500, Regular Font-Weight 400) */
.simbun-alert-text, .ios-swal-text, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-html-container { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; color: #64748B !important; line-height: 1.55 !important; margin: 0 0 18px 0 !important; padding: 0 4px !important; word-break: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; }

/* Pastikan elemen isi dalam body popup tidak mendominasi judul */
div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-html-container p, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-html-container div, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-html-container span { font-weight: 400 !important; }
div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-html-container strong, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-html-container b { font-weight: 600 !important; color: #334155 !important; }

/* Anti-Bentrok Framework (Bootstrap box-sizing / line-height clash) */
div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon, div.swal2-popup:not(.swal2-toast) .swal2-icon { box-sizing: content-box !important; font-size: 16px !important; width: 5em !important; height: 5em !important; border-radius: 50% !important; margin: 0 auto 18px auto !important; position: relative !important; }
div:where(.swal2-container) .swal2-icon * { box-sizing: content-box !important; }

/* Standarisasi Icon SweetAlert2 agar lingkaran tegas dan warna akurat */

/* 1. SUKSES (✓) - Emerald Green SIMBUN Solid & Animasi Native Resmi SweetAlert2 */
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success { border-color: #10B981 !important; color: #10B981 !important; }
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring { border: .25em solid rgba(16, 185, 129, 0.3) !important; }
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success [class^='swal2-success-line'], div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #10B981 !important; }
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-left, .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-right, .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-fix, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-left, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-right, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-fix { background-color: #FFFFFF !important; }

/* 2. QUESTION (?): Biru Modern & Tanda Tanya Proporsional */
.swal2-icon.swal2-question, div:where(.swal2-container) .swal2-icon.swal2-question { border: 3.5px solid #0284C7 !important; border-color: #0284C7 !important; color: #0284C7 !important; background: radial-gradient(circle at center, #F8FAFC 0%, #F0F9FF 100%) !important; }
div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-question .swal2-icon-content { font-size: 46px !important; font-weight: 700 !important; color: #0284C7 !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* 3. WARNING (!): Amber / Oranye Hangat Proporsional (Sesuai Referensi Gambar 2) */
.swal2-icon.swal2-warning, div:where(.swal2-container) .swal2-icon.swal2-warning { border: 3.5px solid #F59E0B !important; border-color: #F59E0B !important; color: #F59E0B !important; background: radial-gradient(circle at center, #FFFDF5 0%, #FEF8EF 100%) !important; }
div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning .swal2-icon-content { font-size: 48px !important; font-weight: 700 !important; color: #F59E0B !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* 4. ERROR (✕): Merah Tegas & Silang Presisi */
.swal2-icon.swal2-error, div:where(.swal2-container) .swal2-icon.swal2-error { border: 3.5px solid #EF4444 !important; border-color: #EF4444 !important; color: #EF4444 !important; background: radial-gradient(circle at center, #FFF5F5 0%, #FEF2F2 100%) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'], div:where(.swal2-container) .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #EF4444 !important; height: 4px !important; border-radius: 2px !important; }

/* 5. INFO (i): Biru Sapphire Bersih */
.swal2-icon.swal2-info, div:where(.swal2-container) .swal2-icon.swal2-info { border: 3.5px solid #0EA5E9 !important; border-color: #0EA5E9 !important; color: #0EA5E9 !important; background: radial-gradient(circle at center, #F8FAFC 0%, #F0F9FF 100%) !important; }
div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-info .swal2-icon-content { font-size: 44px !important; font-weight: 700 !important; color: #0EA5E9 !important; line-height: 1 !important; font-style: italic !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* --- STANDARISASI KHUSUS TOAST ALERT (RAMPING, HORIZONTAL, PAS KONTEN & TIDAK ADA KOTAK LEBIH) --- */
body.swal2-toast-shown .swal2-container { box-sizing: border-box !important; width: auto !important; max-width: 100vw !important; background-color: transparent !important; pointer-events: none !important; padding: 0 !important; }
body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right { top: 24px !important; right: 24px !important; bottom: auto !important; left: auto !important; }
.swal2-popup.swal2-toast { box-sizing: border-box !important; display: grid !important; grid-template-columns: auto 1fr !important; grid-column-gap: 12px !important; align-items: center !important; width: auto !important; min-width: auto !important; max-width: 360px !important; padding: 10px 16px 12px 14px !important; background: #FFFFFF !important; border-radius: 14px !important; border: 1px solid rgba(226, 232, 240, 0.95) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important; overflow: hidden !important; pointer-events: all !important; position: relative !important; }
.swal2-popup.swal2-toast .swal2-icon { grid-column: 1 !important; grid-row: 1 / 3 !important; align-self: center !important; margin: 0 !important; }

/* Styling warna hijau SIMBUN untuk Icon Toast tanpa merusak animasi bawaan */
.swal2-toast .swal2-icon.swal2-success { border-color: #10b981 !important; }
.swal2-toast .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #10b981 !important; }
.swal2-toast .swal2-timer-progress-bar { background: #10b981 !important; }
.swal2-popup.swal2-toast .swal2-title { grid-column: 2 !important; grid-row: 1 !important; font-size: 14px !important; font-weight: 700 !important; color: #0F172A !important; margin: 0 !important; padding: 0 !important; text-align: left !important; line-height: 1.35 !important; white-space: nowrap !important; }
.swal2-popup.swal2-toast .swal2-html-container { grid-column: 2 !important; grid-row: 2 !important; font-size: 12px !important; color: #64748B !important; margin: 2px 0 0 0 !important; padding: 0 !important; text-align: left !important; line-height: 1.35 !important; white-space: nowrap !important; }
.swal2-popup.swal2-toast .swal2-timer-progress-bar-container { grid-column: 1 / -1 !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; overflow: hidden !important; }
.swal2-popup.swal2-toast .swal2-timer-progress-bar { background: #10B981 !important; height: 3px !important; position: absolute !important; bottom: 0 !important; left: 0 !important; }

/* Penataan Konten Teks Ikon (? , ! , i) */
div:where(.swal2-container) .swal2-icon .swal2-icon-content { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; }

/* Timer Progress Bar Hijau SIMBUN (#15803D) */
div:where(.swal2-container) .swal2-timer-progress-bar { background: #15803D !important; }

/* Spinner Bersih SIMBUN */
div:where(.swal2-container) .swal2-loader { border-color: #15803D transparent #15803D transparent !important; }

/* Anti-Flicker & Zero Reflow Shift for Modal & SweetAlert */
html.swal2-shown, body.swal2-shown, body.modal-open { overflow: hidden !important; padding-right: 0 !important; }
.modal, .modal-backdrop { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; will-change: opacity !important; }

@media (max-width: 768px) {
    .swal2-container.swal2-backdrop-show, .modal-backdrop.show { backdrop-filter: blur(7px) saturate(140%) !important; -webkit-backdrop-filter: blur(7px) saturate(140%) !important; background: rgba(15, 23, 42, 0.42) !important; }
}

/* Tombol Aksi */
.simbun-alert-actions, .ios-swal-popup .swal2-actions, div:where(.swal2-container) .swal2-actions { margin: 0 !important; padding: 0 !important; gap: 10px !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; }

/* Tombol Konfirmasi Hijau SIMBUN (#15803D / #166534) */
.simbun-alert-btn-confirm, .ios-swal-btn-primary, div:where(.swal2-container) button.swal2-confirm:not(.simbun-alert-btn-danger):not(.ios-swal-btn-danger) { background: #15803D !important; color: #FFFFFF !important; border-radius: 12px !important; padding: 11px 24px !important; font-weight: 600 !important; font-size: 14px !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; border: 1px solid #15803D !important; outline: none !important; box-shadow: 0 4px 14px rgba(21, 128, 61, 0.28) !important; cursor: pointer !important; transition: all 0.2s ease !important; min-width: 120px !important; }
.simbun-alert-btn-confirm:hover, .ios-swal-btn-primary:hover, div:where(.swal2-container) button.swal2-confirm:not(.simbun-alert-btn-danger):not(.ios-swal-btn-danger):hover { background: #166534 !important; border-color: #166534 !important; box-shadow: 0 6px 18px rgba(21, 128, 61, 0.35) !important; transform: translateY(-1px) !important; }
.simbun-alert-btn-confirm:active, .ios-swal-btn-primary:active, div:where(.swal2-container) button.swal2-confirm:not(.simbun-alert-btn-danger):not(.ios-swal-btn-danger):active { background: #14532D !important; border-color: #14532D !important; transform: translateY(0) scale(0.98) !important; }

/* Tombol Batal Abu-abu Lembut (#F1F5F9 / outline #E2E8F0, teks #475569) */
.simbun-alert-btn-cancel, .ios-swal-btn-secondary, div:where(.swal2-container) button.swal2-cancel { background: #F1F5F9 !important; color: #475569 !important; border-radius: 12px !important; padding: 10px 22px !important; font-weight: 600 !important; font-size: 14px !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; border: 1px solid #E2E8F0 !important; outline: none !important; box-shadow: none !important; cursor: pointer !important; transition: all 0.2s ease !important; min-width: 90px !important; }
.simbun-alert-btn-cancel:hover, .ios-swal-btn-secondary:hover, div:where(.swal2-container) button.swal2-cancel:hover { background: #E2E8F0 !important; color: #1E293B !important; }

/* Tombol Deny / Pilihan Kedua (Abu-abu Slate Lembut) */
.simbun-alert-btn-deny, div:where(.swal2-container) button.swal2-deny { background: #F1F5F9 !important; color: #334155 !important; border-radius: 12px !important; padding: 10px 22px !important; font-weight: 600 !important; font-size: 14px !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; border: 1px solid #CBD5E1 !important; outline: none !important; box-shadow: none !important; cursor: pointer !important; transition: all 0.2s ease !important; min-width: 90px !important; }
.simbun-alert-btn-deny:hover, div:where(.swal2-container) button.swal2-deny:hover { background: #E2E8F0 !important; color: #0F172A !important; }

/* Tombol Bahaya / Hapus Merah (#EF4444 / hover #DC2626) */
.simbun-alert-btn-danger, .ios-swal-btn-danger { background: #EF4444 !important; color: #FFFFFF !important; border-radius: 12px !important; padding: 10px 24px !important; font-weight: 600 !important; font-size: 14px !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; border: none !important; outline: none !important; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28) !important; cursor: pointer !important; transition: all 0.2s ease !important; min-width: 110px !important; }
.simbun-alert-btn-danger:hover, .ios-swal-btn-danger:hover { background: #DC2626 !important; box-shadow: 0 6px 18px rgba(239, 68, 68, 0.38) !important; transform: translateY(-1px) !important; }
.simbun-alert-btn-danger:active, .ios-swal-btn-danger:active { transform: translateY(0) scale(0.98) !important; }

/* Toast Notification Styling */
.simbun-toast-popup { border-radius: 14px !important; padding: 12px 18px !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important; background: #FFFFFF !important; border: 1px solid rgba(226, 232, 240, 0.8) !important; }
.simbun-toast-title { font-size: 13.5px !important; font-weight: 600 !important; color: #1E293B !important; }

/* Mobile Responsiveness */

@media (max-width: 576px) {
    .simbun-alert-popup:not(.swal2-toast), .ios-swal-popup:not(.swal2-toast), div:where(.swal2-container) div:where(.swal2-popup):not(.swal2-toast) { min-width: 280px !important; max-width: 92vw !important; padding: 22px 18px 18px !important; border-radius: 18px !important; }
    .simbun-alert-title:not(.simbun-toast-title), .ios-swal-title, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-title { font-size: 17px !important; }
    .simbun-alert-text, .ios-swal-text, div:where(.swal2-container) .swal2-popup:not(.swal2-toast) .swal2-html-container { font-size: 13px !important; margin-bottom: 18px !important; }
    .simbun-alert-btn-confirm, .simbun-alert-btn-cancel, .simbun-alert-btn-danger { padding: 9px 18px !important; font-size: 13px !important; border-radius: 10px !important; min-width: 85px !important; }
}
.ios-swal-text, .ios-swal-popup .swal2-html-container { font-size: 12.5px !important; }
.ios-swal-popup .swal2-actions { flex-direction: column !important; width: 100% !important; }
.ios-swal-btn-primary, .ios-swal-btn-danger, .ios-swal-btn-secondary { width: 100% !important; }

/* ==========================================================================
COLLAPSIBLE SIDEBAR STATES (DESKTOP ICON-ONLY & MOBILE DRAWER)
========================================================================== */

/* Desktop: Mini Sidebar with Visible Icons for Menu Switching */

@media (min-width: 992px) {
    .sidebar-hidden .app-sidebar, .sidebar-collapsed .app-sidebar, html.sidebar-init-hidden .app-sidebar { width: 76px !important; transform: translateX(0) !important; }
    .sidebar-hidden .app-main, .sidebar-collapsed .app-main, html.sidebar-init-hidden .app-main { margin-left: 76px !important; }

    /* Hide text labels, brand details & subtitles in mini sidebar */
    .sidebar-hidden .brand-title, .sidebar-hidden .brand-subtitle, .sidebar-hidden .sidebar-logo-full, .sidebar-hidden .brand-wrapper-full, .sidebar-hidden .nav-link span, .sidebar-hidden .nav-section-title, .sidebar-hidden .user-compact-info, .sidebar-hidden .user-compact-card i.bi-chevron-right, .sidebar-collapsed .brand-title, .sidebar-collapsed .brand-subtitle, .sidebar-collapsed .sidebar-logo-full, .sidebar-collapsed .brand-wrapper-full, .sidebar-collapsed .nav-link span, .sidebar-collapsed .nav-section-title, .sidebar-collapsed .user-compact-info, .sidebar-collapsed .user-compact-card i.bi-chevron-right, html.sidebar-init-hidden .brand-title, html.sidebar-init-hidden .brand-subtitle, html.sidebar-init-hidden .sidebar-logo-full, html.sidebar-init-hidden .brand-wrapper-full, html.sidebar-init-hidden .nav-link span, html.sidebar-init-hidden .nav-section-title, html.sidebar-init-hidden .user-compact-info, html.sidebar-init-hidden .user-compact-card i.bi-chevron-right { display: none !important; }
    .sidebar-hidden .sidebar-logo-mini, .sidebar-collapsed .sidebar-logo-mini, html.sidebar-init-hidden .sidebar-logo-mini { display: block !important; }
    .sidebar-hidden .sidebar-header, .sidebar-collapsed .sidebar-header, html.sidebar-init-hidden .sidebar-header { padding: 0 16px !important; justify-content: center !important; }
    .sidebar-hidden .brand-logo, .sidebar-collapsed .brand-logo, html.sidebar-init-hidden .brand-logo { justify-content: center !important; gap: 0 !important; }
    .sidebar-hidden .sidebar-content, .sidebar-collapsed .sidebar-content, html.sidebar-init-hidden .sidebar-content { padding: 16px 8px !important; }

    /* Icon-only nav links centered with square touch targets */
    .sidebar-hidden .nav-link, .sidebar-collapsed .nav-link, html.sidebar-init-hidden .nav-link { justify-content: center !important; padding: 0 !important; width: 48px !important; height: 48px !important; margin: 0 auto 8px auto !important; border-radius: 12px !important; position: relative; }
    .sidebar-hidden .nav-link i, .sidebar-collapsed .nav-link i, html.sidebar-init-hidden .nav-link i { font-size: 21px !important; width: auto !important; margin: 0 !important; }

    /* Collapsed user profile footer */
    .sidebar-hidden .sidebar-footer, .sidebar-collapsed .sidebar-footer, html.sidebar-init-hidden .sidebar-footer { padding: 14px 10px !important; }
    .sidebar-hidden .sidebar-apk-btn, .sidebar-collapsed .sidebar-apk-btn, html.sidebar-init-hidden .sidebar-apk-btn { justify-content: center !important; padding: 6px 0 !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; }
    .sidebar-hidden .sidebar-apk-btn .apk-info-wrap, .sidebar-hidden .sidebar-apk-btn .apk-action-pill, .sidebar-collapsed .sidebar-apk-btn .apk-info-wrap, .sidebar-collapsed .sidebar-apk-btn .apk-action-pill, html.sidebar-init-hidden .sidebar-apk-btn .apk-info-wrap, html.sidebar-init-hidden .sidebar-apk-btn .apk-action-pill { display: none !important; }
    .sidebar-hidden .sidebar-apk-btn .apk-icon-wrap, .sidebar-collapsed .sidebar-apk-btn .apk-icon-wrap, html.sidebar-init-hidden .sidebar-apk-btn .apk-icon-wrap { width: 36px !important; height: 36px !important; font-size: 18px !important; }
    .sidebar-hidden .user-compact-card, .sidebar-collapsed .user-compact-card, html.sidebar-init-hidden .user-compact-card { justify-content: center !important; padding: 6px 0 !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; outline: none !important; }
}

/* Mobile & Tablet Drawer Backdrop */
/* Backdrop: fade halus via opacity+visibility murni di GPU (tanpa kedip / repaint) */
.sidebar-backdrop { display: block; visibility: hidden; pointer-events: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 1035; opacity: 0; transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.25s; will-change: opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sidebar-backdrop.show { visibility: visible; pointer-events: auto; opacity: 1; transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s; }

@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translate3d(-102%, 0, 0);
        box-shadow: none;
        width: 280px;
        max-width: 82vw;
        z-index: 1040;
        overflow: hidden;
        transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1) !important;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .app-sidebar.show, .sidebar-open .app-sidebar { transform: translate3d(0, 0, 0) !important; box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.22); }
    .app-main { margin-left: 0 !important; transition: none !important; }
    .app-header { padding: 0 16px; background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .page-container { padding: 16px; }
    .card-ios, .ios-card { border-radius: 16px; overflow: hidden; }
    .card-ios .d-flex.justify-content-between { gap: 6px; align-items: center; }
    .card-ios .d-flex.justify-content-between>div:first-child { min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .stat-label { font-size: 10px !important; letter-spacing: 0.3px; line-height: 1.25; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stat-value { font-size: 19px !important; letter-spacing: -0.4px; line-height: 1.2; margin: 1px 0 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stat-unit { font-size: 11px !important; margin-left: 1.5px; }
    .stat-sublabel { font-size: 10.5px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stat-icon-box { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; border-radius: 10px !important; font-size: 17px !important; flex-shrink: 0 !important; }
    .stat-icon-box i { font-size: 17px !important; }
}

/* ==========================================================================
SMARTPHONE RESPONSIVE SPEC (<= 576px, e.g. iPhone, Samsung Galaxy)
========================================================================== */

@media (max-width: 575.98px) {
    .page-container { padding: 12px 10px !important; }
    .card-ios.p-3, .card-ios.p-4, .card-ios.p-md-4 { padding: 12px 10px !important; border-radius: 14px !important; }
    .card-ios .d-flex.justify-content-between { gap: 5px !important; align-items: center !important; }
    .card-ios .d-flex.justify-content-between>div:first-child { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; }
    .stat-label { font-size: 9.5px !important; letter-spacing: 0.25px !important; margin-bottom: 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .stat-value { font-size: 16.5px !important; letter-spacing: -0.3px !important; margin: 1px 0 3px 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .stat-unit { font-size: 10px !important; margin-left: 1px !important; }
    .stat-sublabel { font-size: 9.5px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .stat-icon-box { width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; border-radius: 9px !important; font-size: 15px !important; flex-shrink: 0 !important; }
    .stat-icon-box i { font-size: 15px !important; }
    .badge-ios { font-size: 10.5px !important; padding: 3px 8px !important; white-space: nowrap !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; }
    .badge-ios.badge-multiline { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: normal !important; padding: 3px 6px !important; line-height: 1.2 !important; min-width: 85px !important; gap: 0 !important; }
}

@media (max-width: 380px) {
    .page-container { padding: 10px 8px !important; }
    .card-ios.p-3, .card-ios.p-4, .card-ios.p-md-4 { padding: 10px 8px !important; }
    .stat-label { font-size: 9px !important; }
    .stat-value { font-size: 14.5px !important; }
    .stat-icon-box { width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; border-radius: 8px !important; font-size: 13.5px !important; }
    .stat-icon-box i { font-size: 13.5px !important; }
}

/* ==========================================================================
HORIZONTAL FILTER BAR & DEDICATED FILTER CARD (MODERN IOS STRIP)
========================================================================== */
.card-filter-ios { background: #FFFFFF; border-radius: var(--ios-radius-lg); border: 1px solid var(--ios-border); box-shadow: var(--ios-shadow-xs); transition: var(--ios-transition); }
.card-filter-ios .filter-horizontal-bar { background: transparent; border: none; padding: 0; margin-bottom: 0 !important; }
.filter-horizontal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #F8FAFC; padding: 10px 14px; border-radius: 12px; border: 1px solid #E2E8F0; }
.filter-group-items { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; }
.filter-item { display: inline-flex; align-items: center; gap: 6px; }
.filter-label { font-size: 11.5px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.filter-horizontal-bar select.form-select, .filter-horizontal-bar select.filter-select-ios, .card-ios select.form-select, .card-ios select.form-select-sm, .filter-select-ios, select[id^="filter"] { min-width: 150px !important; max-width: 100% !important; padding-right: 34px !important; padding-left: 12px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #1E293B !important; height: 34px !important; line-height: 1.4 !important; background-color: #FFFFFF !important; border: 1.5px solid #E2E8F0 !important; border-radius: 8px !important; background-position: right 10px center !important; white-space: nowrap !important; text-overflow: clip !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; }
.filter-horizontal-bar input[type="date"], .filter-date-ios, .card-ios input[type="date"], input[id^="filter"][type="date"] { width: 135px !important; height: 34px !important; font-size: 12px !important; font-weight: 500 !important; padding: 4px 8px !important; border: 1.5px solid #E2E8F0 !important; border-radius: 8px !important; color: #1E293B !important; background-color: #FFFFFF !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important; }
.filter-horizontal-bar input[type="text"], .filter-search-ios { height: 34px !important; font-size: 12.5px !important; font-weight: 500 !important; padding: 4px 12px !important; border: 1.5px solid #E2E8F0 !important; border-radius: 8px !important; color: #1E293B !important; background-color: #FFFFFF !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; }
.filter-horizontal-bar select:focus, .filter-horizontal-bar input[type="date"]:focus, .filter-horizontal-bar input[type="text"]:focus, .filter-search-ios:focus, .card-ios select.form-select:focus, .card-ios input[type="date"]:focus { border-color: #16A34A !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important; outline: none !important; }
.filter-action-item { margin-left: auto; }
.filter-action-item .btn { height: 34px !important; font-size: 12px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; }

/* ==========================================================================
KEBAB 3-DOTS ACTION DROPDOWN
========================================================================== */
.btn-icon-more { width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; border: 1.5px solid #E2E8F0 !important; background: #FFFFFF !important; color: #64748B !important; font-size: 16px !important; line-height: 1 !important; transition: all 0.18s ease !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important; }
.btn-icon-more:hover, .btn-icon-more:focus, .show>.btn-icon-more { background: #F1F5F9 !important; color: #0F172A !important; border-color: #CBD5E1 !important; transform: translateY(-1px); }
.ios-dropdown-menu { border-radius: 12px !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important; padding: 6px !important; min-width: 190px !important; background: #FFFFFF !important; z-index: 1065 !important; }
.dropdown.dropup .ios-dropdown-menu { margin-bottom: 6px !important; }
.ios-dropdown-menu .dropdown-item { border-radius: 8px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #334155 !important; padding: 7px 12px !important; display: flex !important; align-items: center !important; transition: all 0.15s ease !important; }
.ios-dropdown-menu .dropdown-item:hover { background: #F8FAFC !important; color: #0F172A !important; }
.ios-dropdown-menu .dropdown-item.text-danger:hover { background: #FEF2F2 !important; color: #DC2626 !important; }

/* ==========================================================================
CLEAN IOS DATATABLES (BORDERLESS STRIPLESS SLEEK DATA ROWS)
========================================================================== */
table.dataTable.table-simbun, table.table-simbun { border-collapse: separate !important; border-spacing: 0 !important; border: none !important; margin-top: 4px !important; margin-bottom: 4px !important; }
table.dataTable.table-simbun> :not(caption)>*>*, table.table-simbun> :not(caption)>*>* { border-bottom-width: 1px !important; box-shadow: none !important; }

/* Header Abu-abu Soft, Tanpa Garis Border 2, dan Freeze Kolom Header */
.dataTables_scrollHead table.dataTable.table-simbun thead, .dataTables_scrollHead table.table-simbun thead, div:not(.dataTables_scrollBody)>table.dataTable.table-simbun thead, div:not(.dataTables_scrollBody)>table.table-simbun thead { background: #F8FAFC !important; }
.dataTables_scrollHead table.dataTable.table-simbun thead th, .dataTables_scrollHead table.table-simbun thead th, div:not(.dataTables_scrollBody)>table.dataTable.table-simbun thead th, div:not(.dataTables_scrollBody)>table.table-simbun thead th { border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 1px solid #E2E8F0 !important; }

/* ==========================================================================
DATATABLES SCROLL: HILANGKAN DOUBLE HEADER & JAGA PRESISI ALIGNMENT 100%
========================================================================== */

/* Header klon di scrollBody memiliki tinggi vertikal 0px, namun lebar horizontal & padding kiri-kanan tetap 100% identik dengan scrollHead */
.dataTables_scrollBody thead, .dataTables_scrollBody thead tr, div.dataTables_scrollBody>table>thead, div.dataTables_scrollBody>table>thead>tr { height: 0px !important; line-height: 0px !important; margin: 0px !important; padding: 0px !important; border: none !important; background: transparent !important; }
.dataTables_scrollBody thead th, .dataTables_scrollBody thead td, div.dataTables_scrollBody>table>thead>tr>th, div.dataTables_scrollBody>table>thead>tr>td { height: 0px !important; min-height: 0px !important; max-height: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important; border-top: none !important; border-bottom: none !important; border-top-width: 0px !important; border-bottom-width: 0px !important; background: transparent !important; }

/* Biarkan .dataTables_sizing mengukur lebar teks header (dengan font-size, uppercase & letter-spacing identik) tetapi tingginya 0px vertikal */
.dataTables_scrollBody thead th .dataTables_sizing, .dataTables_scrollBody thead td .dataTables_sizing, div.dataTables_scrollBody>table>thead>tr>th>.dataTables_sizing, div.dataTables_scrollBody>table>thead>tr>td>.dataTables_sizing { height: 0px !important; max-height: 0px !important; overflow: hidden !important; margin: 0px !important; padding: 0px !important; line-height: 0px !important; visibility: hidden !important; color: transparent !important; display: block !important; white-space: nowrap !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; }

/* Sembunyikan panah sorting DataTables di scrollBody */
.dataTables_scrollBody thead th::before, .dataTables_scrollBody thead th::after, .dataTables_scrollBody thead td::before, .dataTables_scrollBody thead td::after, div.dataTables_scrollBody>table>thead>tr>th::before, div.dataTables_scrollBody>table>thead>tr>th::after { display: none !important; content: "" !important; }

/* Sinkronkan tabel header dan tabel body tanpa menimpa inline pixel width dari DataTables dengan !important */
.dataTables_scrollHeadInner { box-sizing: border-box !important; }
.dataTables_scrollHead table.table-simbun, .dataTables_scrollBody table.table-simbun { min-width: 100% !important; margin: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; }
.dataTables_scrollHead table.table-simbun.w-100, .dataTables_scrollBody table.table-simbun.w-100 { width: auto !important; min-width: 100% !important; }

/* Standalone responsive tables (Profile, Dashboard, modals) harus bisa scroll horizontal */
.table-responsive, .card-ios>.table-responsive, .card-ios .table-responsive, .card-body>.table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; }

@media (min-width: 992px) {

    /* Hanya pada desktop dengan DataTables, biarkan overflow visible untuk sticky freeze header */
    .table-responsive:has(.dataTables_wrapper) { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; }
}

/* ==========================================================================
FREEZE / STICKY TOOLBAR PENCARIAN & HEADER DATATABLES (DESKTOP ONLY)
Di HP / Mobile dinonaktifkan sepenuhnya agar tidak merusak tampilan.
========================================================================== */

@media (min-width: 992px) {
    div.dataTables_wrapper>.dt-toolbar-top, div.dataTables_wrapper>div.row:first-child { position: sticky !important; top: var(--header-height, 72px) !important; z-index: 35 !important; background: #FFFFFF !important; padding-top: 10px !important; padding-bottom: 12px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; transition: background-color 0.15s ease, border-color 0.15s ease !important; }
    div.dataTables_wrapper>.dt-toolbar-top.is-frozen, div.dataTables_wrapper>div.row:first-child.is-frozen { background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-bottom: 1px solid #F1F5F9 !important; }
    div.dataTables_wrapper .dataTables_scroll { position: relative !important; }
    div.dataTables_wrapper div.dataTables_scrollHead { position: sticky !important; top: calc(var(--header-height, 72px) + var(--dt-toolbar-height, 54px)) !important; z-index: 30 !important; background: #F8FAFC !important; border-bottom: 1.5px solid #E2E8F0 !important; transition: box-shadow 0.18s ease !important; }

    /* Elevasi halus saat header membeku di bawah navbar */
    div.dataTables_wrapper div.dataTables_scrollHead.is-frozen { box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.08) !important; }
    div.dataTables_wrapper div.dataTables_scrollHead table { margin-bottom: 0 !important; background: #F8FAFC !important; }
    div.dataTables_wrapper div.dataTables_scrollHead th { background-color: #F8FAFC !important; }

    /* Fallback Sticky Header untuk tabel mandiri */
    table.dataTable thead th, table.table-simbun thead th { position: sticky !important; top: 0; z-index: 10; background-color: #F8FAFC !important; }
}

/* TAMPILAN BIASA DI HP (MOBILE) TANPA FITUR FREEZE */

@media (max-width: 991.98px) {
    div.dataTables_wrapper>.dt-toolbar-top, div.dataTables_wrapper>div.row:first-child, div.dataTables_wrapper div.dataTables_scrollHead, table.dataTable thead th, table.table-simbun thead th { position: static !important; top: auto !important; z-index: auto !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #F8FAFC !important; }
    div.dataTables_wrapper>.dt-toolbar-top.is-frozen, div.dataTables_wrapper>div.row:first-child.is-frozen, div.dataTables_wrapper div.dataTables_scrollHead.is-frozen { position: static !important; box-shadow: none !important; background: #F8FAFC !important; }
}
div.dataTables_scrollBody>table { border-top: none !important; margin-top: 0px !important; }
.table-responsive { overflow-x: auto; position: relative; }
table.dataTable.table-simbun tbody td, table.table-simbun tbody td { border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 1px solid #F1F5F9 !important; background: #FFFFFF !important; color: #1E293B !important; font-size: 12.5px !important; font-weight: 400 !important; padding: 12px 14px !important; vertical-align: middle !important; box-shadow: none !important; white-space: nowrap !important; }
table.dataTable.table-simbun tbody tr:hover td, table.table-simbun tbody tr:hover td { background: #F8FAFC !important; }

/* Kolom Trace Code: Tanpa background, tanpa border, tanpa bold, hanya link yang bisa diklik */
.trace-code-clean-link { color: #16A34A !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: none !important; background: transparent !important; border: none !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; cursor: pointer !important; transition: color 0.15s ease, text-decoration 0.15s ease !important; }
.trace-code-clean-link:hover { color: #15803D !important; text-decoration: underline !important; }

/* Filter bar & table card diam saat disentuh / hover */
.card-filter-ios, .card-filter-ios:hover { transform: none !important; }

/* ==========================================================================
SMALL & PRESTIGE DATATABLES PAGINATION (PREVIOUS [1] NEXT)
========================================================================== */
.dataTables_wrapper .dataTables_paginate { margin-top: 14px !important; margin-bottom: 6px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; }
.dataTables_wrapper .dataTables_paginate ul.pagination { display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dataTables_wrapper .dataTables_paginate ul.pagination .page-item .page-link, .dataTables_wrapper .dataTables_paginate .paginate_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 30px !important; height: 30px !important; padding: 0 10px !important; font-size: 11.5px !important; font-weight: 600 !important; color: #475569 !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 8px !important; text-decoration: none !important; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important; }
.dataTables_wrapper .dataTables_paginate ul.pagination .page-item .page-link:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--ios-primary) !important; background: var(--ios-primary-light) !important; border-color: var(--ios-primary-border) !important; }
.dataTables_wrapper .dataTables_paginate ul.pagination .page-item.active .page-link, .dataTables_wrapper .dataTables_paginate .paginate_button.current { color: #FFFFFF !important; background: linear-gradient(135deg, #15803D 0%, #16A34A 100%) !important; border-color: #16A34A !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important; }
.dataTables_wrapper .dataTables_paginate ul.pagination .page-item.disabled .page-link, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: #94A3B8 !important; background: #F8FAFC !important; border-color: #E2E8F0 !important; opacity: 0.55 !important; cursor: not-allowed !important; box-shadow: none !important; }

/* ==========================================================================
MITRA SOFT GRADIENT CARDS & PROFILE IOS SETTINGS STYLES
========================================================================== */
.card-gradient-soft { background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.card-gradient-soft:hover { transform: none !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important; border-color: #CBD5E1 !important; }
.card-gradient-soft .stat-label { font-size: 11px !important; font-weight: 700 !important; color: #64748B !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; }
.card-gradient-soft .stat-sublabel { font-size: 11.5px !important; color: #94A3B8 !important; }

/* ==========================================================================
iOS POSKO IDENTITY CARD STYLING (Apple Unified Clean Aesthetic)
========================================================================== */
.posko-card-container { border-radius: 20px !important; background: #FFFFFF !important; border: 1px solid rgba(226, 232, 240, 0.95) !important; box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important; transition: box-shadow 0.22s ease, border-color 0.22s ease !important; position: relative; overflow: hidden; transform: none !important; }
.posko-card-container:hover { transform: none !important; box-shadow: 0 8px 25px -2px rgba(15, 23, 42, 0.07), 0 3px 8px -1px rgba(15, 23, 42, 0.03) !important; border-color: #CBD5E1 !important; }
.posko-card-header-ios { background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%) !important; border-bottom: 1px solid #F1F5F9 !important; padding: 18px 20px 14px 20px; position: relative; }
.posko-card-header-ios .btn-icon-more { background: transparent !important; border: none !important; box-shadow: none !important; color: #94A3B8 !important; width: 28px !important; height: 28px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background 0.18s ease, color 0.18s ease !important; }
.posko-card-header-ios .btn-icon-more:hover, .posko-card-header-ios .btn-icon-more:focus, .posko-card-header-ios .show>.btn-icon-more { background: #F1F5F9 !important; color: #0F172A !important; box-shadow: none !important; transform: none !important; }
.posko-card-footer-ios { padding: 14px 20px !important; background: linear-gradient(180deg, #FAFAFA 0%, #F8FAFC 100%) !important; border-top: 1px solid #F1F5F9 !important; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badge-posko-mitra { display: inline-flex; align-items: center; gap: 6px; padding: 6.5px 14px !important; border-radius: 999px !important; background: #FFFFFF !important; color: #334155 !important; font-size: 12px !important; font-weight: 600 !important; border: 1px solid #E2E8F0 !important; white-space: nowrap; line-height: 1.2; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.badge-posko-mitra:hover { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1D4ED8 !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12) !important; }
.badge-posko-mitra:active { transform: translateY(0); }
.badge-posko-mitra i { font-size: 12.5px; color: #2563EB !important; }
.btn-open-posko-ios { background: linear-gradient(135deg, #16A34A 0%, #15803D 100%) !important; color: #FFFFFF !important; border: none !important; border-radius: 999px !important; font-weight: 600 !important; font-size: 12px !important; padding: 7px 16px !important; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.24) !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.btn-open-posko-ios:hover { background: linear-gradient(135deg, #15803D 0%, #166534 100%) !important; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.32) !important; transform: translateY(-1px); }
.btn-open-posko-ios:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2); }
.posko-card-col { transition: opacity 0.25s ease; }

/* ==========================================================================
APP FOOTER (Keterangan Hak Cipta Perusahaan di Semua Halaman)
========================================================================== */
.app-footer { padding: 16px 24px; background: #FFFFFF; border-top: 1px solid #F1F5F9; margin-top: auto; width: 100%; }
.app-footer-text { color: #94A3B8 !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: -0.1px; margin: 0; }

@media (max-width: 991.98px) {
    .app-footer { padding: 14px 20px; }
}

/* ==========================================================================
iOS TOAST NOTIFICATION (Kecil di Pojok Kanan Atas - Simetris & Tidak Terpotong)
========================================================================== */
body.swal2-toast-shown .swal2-container, .swal2-container.ios-toast-container, .swal2-container.swal2-top-end, .swal2-container.swal2-top-right { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-start !important; width: auto !important; min-width: unset !important; max-width: 100vw !important; height: auto !important; inset: 16px 20px auto auto !important; padding: 0 !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; pointer-events: none !important; }
body.swal2-toast-shown .swal2-backdrop-show, .swal2-container.ios-toast-container.swal2-backdrop-show, .swal2-container.swal2-top-end.swal2-backdrop-show { background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.ios-toast-popup { border-radius: 14px !important; background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important; padding: 12px 18px !important; margin: 0 !important; width: auto !important; min-width: 260px !important; max-width: min(440px, calc(100vw - 40px)) !important; overflow: hidden !important; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; pointer-events: all !important; box-sizing: border-box !important; }
.ios-toast-popup .swal2-title { font-size: 13.5px !important; font-weight: 700 !important; color: #0F172A !important; margin: 0 !important; padding: 0 4px !important; line-height: 1.35 !important; white-space: nowrap !important; }
.ios-toast-popup .swal2-icon { margin: 0 10px 0 0 !important; transform: scale(0.85) !important; border-color: #16A34A !important; color: #16A34A !important; flex-shrink: 0 !important; }
.ios-toast-popup .swal2-timer-progress-bar { background: #16A34A !important; height: 3px !important; }

/* ==========================================================================
HILANGKAN TOMBOL SPINNER PANAH NAIK-TURUN PADA INPUT NUMBER (KG / ANGKA)
========================================================================== */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
input[type="number"] { -moz-appearance: textfield !important; appearance: textfield !important; }

/* ==========================================================================
AUTO TEXT TRANSFORMATION & INPUT FORMAT UTILITIES
========================================================================== */
.input-auto-uppercase { text-transform: uppercase !important; }
.input-auto-capitalize { text-transform: capitalize !important; }
.input-auto-kg { font-variant-numeric: tabular-nums; }

/* ==========================================================================
iOS BATCH SELECTION MODE (MODE PILIH / HAPUS MASAL ELEGAN)
========================================================================== */
.btn-toggle-batch-select { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; color: #64748B; background: transparent; border: none !important; padding: 0; cursor: pointer; transition: all 0.15s ease; vertical-align: middle; }
.btn-toggle-batch-select:hover { color: #1E293B; background: rgba(100, 116, 139, 0.12); }
.btn-toggle-batch-select.all-checked, .btn-toggle-batch-select.active { color: #EF4444 !important; background: rgba(239, 68, 68, 0.12) !important; }
.col-no-action { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.col-no-number, .col-no-label { min-width: 20px; text-align: center; }

/* Checkbox Hapus Masal - Merah Elegan (Apple iOS Crimson Red) */
.batch-checkbox { display: none !important; cursor: pointer; border-radius: 4px; border: 1.5px solid #CBD5E1; transition: all 0.15s ease-in-out; accent-color: #EF4444; }
.table-batch-active .batch-checkbox { display: inline-block !important; }
.batch-checkbox:hover, .check-item-mitra:hover { border-color: #EF4444; }
.batch-checkbox:checked, .check-item-mitra:checked { background-color: #EF4444 !important; border-color: #DC2626 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important; box-shadow: 0 2px 5px rgba(239, 68, 68, 0.3) !important; }
.batch-checkbox:focus, .check-item-mitra:focus { border-color: #F87171 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important; }

/* iOS Clean Form Placeholder Styling */
::placeholder, .form-control::placeholder, .form-control-ios::placeholder, input::placeholder, textarea::placeholder { color: #94A3B8 !important; font-weight: 400 !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif !important; opacity: 0.75 !important; font-size: 13px !important; letter-spacing: normal !important; }

/* Posko Chip Picker (Interactive iOS Chips) */
.posko-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; }
.posko-chip-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; border: 1px solid #E2E8F0; background: #FFFFFF; color: #475569; font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.posko-chip-item:hover { border-color: #CBD5E1; background: #F1F5F9; color: #1E293B; transform: translateY(-1px); }
.posko-chip-item.is-selected { background: #ECFDF5 !important; border-color: #10B981 !important; color: #065F46 !important; font-weight: 600 !important; box-shadow: 0 2px 5px rgba(16, 185, 129, 0.15) !important; }
.posko-chip-item .chip-check { display: none; color: #10B981; font-size: 13px; }
.posko-chip-item.is-selected .chip-check { display: inline-block; }
.posko-chip-item.is-selected .chip-pin { display: none; }

/* iOS Clean Form Placeholder Styling */
::placeholder, .form-control::placeholder, .form-control-ios::placeholder, input::placeholder, textarea::placeholder { color: #94A3B8 !important; font-weight: 400 !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif !important; opacity: 0.75 !important; font-size: 13px !important; letter-spacing: normal !important; }

/* Posko Chip Picker (Interactive iOS Chips) */
.posko-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; }
.posko-chip-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; border: 1px solid #E2E8F0; background: #FFFFFF; color: #475569; font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.posko-chip-item:hover { border-color: #CBD5E1; background: #F1F5F9; color: #1E293B; transform: translateY(-1px); }
.posko-chip-item.is-selected { background: #ECFDF5 !important; border-color: #10B981 !important; color: #065F46 !important; font-weight: 600 !important; box-shadow: 0 2px 5px rgba(16, 185, 129, 0.15) !important; }
.posko-chip-item .chip-check { display: none; color: #10B981; font-size: 13px; }
.posko-chip-item.is-selected .chip-check { display: inline-block; }
.posko-chip-item.is-selected .chip-pin { display: none; }

/* ==========================================================================
GLOBAL SMARTPHONE (HP) RESPONSIVE OPTIMIZATIONS (iOS & Android)
========================================================================== */

@media (max-width: 767.98px) {

    /* Top Navbar Mobile Typography & Layout */
    .app-header { padding: 0 16px !important; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; }
    .header-left { gap: 10px !important; min-width: 0 !important; flex: 1 1 auto !important; }
    .header-title-block { min-width: 0 !important; flex: 1 1 auto !important; }
    .header-page-title, .header-title h1 { font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: calc(100vw - 150px) !important; line-height: 1.25 !important; }
    .header-breadcrumb { font-size: 11px !important; color: var(--text-muted, #8e8e93) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: calc(100vw - 150px) !important; gap: 4px !important; }
    .header-breadcrumb span:not(:first-child):not(:last-child) { display: none !important; }

    /* Page Content Header Mobile Typography & Container Spacing */
    .page-container { padding: 14px 16px !important; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; }
    .page-header { margin-bottom: 16px !important; }
    .page-header .page-title, .page-title { font-size: 19px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #0F172A !important; word-break: normal !important; overflow-wrap: break-word !important; }
    .page-header p, .page-header .text-muted, .page-header-subtitle { font-size: 12.5px !important; line-height: 1.45 !important; color: #6b7280 !important; margin-top: 3px !important; word-break: normal !important; overflow-wrap: break-word !important; }

    /* Modal Dialog Responsif di Layar Tablet / HP Sedang (641px - 767px) */
    .modal-dialog { margin: 0.5rem auto !important; max-width: calc(100% - 1rem) !important; }
    .modal-content.ios-modal, .modal-content.card-ios { border-radius: 18px !important; }
    .modal-body { padding: 1rem 0.85rem !important; }
    .modal-header { padding: 1rem 1rem 0.6rem 1rem !important; }
    .modal-footer { padding: 0.75rem 1rem 1rem 1rem !important; display: flex !important; flex-direction: column-reverse !important; align-items: stretch !important; gap: 8px !important; }
    .modal-footer>* { width: 100% !important; margin: 0 !important; }
    .modal-footer .btn { width: 100% !important; min-height: 42px !important; height: auto !important; padding: 9px 16px !important; font-size: 13px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; }

    /* Trace Code & Live Calculation Previews on Smartphone */
    .trace-code-preview-card, .modal-body .p-3.rounded-3.bg-light.border, .modal-body .p-2\.5.rounded-3.bg-light.border { padding: 10px 12px !important; border-radius: 12px !important; }
    .modal-body code.font-monospace { white-space: nowrap !important; word-break: keep-all !important; display: inline-block !important; }
    .page-header .btn, .card-header-clean .btn, .btn-action-header, .btn-ios, .btn-ios-primary, .btn-ios-outline, .btn-ios-secondary, .btn-ios-success, .btn-ios-danger, .btn-ios-warning { padding: 6px 12px !important; font-size: 12px !important; line-height: 1.25 !important; border-radius: 9px !important; min-height: 34px !important; height: 34px !important; gap: 5px !important; white-space: nowrap !important; }
    .table td .btn, .table td .btn-ios, .table td .btn-action-table { min-height: unset !important; height: auto !important; padding: 4px 8px !important; }
    .page-header .btn i, .card-header-clean .btn i, .btn-ios i, .btn-ios-primary i, .btn-ios-outline i, .btn-ios-secondary i { font-size: 13px !important; }
    .page-header .d-flex.gap-2, .page-header .d-flex.align-items-center.gap-2, .card-header-clean>div:last-child { flex-wrap: wrap !important; gap: 6px !important; }

    /* Container Tabel: Selalu Mengalir Halus & Tidak Terpotong di HP */
    .table-responsive { -webkit-overflow-scrolling: touch !important; overflow-x: auto !important; max-width: 100% !important; display: block !important; position: relative !important; }

    /* SweetAlert Toast & Popup di Layar HP agar Teks Tidak Terpotong */
    .ios-toast-popup { max-width: calc(100vw - 20px) !important; margin: 8px auto !important; }
    .ios-toast-popup .swal2-title { white-space: normal !important; font-size: 12.5px !important; line-height: 1.35 !important; }
    .ios-swal-popup, div.swal2-popup.ios-swal-popup { max-width: calc(100vw - 28px) !important; padding: 18px 14px 14px !important; }

    /* Tampilan bersih di HP: Nonaktifkan freeze/sticky, hilangkan duplikat scrollbar pada scrollHead */
    div.dataTables_wrapper, div.dataTables_wrapper div.dataTables_scroll { position: static !important; overflow: visible !important; }
    div.dataTables_wrapper div.dataTables_scrollHead { position: static !important; overflow: hidden !important; border-bottom: 1px solid #E2E8F0 !important; }
    div.dataTables_wrapper div.dataTables_scrollHead::-webkit-scrollbar { display: none !important; height: 0 !important; width: 0 !important; }
    div.dataTables_wrapper div.dataTables_scrollBody { position: relative !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; border-bottom: 1px solid #E2E8F0 !important; }
    div.dataTables_wrapper div.dataTables_scrollBody::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { height: 4px !important; width: 4px !important; }
    div.dataTables_wrapper div.dataTables_scrollBody::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track { background: transparent !important; }
    div.dataTables_wrapper div.dataTables_scrollBody::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb { background: #CBD5E1 !important; border-radius: 999px !important; }
}

/* ==========================================================================
MOBILE BOTTOM SHEET MODAL (NATIVE iOS SHEET STYLE <= 640px)
========================================================================== */

@media (max-width: 640px) {
    .modal { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden !important; }
    .modal-dialog { margin: 0 !important; max-width: 100% !important; width: 100% !important; min-height: 100% !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; pointer-events: none !important; }
    .modal-dialog-centered { min-height: 100% !important; }
    .modal-dialog>* { pointer-events: auto !important; }
    .modal-content, .modal-content.ios-modal, .modal-content.card-ios { border-radius: 22px 22px 0 0 !important; max-height: 90vh !important; border-bottom: none !important; border-left: none !important; border-right: none !important; width: 100% !important; box-shadow: 0 -10px 35px rgba(15, 23, 42, 0.18) !important; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }

    /* Interactive iOS Bottom Sheet Drag Handle Bar */
    .modal-header { position: relative !important; padding-top: 24px !important; touch-action: none !important; user-select: none !important; -webkit-user-select: none !important; cursor: grab !important; }
    .modal-header:active { cursor: grabbing !important; }
    .modal-header::before { content: "" !important; display: block !important; position: absolute !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important; width: 42px !important; height: 5px !important; background: #CBD5E1 !important; border-radius: 999px !important; transition: background-color 0.15s ease, transform 0.15s ease !important; pointer-events: auto !important; }
    .modal-content.is-sheet-dragging .modal-header::before, .modal-header:active::before { background: #94A3B8 !important; transform: translateX(-50%) scaleX(1.12) !important; }
    .modal.fade .modal-dialog { transform: translate3d(0, 100%, 0) !important; opacity: 1 !important; transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: transform !important; }
    .modal.show .modal-dialog { transform: translate3d(0, 0, 0) !important; opacity: 1 !important; }
    .modal.fade:not(.show) .modal-dialog { transform: translate3d(0, 100%, 0) !important; opacity: 1 !important; transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important; }

    /* Prevent mobile browser zoom jumping on input focus (keep 16px font-size) */
    .modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea { font-size: 16px !important; }
}

/* ==========================================================================
SOLID DOT BADGE & REAL-TIME USER MONITORING (SIDEBAR & KELOLA PENGGUNA)
========================================================================== */
.user-avatar-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Solid Dot Badge: Titik hijau/abu kecil padat dengan border putih di kanan bawah avatar */
.status-dot-badge { position: absolute; bottom: 0px; right: 0px; width: 10.5px; height: 10.5px; border-radius: 50%; border: 2px solid #FFFFFF; box-sizing: border-box; z-index: 3; pointer-events: none; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.sidebar-footer .status-dot-badge { width: 10.5px; height: 10.5px; bottom: 0px; right: 0px; border: 2px solid #FFFFFF; }
.user-avatar-table-wrap .status-dot-badge { width: 10.5px; height: 10.5px; bottom: -1px; right: -1px; border: 2px solid #FFFFFF; }
.status-dot-badge.status-dot-inline { position: relative; bottom: auto; right: auto; width: 8px; height: 8px; border: none; display: inline-block; flex-shrink: 0; box-shadow: none; }

/* Status Aktif (Online) - Padat & tenang di kondisi normal */
.status-dot-badge.is-online { background-color: #22C55E; box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25); }

/* Status Tidak Aktif (Offline) */
.status-dot-badge.is-offline { background-color: #CBD5E1; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }

/* Efek Berkedip Lembut (Pulse / Glow Animation) HANYA pada kondisi khusus:
1. Detik-detik Pertama Setelah Login (berkedip lembut 3 kali lalu diam)
2. Status Proses Real-Time (sedang Syncing data otomatis) */

@keyframes simbunDotPulseSoft {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); transform: scale(1); }
    50% { box-shadow: 0 0 0 4.5px rgba(34, 197, 94, 0); transform: scale(1.08); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); }
}
.status-dot-badge.is-online.pulse-login-initial { animation: simbunDotPulseSoft 1.25s cubic-bezier(0.4, 0, 0.6, 1) 3; }
.status-dot-badge.is-online.is-syncing { animation: simbunDotPulseSoft 1.05s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Header Card Layout & Pill Real-Time Sync di Menu Kelola Pengguna */
.users-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
.users-header-info { flex: 1 1 auto; min-width: 0; }
.users-header-actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.realtime-sync-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px; background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%); border: 1px solid #BBF7D0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85); font-size: 12px; color: #1E293B; line-height: 1; white-space: nowrap; user-select: none; transition: all 0.2s ease; }
.realtime-sync-pill:hover { border-color: #86EFAC; box-shadow: 0 2px 6px rgba(21, 128, 61, 0.08); }
.realtime-dot-ring { width: 18px; height: 18px; border-radius: 50%; background: rgba(34, 197, 94, 0.14); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.realtime-sync-pill .realtime-sync-text { font-size: 12px; font-weight: 600; color: #1E293B; letter-spacing: -0.01em; }
.realtime-sync-pill .realtime-sync-text strong { color: #15803D; font-weight: 700; font-size: 12.5px; margin-right: 1px; }
.realtime-sync-pill .realtime-sync-divider { width: 1px; height: 14px; background: #CBD5E1; opacity: 0.75; flex-shrink: 0; }
.realtime-sync-pill .realtime-sync-sub { display: inline-flex; align-items: center; gap: 4px; color: #15803D; font-size: 11px; font-weight: 600; background: rgba(22, 163, 74, 0.08); padding: 3px 7px; border-radius: 6px; letter-spacing: 0.01em; }
.realtime-sync-pill .realtime-sync-icon { font-size: 11px; color: #16A34A; }

/* Kolom Status Online pada Tabel Kelola Pengguna */
.badge-online-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.badge-online-status .badge-online-dot { width: 6.5px; height: 6.5px; border-radius: 50%; flex-shrink: 0; }
.badge-online-status.is-online { background-color: #ECFDF5; color: #15803D; border: 1px solid #BBF7D0; }
.badge-online-status.is-online .badge-online-dot { background-color: #22C55E; }
.badge-online-status.is-offline { background-color: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0; }
.badge-online-status.is-offline .badge-online-dot { background-color: #94A3B8; }

/* Kolom Login Terakhir pada Tabel Kelola Pengguna */
.last-login-box { display: flex; flex-direction: column; line-height: 1.3; }
.last-login-date { font-size: 12px; font-weight: 600; color: #1E293B; white-space: nowrap; }
.last-login-rel { font-size: 11px; color: #64748B; margin-top: 2px; white-space: nowrap; }
.last-login-rel.is-online-text { color: #16A34A; font-weight: 500; }

/* Responsif HP & Tablet untuk Indikator Status & Tabel Pengguna */

@media (max-width: 991.98px) {
    .users-card-header { flex-wrap: wrap; }
}

@media (max-width: 767.98px) {
    .users-card-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .users-header-actions { width: 100%; justify-content: space-between; gap: 8px; }
    .realtime-sync-pill { height: 34px; padding: 0 10px; font-size: 11.5px; gap: 6px; }
    .sidebar-footer .status-dot-badge, .user-avatar-table-wrap .status-dot-badge { width: 10px; height: 10px; border-width: 1.8px; }

    /* Agar pesan kosong (Tidak ada data yang ditemukan) pada tabel lebar tetap berada tepat di tengah layar HP */
    table.dataTable tbody td.dataTables_empty { text-align: left !important; padding: 16px 12px !important; }
    table.dataTable tbody td.dataTables_empty .dt-empty-state-box { width: calc(100vw - 72px); max-width: 100%; position: sticky; left: 12px; margin: 0; text-align: center !important; }
}

/* Tooltip Elegan iOS Transparan Air (Liquid Glassmorphism) */
.tooltip-ios-posko { opacity: 1 !important; z-index: 1070; }
.tooltip-ios-posko .tooltip-inner { background: rgba(255, 255, 255, 0.84) !important; backdrop-filter: blur(24px) saturate(190%) !important; -webkit-backdrop-filter: blur(24px) saturate(190%) !important; color: #0F172A !important; border-radius: 14px !important; padding: 10px 14px !important; font-size: 11px !important; line-height: 1.4 !important; box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(203, 213, 225, 0.8) !important; min-width: 275px !important; max-width: 340px !important; text-align: left !important; }
.tooltip-ios-posko.bs-tooltip-top .tooltip-arrow::before, .tooltip-ios-posko[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: rgba(203, 213, 225, 0.85) !important; }
.tooltip-ios-posko.bs-tooltip-bottom .tooltip-arrow::before, .tooltip-ios-posko[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: rgba(203, 213, 225, 0.85) !important; }
.tooltip-ios-posko.bs-tooltip-start .tooltip-arrow::before, .tooltip-ios-posko[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: rgba(203, 213, 225, 0.85) !important; }
.tooltip-ios-posko.bs-tooltip-end .tooltip-arrow::before, .tooltip-ios-posko[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: rgba(203, 213, 225, 0.85) !important; }

/* iOS Segmented Nav Pills */
.nav-pills-ios { display: inline-flex !important; align-items: center; background: #F1F5F9 !important; padding: 3px !important; border-radius: 10px !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; gap: 2px !important; }
.nav-pills-ios .nav-item { margin: 0 !important; }
.nav-pills-ios .nav-link { color: #64748B !important; background: transparent !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 11.5px !important; padding: 5px 14px !important; white-space: nowrap !important; border: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.nav-pills-ios .nav-link:hover { color: #0F172A !important; }
.nav-pills-ios .nav-link.active { background: #FFFFFF !important; color: #0F172A !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04) !important; }

/* ==========================================================================
DATATABLES MOBILE RESPONSIVE TOOLBAR (LENGTH & SEARCH IN ONE ROW)
========================================================================== */

/* Pastikan wrapper induk membungkus length dan filter secara flex 1 baris */
.dataTables_wrapper .row:first-child, .dataTables_wrapper .dt-toolbar-top, .dataTables_wrapper .dt-layout-row:first-child, .dataTables_wrapper>div:first-child { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; margin-bottom: 12px !important; width: 100% !important; }

/* Kolom grid Bootstrap di toolbar tidak boleh 100% width di mobile */
.dataTables_wrapper .row:first-child>[class*="col-"], .dataTables_wrapper .dt-toolbar-top>[class*="col-"], .dataTables_wrapper .dt-layout-row:first-child>[class*="col-"] { width: auto !important; max-width: none !important; flex: 0 0 auto !important; padding: 0 !important; }
.dataTables_wrapper .row:first-child>[class*="col-"]:last-child, .dataTables_wrapper .dt-toolbar-top>[class*="col-"]:last-child, .dataTables_wrapper .dt-layout-row:first-child>[class*="col-"]:last-child { flex: 1 1 auto !important; max-width: 60% !important; display: flex !important; justify-content: flex-end !important; }

/* Container Tampilkan Data (Length) */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dt-length { flex-shrink: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dt-length label { display: flex !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; color: #64748b !important; margin: 0 !important; white-space: nowrap !important; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dt-length select { font-size: 12px !important; padding: 6px 24px 6px 8px !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; background-color: #ffffff !important; height: 36px !important; outline: none !important; }

/* Penyelarasan Dropdown Custom Select SIMBUN pada length */
.simbun-cs-dt-length .simbun-custom-select-btn { height: 36px !important; min-height: 36px !important; font-size: 12px !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; display: inline-flex !important; align-items: center !important; padding: 4px 10px !important; }

/* Container Kolom Pencarian (Filter) */
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-search { flex: 1 !important; max-width: 60% !important; width: 100% !important; margin: 0 !important; text-align: right !important; }
.dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dt-search label { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; margin: 0 !important; font-size: 0 !important; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dt-search input { width: 100% !important; max-width: 100% !important; height: 36px !important; font-size: 12px !important; padding: 6px 12px !important; border-radius: 9999px !important; border: 1px solid #e2e8f0 !important; background-color: #ffffff !important; margin-left: 0 !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.18s ease, box-shadow 0.18s ease !important; }
.dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dt-search input:focus { border-color: #10b981 !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important; }

/* Di layar desktop/laptop (>= 768px), batasi search input agar proporsional */

@media (min-width: 768px) {
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-search, .dataTables_wrapper .row:first-child>[class*="col-"]:last-child, .dataTables_wrapper .dt-toolbar-top>[class*="col-"]:last-child, .dataTables_wrapper .dt-layout-row:first-child>[class*="col-"]:last-child { max-width: 320px !important; }
}

/* Penyesuaian Ekstrem Layar Sangat Kecil (<= 420px) */

@media (max-width: 420px) {

    /* Sembunyikan kata "Tampilkan" dan "data", hanya sisakan dropdown angka */
    .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dt-length label { font-size: 0 !important; gap: 0 !important; }
    .dataTables_wrapper .dataTables_length label select, .dataTables_wrapper .dt-length label select { font-size: 12px !important; }
    .dataTables_wrapper .dataTables_length .simbun-cs-dt-length, .dataTables_wrapper .dt-length .simbun-cs-dt-length { margin: 0 !important; }
    .dataTables_wrapper .dataTables_length .simbun-cs-dt-length .simbun-custom-select-btn, .dataTables_wrapper .dt-length .simbun-cs-dt-length .simbun-custom-select-btn { font-size: 12px !important; min-width: 58px !important; padding: 4px 6px !important; }
    .dataTables_wrapper .row:first-child>[class*="col-"]:last-child, .dataTables_wrapper .dt-toolbar-top>[class*="col-"]:last-child, .dataTables_wrapper .dt-layout-row:first-child>[class*="col-"]:last-child, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-search { max-width: 68% !important; }
}

/* ==========================================================================
DATATABLES MOBILE RESPONSIVE TOOLBAR (LENGTH & SEARCH IN ONE ROW)
========================================================================== */

/* Pastikan wrapper induk membungkus length dan filter secara flex 1 baris */
.dataTables_wrapper .row:first-child, .dataTables_wrapper .dt-toolbar-top, .dataTables_wrapper .dt-layout-row:first-child, .dataTables_wrapper>div:first-child { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; margin-bottom: 12px !important; width: 100% !important; }

/* Kolom grid Bootstrap di toolbar tidak boleh 100% width di mobile */
.dataTables_wrapper .row:first-child>[class*="col-"], .dataTables_wrapper .dt-toolbar-top>[class*="col-"], .dataTables_wrapper .dt-layout-row:first-child>[class*="col-"] { width: auto !important; max-width: none !important; flex: 0 0 auto !important; padding: 0 !important; }
.dataTables_wrapper .row:first-child>[class*="col-"]:last-child, .dataTables_wrapper .dt-toolbar-top>[class*="col-"]:last-child, .dataTables_wrapper .dt-layout-row:first-child>[class*="col-"]:last-child { flex: 1 1 auto !important; max-width: 60% !important; display: flex !important; justify-content: flex-end !important; }

/* Container Tampilkan Data (Length) */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dt-length { flex-shrink: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dt-length label { display: flex !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; color: #64748b !important; margin: 0 !important; white-space: nowrap !important; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dt-length select { font-size: 12px !important; padding: 6px 24px 6px 8px !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; background-color: #ffffff !important; height: 36px !important; outline: none !important; }

/* Penyelarasan Dropdown Custom Select SIMBUN pada length */
.simbun-cs-dt-length .simbun-custom-select-btn { height: 36px !important; min-height: 36px !important; font-size: 12px !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; display: inline-flex !important; align-items: center !important; padding: 4px 10px !important; }

/* Container Kolom Pencarian (Filter) */
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-search { flex: 1 !important; max-width: 60% !important; width: 100% !important; margin: 0 !important; text-align: right !important; }
.dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dt-search label { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; margin: 0 !important; font-size: 0 !important; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dt-search input { width: 100% !important; max-width: 100% !important; height: 36px !important; font-size: 12px !important; padding: 6px 12px !important; border-radius: 9999px !important; border: 1px solid #e2e8f0 !important; background-color: #ffffff !important; margin-left: 0 !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.18s ease, box-shadow 0.18s ease !important; }
.dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dt-search input:focus { border-color: #10b981 !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important; }

/* Di layar desktop/laptop (>= 768px), batasi search input agar proporsional */

@media (min-width: 768px) {
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-search, .dataTables_wrapper .row:first-child>[class*="col-"]:last-child, .dataTables_wrapper .dt-toolbar-top>[class*="col-"]:last-child, .dataTables_wrapper .dt-layout-row:first-child>[class*="col-"]:last-child { max-width: 320px !important; }
}

/* Penyesuaian Ekstrem Layar Sangat Kecil (<= 420px) */

@media (max-width: 420px) {

    /* Sembunyikan kata "Tampilkan" dan "data", hanya sisakan dropdown angka */
    .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dt-length label { font-size: 0 !important; gap: 0 !important; }
    .dataTables_wrapper .dataTables_length label select, .dataTables_wrapper .dt-length label select { font-size: 12px !important; }
    .dataTables_wrapper .dataTables_length .simbun-cs-dt-length, .dataTables_wrapper .dt-length .simbun-cs-dt-length { margin: 0 !important; }
    .dataTables_wrapper .dataTables_length .simbun-cs-dt-length .simbun-custom-select-btn, .dataTables_wrapper .dt-length .simbun-cs-dt-length .simbun-custom-select-btn { font-size: 12px !important; min-width: 58px !important; padding: 4px 6px !important; }
    .dataTables_wrapper .row:first-child>[class*="col-"]:last-child, .dataTables_wrapper .dt-toolbar-top>[class*="col-"]:last-child, .dataTables_wrapper .dt-layout-row:first-child>[class*="col-"]:last-child, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-search { max-width: 68% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar, .sidebar-backdrop { transition-duration: 0.01s !important; }
}