/* ==========================================================================
   MODERN DESIGN SYSTEM - RAHMAT S (PTA BANDUNG)
   Warna Utama: Hijau Forest/Mahkamah Agung (#143d29) & Emas MA (#eab308)
   Styling Sudut: Flat & Sharp (Siku-Siku Tajam)
   Cleaned & Deduplicated Production Build v2.2
   ========================================================================== */

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

:root {
    --bg-main: #f8faf9;
    --border-subtle: #e4e4e7;
    --border-strong: #18181b;
    --text-main: #09090b;
    --text-muted: #71717a;
    --brand-green: #143d29;
    --brand-green-header: #0d2b1d;
    --brand-green-mid: #1b4d35;
    --brand-accent: #eab308;
    --brand-accent-hover: #fde047;
    --danger-accent: #dc2626;
    --sidebar-width: 260px;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* EXTENDED MODULE & COMPONENT VARIABLES */
    --sidebar-bg: #143d29;
    --sidebar-header: #0d2b1d;
    --brand-gold: #fbbf24;
    --nav-hover: rgba(255, 255, 255, 0.08);
    --nav-active-bg: rgba(255, 255, 255, 0.12);
    --pa-dark: #191a19;
    --pa-primary: #1e5128;
    --pa-accent: #4e9f3d;
    --pa-light: #d8e9a8;
    --bs-primary: #1e5128 !important;
    --bs-primary-rgb: 30, 81, 40 !important;
    --surface: #ffffff;
    --adm-bg: var(--bg-main, #f8faf9);
    --adm-surface: #ffffff;
    --adm-border: var(--border-subtle, #e4e4e7);
    --adm-border-strong: var(--border-strong, #18181b);
    --adm-text-main: var(--text-main, #09090b);
    --adm-text-muted: var(--text-muted, #71717a);
    --adm-brand-green: var(--brand-green, #143d29);
    --adm-brand-green-header: var(--brand-green-header, #0d2b1d);
    --adm-brand-accent: var(--brand-accent, #eab308);
    --adm-brand-accent-hover: var(--brand-accent-hover, #fde047);
    --mon-bg: var(--bg-main, #f8faf9);
    --mon-surface: #ffffff;
    --mon-border: var(--border-subtle, #e4e4e7);
    --mon-border-strong: var(--border-strong, #18181b);
    --mon-text-main: var(--text-main, #09090b);
    --mon-text-muted: var(--text-muted, #71717a);
    --mon-brand-green: var(--brand-green, #143d29);
    --mon-brand-green-header: var(--brand-green-header, #0d2b1d);
    --mon-brand-green-mid: var(--brand-green-mid, #1b4d35);
    --mon-brand-accent: var(--brand-accent, #eab308);
    --mon-brand-accent-hover: var(--brand-accent-hover, #fde047);
    --rep-bg: var(--bg-main, #f8faf9);
    --rep-surface: #ffffff;
    --rep-border: var(--border-subtle, #e4e4e7);
    --rep-border-strong: var(--border-strong, #18181b);
    --rep-text-main: var(--text-main, #09090b);
    --rep-text-muted: var(--text-muted, #71717a);
    --rep-brand-green: var(--brand-green, #143d29);
    --rep-brand-green-header: var(--brand-green-header, #0d2b1d);
    --rep-brand-accent: var(--brand-accent, #eab308);
    --rep-brand-accent-hover: var(--brand-accent-hover, #fde047);
    --primary-dark: #0a2b1e;
    --primary: #1a472a;
    --primary-light: #2a5a3a;
    --secondary: #c6a43f;
    --secondary-light: #d4b85c;
    --white: #ffffff;
    --gray-light: #f8f9fa;
    --gray: #6c757d;
    --dark: #1a202c;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --primary-red: #b22222;
    --secondary-red: #8b0000;
    --bg-light: #f4f7fa;
    --brand-green-deep: #0a2417;
    --brand-accent-light: #fef8ec;
    --mat-header-sticky: #0a2417;
    --mat-header-group: #143d29;
    --mat-header-col: #194c34;
    --mat-header-col-hover: #226344;
    --mat-border: #e2e8f0;
    --mat-border-dark: #234d36;
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(255, 255, 255, 0.6);
    --primary-grad: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    --brand-primary: #046A38;
    --brand-dark: #024022;
    --brand-gold-soft: #FCF8E3;
    --surface-card: #FFFFFF;
    --bg-page: #F4F7F6;
    --text-dark: #1E293B;
    --border-card: #E2E8F0;
    --brand-green-dark: #072718;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --glass: rgba(255, 255, 255, 0.95);
}


/* ==========================================================================
   MODERN DESIGN SYSTEM - RAHMAT S (PTA BANDUNG)
   Warna Utama: Hijau Forest/Mahkamah Agung (#143d29) & Emas MA (#eab308)
   Styling Sudut: Flat & Sharp (Siku-Siku Tajam)
   ========================================================================== */

html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: var(--font-sans) !important;
    overflow-x: hidden;
    overflow-y: auto !important;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-wrapper {
    min-height: 100vh;
    background-color: var(--bg-main) !important;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: visible;
}

/* ==========================================================================
   FIX LOADER SCREEN OVERLAY
   ========================================================================== */

#loader-wrapper {
    position: fixed;
    inset: 0;
    background: rgba(20, 61, 41, 0.96) !important;
    z-index: 99999;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    will-change: opacity, visibility;
}

.loader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   SIDEBAR NAVIGASI (DEEP EMERALD FLAT & SHARP)
   ========================================================================== */

.bg-sidebar,
#sidebarMenu,
.sidebar-offcanvas {
    background: var(--sidebar-bg) !important;
    background-color: var(--sidebar-bg) !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

.bg-sidebar-header {
    background-color: var(--sidebar-header) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.sidebar-offcanvas,
.main-wrapper {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (min-width: 768px) {
    .sidebar-offcanvas {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--sidebar-width) !important;
        visibility: visible !important;
        transform: none !important;
    }

    .sidebar-offcanvas .sidebar-brand-header {
        display: flex !important;
    }

    .main-wrapper {
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
    }

    .sidebar-offcanvas.desktop-collapsed {
        transform: translateX(-100%) !important;
    }

    .main-wrapper.desktop-expanded {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    .sidebar-offcanvas {
        width: var(--sidebar-width) !important;
    }
}

/* Teks Kategori (MENU UTAMA / ADMINISTRASI SYSTEM) */

.sidebar-nav .nav-item > span.text-uppercase {
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: var(--font-sans) !important;
}

/* Link Menu Utama Flat & Sharp */

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.84) !important;
    border-radius: 0px !important;
    padding: 0.5rem 0.75rem;
    margin-bottom: 2px;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar-nav .nav-link i {
    color: rgba(255, 255, 255, 0.68) !important;
    opacity: 0.9 !important;
}

.sidebar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: none;
}

.sidebar-nav .nav-link:hover i {
    color: #a7f3d0 !important;
}

.sidebar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-left: 3px solid #34d399 !important;
    box-shadow: none !important;
}

.sidebar-nav .nav-link.active i {
    color: #34d399 !important;
    opacity: 1 !important;
}

header.navbar {
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   COMMAND HEADER & PANELS (SHARP/SIKU-SIKU)
   ========================================================================== */

.system-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-subtle);
    padding: 1.25rem 0;
    margin-bottom: 1.25rem;
}

.header-eyebrow {
    font-size: 0.725rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--brand-accent);
    margin-bottom: 0.25rem;
}

.header-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--brand-green);
    line-height: 1.1;
}

.panel-modern {
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 0 !important;
    padding: 1.25rem;
}

/* ==========================================================================
   FORM CONTROLS & HEADER BUTTONS (SHARP/SIKU-SIKU)
   ========================================================================== */

.label-modern {
    font-size: 0.675rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    display: block;
}

.form-control-custom {
    border: 1px solid var(--border-subtle);
    border-radius: 0 !important;
    padding: 0.4rem 0.75rem;
    font-size: 0.825rem;
    background-color: #ffffff;
    color: var(--text-main);
    transition: border-color 0.15s ease;
}

.form-control-custom:focus {
    border-color: var(--border-strong);
    outline: none;
}

.btn-action-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 0.775rem;
    font-weight: 600;
    border-radius: 0 !important;
    border: 1px solid var(--border-subtle);
    background-color: #ffffff;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}

.btn-action-custom:hover:not(:disabled) {
    border-color: var(--border-strong);
    background-color: var(--bg-main);
    color: var(--text-main);
}

.btn-action-success {
    background-color: var(--brand-green);
    color: #ffffff;
    border-color: var(--brand-green);
}

.btn-action-success:hover:not(:disabled) {
    background-color: var(--brand-green-header);
    color: #ffffff;
    border-color: var(--brand-green-header);
}

.badge-mono {
    font-family: var(--font-mono);
    font-size: 0.675rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 0 !important;
    display: inline-block;
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-main);
    text-transform: uppercase;
}

/* ==========================================================================
   RESET & STYLING TOMBOL AKSI TABEL (SUDUT SIKU-SIKU / TAJAM)
   ========================================================================== */

.action-btn-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

button.btn-action-square,
.btn-action-square {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 1px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    
    font-size: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button.btn-action-square:hover {
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

button.btn-action-square:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Varian Soft Pastel Buttons */

.btn-action-view {
    background-color: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

.btn-action-view:hover {
    background-color: #e0f2fe !important;
    border-color: #7dd3fc !important;
    color: #0369a1 !important;
}

.btn-action-edit {
    background-color: #fefce8 !important;
    color: #d97706 !important;
    border: 1px solid #fef08a !important;
}

.btn-action-edit:hover {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

.btn-action-delete {
    background-color: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}

.btn-action-delete:hover {
    background-color: #ffe4e6 !important;
    border-color: #fda4af !important;
    color: #be123c !important;
}

/* ==========================================================================
   MATRIX TABLE STYLES (SUDUT SIKU-SIKU / TAJAM)
   ========================================================================== */

.table-matrix-wrapper {
    position: relative;
    border-radius: 0 !important;
    border: 1px solid var(--border-subtle);
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
}

.table-custom {
    font-size: 0.8rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0 !important;
}

.table-custom th,
.table-custom td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}

.table-custom th:last-child,
.table-custom td:last-child {
    border-right: none;
}

.table-custom thead th {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.725rem;
    letter-spacing: 0.05em;
    border-radius: 0 !important;
}

/* ==========================================================================
   CUSTOM PAGINATION STYLING (SHARP/SIKU-SIKU)
   ========================================================================== */

.custom-pagination-container .pagination {
    margin-bottom: 0 !important;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
}

.custom-pagination-container .pagination .page-item .page-link {
    color: var(--text-main);
    background-color: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 0 !important;
    
    padding: 4px 10px;
    box-shadow: none;
}

.custom-pagination-container .pagination .page-item.active .page-link {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #ffffff;
    font-weight: 700;
}

.custom-pagination-container nav div:first-child {
    display: none !important;
}

/* ==========================================================================
   MODAL BOOTSTRAP 5 - TRANSISI VISUAL
   Posisi, ukuran, backdrop dan z-index mengikuti Bootstrap
   ========================================================================== */

.modal.fade .modal-dialog {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease-out;
    transform: scale(0.95) translateY(-20px);
    opacity: 0;
}

.modal.fade.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ==========================================================================
   PERBAIKAN TAMPILAN MODAL DETAIL TRACKING (SHARP CARDS)
   ========================================================================== */

.modal-header-brand {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 !important;
}

.modal-header-brand .modal-title {
    color: #ffffff !important;
    font-family: var(--font-sans) !important;
}

.modal-content {
    border-radius: 0 !important;
}

.resume-card {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    padding: 1.25rem !important;
}

.resume-item {
    margin-bottom: 0.85rem;
}

.resume-item:last-child {
    margin-bottom: 0;
}

.resume-label {
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 2px;
}

.resume-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.compliance-timeline-card {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-left: 4px solid var(--brand-green) !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 0.85rem;
    transition: all 0.2s ease;
}

.compliance-timeline-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    transform: translateX(2px);
}

.timeline-date {
    font-size: 0.725rem;
    font-weight: 800;
    color: var(--brand-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.timeline-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.timeline-desc {
    font-size: 0.775rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   INDIKATOR WARNA INPUT FORM (HIJAU TERISI vs MERAH KOSONG)
   ========================================================================== */

.form-control-custom.input-terisi,
select.form-control-custom.input-terisi,
textarea.form-control-custom.input-terisi {
    background-color: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
    font-weight: 600;
}

.form-control-custom.input-terisi:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

.form-control-custom.input-kosong,
select.form-control-custom.input-kosong,
textarea.form-control-custom.input-kosong {
    background-color: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #9f1239 !important;
}

.form-control-custom.input-kosong:focus {
    border-color: #f43f5e !important;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15) !important;
}

.form-control-custom.input-opsional {
    background-color: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-main) !important;
}

/* ==========================================================================
   OVERRIDE: PAKSA FONT INFORMATION & PAGINATION MENJADI SANS-SERIF MODERN
   ========================================================================== */

/* 1. Paksa Teks Keterangan Data Tabel (Menampilkan X sampai Y dari Z) */

.custom-pagination-container,
.custom-pagination-container *,
.dataTables_info,
.table-matrix-wrapper+div,
.table-matrix-wrapper~div,
div[class*="pagination"] {
    font-family: var(--font-sans) !important;
    font-size: 0.775rem !important;
    color: var(--text-muted) !important;
}

/* 2. Ganti angka tebal agar tidak menggunakan monospace */

.custom-pagination-container strong,
.custom-pagination-container b,
.dataTables_info strong {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

/* ==========================================================================
   STATS CARDS (CLICKABLE CARDS SHARP/SIKU-SIKU)
   ========================================================================== */

.clickable-card {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 0 !important;
    background: #ffffff !important;
}

.clickable-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Card Aktif Hijau Botol MA */

.card-active-total {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border-color: var(--brand-green) !important;
}

/* Card Aktif Merah / Total */

.card-active-belum {
    background: #991b1b !important;
    color: #ffffff !important;
    border-color: #991b1b !important;
}

.card-active-total *,
.card-active-belum * {
    color: #ffffff !important;
}

.card-active-total .text-muted,
.card-active-belum .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* WARNA TEMA UNIK CARD AKTIF */

.card-active-total {
    background: linear-gradient(135deg, #0a2b1e, #1a472a) !important;
    color: #ffffff !important;
    border-color: #0a2b1e !important;
}

.card-active-tahun {
    background: linear-gradient(135deg, #18181b, #3f3f46) !important;
    color: #ffffff !important;
    border-color: #18181b !important;
}

.card-active-pdf {
    background: linear-gradient(135deg, #78350f, #d97706) !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

.card-active-lengkap {
    background: linear-gradient(135deg, #0369a1, #0284c7) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* KONTRAS TEKS SAMAR SAAT AKTIF */

.card-active-total .text-muted,
.card-active-tahun .text-muted,
.card-active-pdf .text-muted,
.card-active-lengkap .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   JDIH / REPOSITORY HUKUM - KELAS KHUSUS
   ========================================================================== */

.jdih-card {
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-left: 5px solid #0a2b1e !important;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.jdih-card:hover {
    border-color: #18181b;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px);
}

.jdih-label {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #0a2b1e;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: block;
}

.sticky-sidebar {
    position: sticky;
    top: 85px;
    z-index: 100 !important;
}

.file-upload-box {
    padding: 1.25rem;
    border: 2px dashed #e4e4e7;
    border-radius: 8px;
    background-color: #f8faf9;
    text-align: center;
}

/* LAYOUT SUPPORT - ATURAN TAMBAHAN */

@media (min-width: 768px) {
    .sidebar-offcanvas {
        height: 100vh;
        display: flex !important;
        flex-direction: column !important;
        z-index: 1040;
    }
}

.sidebar-brand-header {
    flex-shrink: 0;
}

.sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
}

.sidebar-nav .nav-link:hover {
    color: #ffffff !important;
}

.sidebar-nav .nav-link.active {
    background-color: var(--nav-active-bg) !important;
    font-weight: 600;
}

.sidebar-nav .nav-link.active i {
    color: #34d399 !important;
}

.sidebar-nav .nav-link.nav-disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: auto;
    color: #94a3b8 !important;
}

.sidebar-nav .nav-link.nav-disabled:hover {
    background-color: transparent !important;
    transform: none !important;
    color: #94a3b8 !important;
}

header.navbar {
    z-index: 1030;
}

#loader-wrapper {
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   KOMPONEN MODUL MONITORING & AUDIT TERPUSAT (RAHMAT S DESIGN SYSTEM)
   Tersentralisasi untuk seluruh modul SIPP se-Jawa Barat
   ========================================================================== */

/* Layout Wrapper & Surface Token */

.monitoring-wrapper,
.relaas-wrapper {
    --surface: #ffffff;
    --border-subtle: #e2e8f0;
    --border-strong: #0f172a;
    width: 100%;
}

/* 1. ASYMMETRICAL COMMAND HEADER */

.system-header .header-eyebrow {
    font-size: 0.725rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--brand-accent, #c29b38);
    margin-bottom: 0.25rem;
}

.system-header .header-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-green, #143d29);
    line-height: 1.2;
}

/* 2. CARD HOVER & INDUSTRIAL PANELS */

.stats-summary-box {
    background: #ffffff;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    height: 100%;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.stats-summary-box:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
}

.stats-value-mono {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0.25rem 0;
    color: var(--text-main, #09090b);
}

.stats-label-mono {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #71717a);
}

.form-label-mono {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #71717a);
    margin-bottom: 0.35rem;
    display: block;
}

/* 3. BUTTON ANIMATION: LIFT, GLOW & ACTIVE PRESS */

.btn-action-custom:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong, #18181b);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    color: var(--text-main, #09090b);
}

.btn-action-custom:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

.btn-action-primary {
    background-color: var(--brand-green, #143d29) !important;
    color: #ffffff !important;
    border-color: var(--brand-green, #143d29) !important;
    box-shadow: 0 2px 4px rgba(20, 61, 41, 0.2);
}

.btn-action-primary:hover {
    background-color: var(--brand-green-header, #0d2b1d) !important;
    color: #ffffff !important;
    border-color: var(--brand-green-header, #0d2b1d) !important;
    box-shadow: 0 6px 14px rgba(20, 61, 41, 0.3);
}

/* 4. BADGES & MATRIX TABLES */

.badge-satker {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: #e0f2fe;
    color: #0369a1;
}

.table-matrix {
    font-size: 0.8rem;
    width: 100%;
    border-collapse: collapse;
}

.table-matrix thead th {
    background: #f8fafc;
    color: var(--text-muted, #71717a);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.675rem;
    letter-spacing: 0.04em;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
    border-right: 1px solid var(--border-subtle, #e2e8f0);
    white-space: nowrap;
}

.table-matrix tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
    border-right: 1px solid var(--border-subtle, #e2e8f0);
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

.table-matrix tbody tr:hover td {
    background-color: rgba(241, 245, 249, 0.85);
}

/* 5. SKELETON SHIMMER LOADING */

.shimmer-box {
    position: relative;
    overflow: hidden;
    background-color: #e2e8f0;
    border-radius: 6px;
}

.shimmer-box::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   FIX MODAL CORNER OVERFLOW & WHITE ARTIFACT
   Memastikan sudut atas modal bersih dan membulat tanpa bocor putih
   ========================================================================== */

.modal-content {
    overflow: hidden !important; 
    border-radius: 10px !important;
}

.modal-content > .modal-header {
    border-top-left-radius: 9px !important;
    border-top-right-radius: 9px !important;
    border-bottom: none !important;
}

/* ==========================================================================
   MODAL SHARP CORNERS (SUDUT KOTAK PRESISI)
   Menghilangkan seluruh rounded agar sudut modal siku-siku tajam tanpa celah
   ========================================================================== */

.modal-dialog .modal-content {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.modal-dialog .modal-header,
.modal-dialog .modal-body,
.modal-dialog .modal-footer {
    border-radius: 0 !important;
}

/* ==========================================================================
   TOMBOL BADGE ANGKA DRILLDOWN (IDENTIK DENGAN TOMBOL EKSPOR)
   ========================================================================== */

.btn-action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #dc2626 !important;
    background-color: #ffffff;
    border: 1px solid #fca5a5;
    border-radius: 0px !important; 
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1.2;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-action-badge:hover {
    background-color: #fef2f2;
    border-color: #dc2626;
    color: #b91c1c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.12);
}

.btn-action-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* FORCE RESET TOMBOL DRILLDOWN ANGKA AGAR IDENTIK DENGAN BTN-ACTION-CUSTOM */

button.btn-table-drilldown,
.btn-table-drilldown {
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 0px !important;
    padding: 3px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

button.btn-table-drilldown:hover,
.btn-table-drilldown:hover {
    background-color: #fef2f2 !important;
    border-color: #dc2626 !important;
    color: #b91c1c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.12) !important;
}

button.btn-table-drilldown:active,
.btn-table-drilldown:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   STANDARISASI CIRCULAR SPINNER (RAHMAT S DESIGN SYSTEM)
   ========================================================================== */

.spinner-border-sm {
    width: 0.95rem !important;
    height: 0.95rem !important;
    border-width: 0.15em !important;
}

.fa-circle-notch,
.spinner-border {
    animation-duration: 0.75s !important;
}

/* Tombol saat status loading / spinner aktif */

button:disabled .fa-circle-notch,
button[disabled] .fa-circle-notch {
    opacity: 0.9;
}

/* ==========================================================================
   SHARP CARDS & FLAT PANELS (SUDUT KOTAK PRESISI GLOBAL)
   Menghilangkan seluruh rounded pada komponen kartu dan panel kontainer
   ========================================================================== */

.card,
.card-header,
.card-body,
.card-footer,
.panel-modern,
.stats-summary-box,
.stats-box,
.stats-card,
.kpi-card,
.info-box,
.shimmer-box,
.table-responsive {
    border-radius: 0px !important;
}

/* Memastikan elemen turunan pertama dan terakhir kartu tetap siku-siku */

.card > :first-child,
.card-header:first-child,
.panel-modern > :first-child {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.card > :last-child,
.card-footer:last-child,
.panel-modern > :last-child {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

/* STANDARISASI UNIVERSAL RAHMAT S */

.card, .panel-modern, .stats-summary-box, .modal-content, .btn-action-custom, .btn-action-badge, button.btn-table-drilldown {
    border-radius: 0px !important;
}

button.btn-table-drilldown {
    appearance: none !important;
    background-color: #ffffff !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    padding: 3px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

button.btn-table-drilldown:hover {
    background-color: #fef2f2 !important;
    border-color: #dc2626 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.12) !important;
}

/* ==========================================================================
   STANDARISASI KARTU METRIK KPI (IDENTIK GAMBAR 2)
   ========================================================================== */

.stats-summary-box,
.card-kpi-modern {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0px !important;
    padding: 1rem 1.25rem !important;
    height: 100% !important;
    position: relative !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stats-summary-box:hover,
.card-kpi-modern:hover {
    transform: translateY(-3px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 16px -4px rgba(15, 23, 42, 0.08) !important;
}

.stats-summary-box.kpi-dark,
.card-kpi-dark {
    border-left: 4px solid #143d29 !important;
}

.stats-summary-box.kpi-danger,
.card-kpi-danger {
    border-left: 4px solid #dc2626 !important;
}

.stats-summary-box.kpi-success,
.card-kpi-success {
    border-left: 4px solid #10b981 !important;
}

.stats-summary-box.kpi-warning,
.card-kpi-warning {
    border-left: 4px solid #eab308 !important;
}

.stats-label-mono {
    font-size: 0.725rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    margin-bottom: 0.35rem !important;
    display: block !important;
}

.stats-value-mono {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

/* ==========================================================================
   PENYERAGAMAN SUDUT TAJAM UNTUK BADGE, TAG & KOTAK AMAR PUTUSAN
   Memastikan semua elemen dalam jadual bersudut tepat (Sharp Corners)
   ========================================================================== */

.badge,
.badge-mono,
.badge-satker,
.alert,
.quote-box,
.amar-box,
table tbody td span,
table tbody td div[class*="rounded"],
table tbody td div[style*="border-radius"],
.table-matrix td .d-inline-flex,
.table-matrix td .border {
    border-radius: 0px !important;
}

/* ==========================================================================
   SWEETALERT2 SHARP & FLAT THEME (RAHMAT S DESIGN SYSTEM)
   ========================================================================== */

.swal2-popup {
    border-radius: 0px !important;
    border: 1px solid #143d29 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

.swal2-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: #143d29 !important;
    letter-spacing: -0.02em !important;
}

.swal2-html-container {
    font-size: 0.875rem !important;
    color: #475569 !important;
}

.swal2-confirm {
    background-color: #143d29 !important;
    border-radius: 0px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    box-shadow: none !important;
}

.swal2-cancel {
    background-color: #64748b !important;
    border-radius: 0px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    box-shadow: none !important;
}

.swal2-icon {
    border-radius: 0px !important;
}

/* ==========================================================================
   FIX SWEETALERT2 ICON & BUTTON TEXT (RAHMAT S DESIGN SYSTEM)
   Memperbaiki ikon centang bulat sempurna dan teks tombol putih kontras
   ========================================================================== */

/* 1. Kembalikan ikon status SweetAlert2 ke lingkaran sempurna (hilangkan kotak hijau) */

.swal2-icon {
    border-radius: 50% !important;
}

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

.swal2-icon.swal2-success [class^='swal2-success-circular-line'] {
    border-radius: 50% !important;
    background: transparent !important;
}

.swal2-icon.swal2-success .swal2-success-fix {
    background: transparent !important;
}

/* 2. Pastikan teks tombol konfirmasi putih terang dan kontras */

.swal2-styled.swal2-confirm,
.swal2-confirm,
.swal2-actions button.btn-action-primary {
    background-color: var(--brand-green, #143d29) !important;
    color: #ffffff !important;
    border: 1px solid var(--brand-green, #143d29) !important;
    border-radius: 0px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 8px 24px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.swal2-styled.swal2-confirm:hover,
.swal2-confirm:hover,
.swal2-actions button.btn-action-primary:hover {
    background-color: var(--brand-green-header, #0d2b1d) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(20, 61, 41, 0.25) !important;
}

/* TOMBOL DANGER SWEETALERT2 SHARP */

.swal2-actions button.btn-action-danger,
.swal2-confirm.swal2-confirm-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
}

.swal2-actions button.btn-action-danger:hover,
.swal2-confirm.swal2-confirm-danger:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25) !important;
}

/* ==========================================================================
   POLISH SWEETALERT2 BUTTONS & DIALOG ACCENT
   ========================================================================== */

/* Pastikan teks tombol Batal berwarna putih bersih dan kontras */

.swal2-actions button.swal2-cancel,
.swal2-cancel {
    background-color: #64748b !important;
    color: #ffffff !important;
    border: 1px solid #64748b !important;
    border-radius: 0px !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

.swal2-actions button.swal2-cancel:hover,
.swal2-cancel:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

/* Berikan garis aksen atas hijau MA pada popup konfirmasi */

.swal2-popup.swal2-sharp-popup,
.swal2-popup {
    border-top: 5px solid var(--brand-green, #143d29) !important;
}

/* ==========================================================================
   SHARP INDUSTRIAL NAV TABS (SUDUT KOTAK PRESISI)
   ========================================================================== */

.nav-tabs,
.nav-tabs .nav-item,
.nav-tabs .nav-link,
.nav-tabs-industrial .nav-link,
.nav-tabs-industrial .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.badge-mono {
    border-radius: 0px !important;
}

.nav-tabs-industrial .nav-link.active {
    border-top: 3px solid var(--brand-green, #143d29) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   ACTIVITY LOG INDUSTRIAL STYLING (SHARP & CLEAN)
   ========================================================================== */

.user-list-item-industrial {
    padding: 0.6rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.user-list-item-industrial:last-child {
    border-bottom: none;
}

.badge-rank-sharp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Inter', monospace;
    border-radius: 0px !important;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.badge-rank-sharp.rank-1 {
    background: #143d29 !important;
    color: #ffffff !important;
    border-color: #143d29 !important;
}

.badge-rank-sharp.rank-2 {
    background: #eab308 !important;
    color: #ffffff !important;
    border-color: #ca8a04 !important;
}

.badge-rank-sharp.rank-3 {
    background: #64748b !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

.progress-bar-industrial {
    height: 4px;
    background: #e2e8f0;
    width: 100%;
    border-radius: 0px !important;
    overflow: hidden;
}

.progress-bar-industrial .progress-fill {
    height: 100%;
    background: #143d29;
    border-radius: 0px !important;
}

/* ==========================================================================
   SHARP SKELETON PLACEHOLDER (0PX RADIUS)
   ========================================================================== */

.skeleton-box,
.placeholder,
.placeholder-glow .placeholder,
.placeholder-wave .placeholder {
    border-radius: 0px !important;
}

/* ========================================================
   THEME PALETTE OVERRIDE: COLORHUNT #191A19, #1E5128, #4E9F3D, #D8E9A8
   ======================================================== */

/* Sidebar & Brand Header */

.bg-sidebar {
    background-color: var(--sidebar-bg) !important;
}

.bg-sidebar-header {
    background-color: var(--sidebar-header) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#sidebarMenu .nav-link.active {
    background-color: var(--nav-active-bg) !important;
    border-left: 3px solid #34d399 !important;
}

#sidebarMenu .nav-link.active i {
    color: #34d399 !important;
}

/* Table Headers */

.table thead th {
    background-color: #1e5128 !important; border-color: #16401f !important; color: #ffffff !important;
}

/* Buttons & Badges */

.badge-pa-subtle {
    background-color: rgba(216, 233, 168, 0.45) !important; color: #1e5128 !important;
}

/* ========================================================
   FOKUS SIDEBAR PALETTE COLORHUNT
   ======================================================== */

/* 1. Latar Belakang Seluruh Sidebar */

#sidebarMenu.bg-sidebar,
.sidebar-offcanvas.bg-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* 2. Header / Brand Logo Sidebar */

.sidebar-brand-header.bg-sidebar-header {
    background-color: var(--sidebar-header) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* 3. Link Menu Normal & Icon */

#sidebarMenu .nav-link {
    color: rgba(255, 255, 255, 0.84) !important;
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: 0px !important;
}

#sidebarMenu .nav-link i {
    color: rgba(255, 255, 255, 0.68) !important;
}

/* 4. Link Menu Hover */

#sidebarMenu .nav-link:hover {
    background-color: var(--nav-hover) !important;
    color: #ffffff !important;
}

#sidebarMenu .nav-link:hover i {
    color: #a7f3d0 !important;
}

/* 5. Link Menu Aktif (Halaman yang sedang dibuka) */

#sidebarMenu .nav-link.active {
    background-color: var(--nav-active-bg) !important;
    color: #ffffff !important;
    border-left: 3px solid #34d399 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

#sidebarMenu .nav-link.active i {
    color: #34d399 !important;
    opacity: 1 !important;
}

/* 6. Judul Bagian Menu (Heading Kecil: MENU UTAMA, ADMINISTRASI) */

#sidebarMenu .nav-item span.text-uppercase {
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 0.08em;
    font-family: var(--font-sans) !important;
}

/* 7. Scrollbar Halus Tema Emerald */

#sidebarMenu .offcanvas-body::-webkit-scrollbar-thumb,
#sidebarMenu .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
}

#sidebarMenu .offcanvas-body::-webkit-scrollbar-thumb:hover,
#sidebarMenu .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

/* KOMPONEN PENCARIAN PINTAR LINTAS SATKER & TIMELINE DETAIL */

/* Command Header Elements */

/* Form Controls & Badges */

.form-label-clean {
    font-size: 0.725rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #71717a);
    margin-bottom: 0.35rem;
    display: block;
}

.badge-clean {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 2px;
    display: inline-block;
    border: 1px solid var(--border-subtle, #e4e4e7);
    background: var(--bg-main, #f8faf9);
    color: var(--text-main, #09090b);
    white-space: nowrap;
}

/* Matrix Table Styling */

.table-matrix {
    font-size: 0.825rem;
    width: 100%;
    border-collapse: collapse;
}

.table-matrix thead th {
    background: #f8faf9;
    color: var(--text-muted, #71717a);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.675rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle, #e4e4e7);
    border-right: 1px solid var(--border-subtle, #e4e4e7);
    white-space: nowrap;
}

.table-matrix tbody td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-subtle, #e4e4e7);
    border-right: 1px solid var(--border-subtle, #e4e4e7);
    vertical-align: middle;
}

.table-matrix tbody tr:hover td {
    background-color: #f1f5f9;
}

/* Modal Pro & Party Cards */

.modal-pro-header {
    background: linear-gradient(135deg, #0d2b1d 0%, #143d29 100%);
    border-bottom: 2px solid var(--brand-accent, #eab308);
    padding: 1.25rem 1.5rem;
    color: #ffffff;
}

.party-card {
    border: 1px solid var(--border-subtle, #e4e4e7);
    border-radius: 0;
    padding: 0.85rem 1rem;
    background: #ffffff;
    transition: border-color 0.2s;
}

.party-card.pihak1 {
    border-left: 3px solid #2563eb !important;
}

.party-card.pihak2 {
    border-left: 3px solid #dc2626 !important;
}

/* Continuous Timeline Pro */

.timeline-pro {
    position: relative;
    padding-left: 14px;
}

.timeline-pro-item {
    position: relative;
    padding-left: 28px;
    padding-bottom: 1.25rem;
}

.timeline-pro-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #cbd5e1;
    z-index: 1;
}

.timeline-pro-item:last-child {
    padding-bottom: 0;
}

.timeline-pro-item:last-child::before {
    height: 14px;
    bottom: auto;
}

.timeline-pro-marker {
    position: absolute;
    left: -13px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 2;
    box-shadow: 0 0 0 4px #ffffff;
}

.timeline-pro-content {
    background: #ffffff;
    padding: 0.85rem 1.1rem;
    border-radius: 0;
    border: 1px solid var(--border-subtle, #e4e4e7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.timeline-pro-item.active .timeline-pro-content {
    border-color: #a7f3d0;
    background: #f0fdf4;
}

/* PENYERAGAMAN TIPOGRAFI TIPIS (LIGHT 300) - RAHMAT S */

body {
    font-weight: 300 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Konten Teks, Input Form, dan Tabel Dibuat Tipis */

p, 
span, 
small,
label,
.form-control,
.form-control-custom,
.form-select,
.table tbody,
.table-matrix tbody td,
.table-rk tbody td,
.timeline-pro,
.timeline-pro-content,
.party-card,
.panel-modern,
.modal-body {
    font-weight: 300 !important;
}

/* Label & Tombol Aksi dibuat proporsional (Light/Normal) */

.form-label,
.form-label-clean,
.btn-action-custom,
.badge-clean,
.badge-mono {
    font-weight: 400 !important;
}

/* Header Tabel */

.table thead th,
.table-matrix thead th,
.table-rk thead th {
    font-weight: 500 !important;
    letter-spacing: 0.04em;
}

/* Judul & Sub-judul tidak terlalu tebal */

.header-title,
h1.header-title,
.modal-title {
    font-weight: 500 !important;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   MODUL ARSIP AKTIF & UTILITY DESIGN SYSTEM (PTA BANDUNG)
   ========================================================================== */

.badge-pta {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
}

.stat-card-total.active {
    background: linear-gradient(135deg, #0a2b1e, #1a472a) !important;
    color: #ffffff !important;
    border-color: #0a2b1e !important;
}

.stat-card-year.active {
    background: linear-gradient(135deg, #18181b, #3f3f46) !important;
    color: #ffffff !important;
    border-color: #18181b !important;
}

.stat-card-pdf.active {
    background: linear-gradient(135deg, #78350f, #d97706) !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

.stat-card-complete.active {
    background: linear-gradient(135deg, #0369a1, #0284c7) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

.btn-action-pdf {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    font-size: 0.75rem !important;
}

.btn-action-pdf:hover:not(:disabled) {
    background-color: #fee2e2 !important;
    border-color: #f87171 !important;
    color: #7f1d1d !important;
}

.btn-action-rar {
    background-color: #f0f9ff !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
    font-size: 0.75rem !important;
}

.btn-action-rar:hover:not(:disabled) {
    background-color: #e0f2fe !important;
    border-color: #38bdf8 !important;
    color: #075985 !important;
}

.btn-action-inbox {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    overflow: visible !important;
    position: relative !important;
}

.btn-action-inbox:hover:not(:disabled) {
    background-color: #fecaca !important;
    border-color: #f87171 !important;
    color: #7f1d1d !important;
}

.badge-counter-pill {
    position: absolute !important;
    top: -8px !important;
    right: -10px !important;
    transform: none !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: var(--font-mono, monospace) !important;
    padding: 2px 7px !important;
    border-radius: 9999px !important;
    background-color: var(--danger-accent, #dc2626) !important;
    color: #ffffff !important;
    border: 1.5px solid #ffffff !important;
    z-index: 10 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
    pointer-events: none !important;
}

.table-matrix {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 0.8rem !important;
    font-weight: 300 !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0 !important;
}

.table-matrix th {
    background-color: #f4f6f5 !important;
    color: var(--text-muted, #52525b) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--border-subtle, #e4e4e7) !important;
    border-right: 1px solid var(--border-subtle, #e4e4e7) !important;
}

.table-matrix th:last-child {
    border-right: none !important;
}

.table-matrix td {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--border-subtle, #e4e4e7) !important;
    border-right: 1px solid var(--border-subtle, #e4e4e7) !important;
    font-size: 0.8rem !important;
    font-weight: 300 !important;
    vertical-align: middle !important;
}

.table-matrix td:last-child {
    border-right: none !important;
}

.table-matrix tbody tr:hover {
    background-color: #f8faf9 !important;
}

.modal-header-ma {
    background-color: var(--brand-green, #143d29) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--brand-accent, #eab308) !important;
}

/* ==========================================================================
   HIERARKI TIPOGRAFI SEIMBANG RAHMAT-S (GOOGLE FONT INTER)
   ========================================================================== */

body,
.table-matrix,
.table-matrix th,
.table-matrix td,
.form-control-custom,
.clickable-card,
.modal-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* 1. KARTU STATISTIK: Angka Tegas & Terbaca Jelas */

.clickable-card h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.85rem !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.clickable-card p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
}

/* 2. HEADER TABEL: Ringkas & Berkarakter */

.table-matrix th {
    background-color: #f4f6f5 !important;
    color: var(--text-muted, #52525b) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border-subtle, #e4e4e7) !important;
    border-right: 1px solid var(--border-subtle, #e4e4e7) !important;
}

/* 3. ISI TABEL: Kontras Natural (Entitas Utama vs Data Pendukung) */

.table-matrix td {
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--border-subtle, #e4e4e7) !important;
    border-right: 1px solid var(--border-subtle, #e4e4e7) !important;
    font-size: 0.825rem !important;
    font-weight: 400 !important;
    vertical-align: middle !important;
    color: #27272a;
}

/* Judul Nomor Perkara Banding: Menonjol sebagai jangkar visual */

.table-matrix td .perkara-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #09090b !important;
    letter-spacing: -0.01em;
}

/* Nomor Urut & Tanggal Putusan */

.table-matrix td.cell-number,
.table-matrix td.cell-date {
    font-weight: 400 !important;
}

/* 4. TABULAR NUMS: OpenType Inter (Bukan Monospace Kaku) */

.tabular-nums,
.table-matrix .tabular-nums {
    font-family: 'Inter', sans-serif !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "cv05" 1 !important;
    letter-spacing: -0.01em;
}

/* 5. BADGE IDENTITAS & LOKASI FISIK: Rapi & Nyaman Dibaca */

/* ==========================================================================
   ALIGNMENT GRID PRESISI SYSTEM HEADER & CONTAINER RAHMAT-S
   ========================================================================== */

.system-header .header-title {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-green, #143d29);
    line-height: 1.2;
}

/* ==========================================================================
   KARTU PANEL HEADER SISTEM (SIMETRIS PRESISI GRID)
   ========================================================================== */

.system-header-panel {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle, #e4e4e7) !important;
    border-radius: 0px !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.system-header-panel .header-title {
    font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--brand-green, #143d29) !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   MODEL HEADER RESMI INSTANSI DENGAN META BADGES (RAHMAT-S PTA BANDUNG)
   ========================================================================== */

.system-header-panel {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle, #e4e4e7) !important;
    border-radius: 0px !important;
    padding: 1.35rem 1.6rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* Badge Hijau Eyebrow Atas */

.badge-header-instansi {
    background-color: #ecfdf5 !important;
    color: #14532d !important;
    border: 1px solid #a7f3d0 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 0px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Judul Hijau Botol MA */

.system-header-panel .header-title {
    font-size: clamp(1.4rem, 2.1vw, 1.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--brand-green, #143d29) !important;
    line-height: 1.2 !important;
    margin-top: 0.5rem !important;
}

/* Kotak Meta Badge Bawah */

.header-meta-badge {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle, #e4e4e7) !important;
    border-radius: 0px !important;
    padding: 5px 12px !important;
    font-size: 0.775rem !important;
    color: #27272a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.header-meta-badge i {
    color: #d97706 !important; 
    font-size: 0.85rem !important;
}

/* ==========================================================================
   MODUL EVALUASI KINERJA TRIWULAN SATKER & STICKY MATRIX
   ========================================================================== */

.rekap-kinerja-wrapper,
.rekap-kinerja-wrapper *:not([class*="fa-"]):not(.fas):not(.far):not(.fal):not(.fad):not(.fab) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.rekap-kinerja-wrapper {
    background-color: #f8faf9;
    color: #09090b;
    min-height: 100vh;
    width: 100%;
}

.rekap-kinerja-wrapper .panel-modern {
    width: 100% !important;
    border-radius: 0 !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}


.form-label-custom {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #71717a;
    margin-bottom: 0.4rem;
    display: block;
}

.table-matrix thead tr.sub-header th {
    top: 29px;
    font-size: 0.6rem;
    background: #f8fafc;
    color: #64748b;
}

.table-matrix .sticky-col-satker {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: #ffffff;
    font-weight: 700;
    text-align: left !important;
    min-width: 220px;
    border-right: 2px solid #cbd5e1 !important;
}

.table-matrix thead th.sticky-col-satker {
    z-index: 15;
    background-color: #f1f5f9;
}

.table-matrix tbody tr:hover .sticky-col-satker {
    background-color: #f8fafc;
}

.cell-gap-alert {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    font-weight: 700;
}

.cell-perfect {
    color: #16a34a;
    font-weight: 600;
}

/* ==========================================================================
   AUDIT FIX: GENERAL UTILITIES, SHIMS & MISSING ACTION BUTTONS
   Added as part of full CSS audit cleanup.
   ========================================================================== */

/* Action buttons */

.btn-action-excel {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
}

.btn-action-excel:hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}

.btn-action-warning {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border: 1px solid #b45309 !important;
}

.btn-action-warning:hover {
    background-color: #b45309 !important;
    color: #ffffff !important;
}

.btn-action-info {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #0369a1 !important;
}

.btn-action-info:hover {
    background-color: #0369a1 !important;
    color: #ffffff !important;
}

.btn-csv {
    background-color: #0d9488 !important;
    color: #ffffff !important;
    border: 1px solid #0f766e !important;
}

.btn-csv:hover {
    background-color: #0f766e !important;
    color: #ffffff !important;
}

.btn-pdf {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
}

.btn-pdf:hover {
    background-color: #b91c1c !important;
    color: #ffffff !important;
}

/* Interactive tables & headers */

.th-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.15s ease;
}

.th-sortable:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-interactive-mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.65rem;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s ease;
}

.link-interactive-mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fade-in {
    animation: fadeInAnim 0.3s ease-in-out;
}

@keyframes fadeInAnim {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.blur-upload-loading {
    filter: blur(2px);
    pointer-events: none;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.opacity-20 {
    opacity: 0.2 !important;
}

.btn-drilldown-number {
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    text-decoration: underline;
    cursor: pointer;
    background: transparent;
    border: none;
}

.card-stat-module {
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    padding: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-stat-module:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.table-monitoring {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.825rem;
}

.table-monitoring th {
    background-color: #f1f5f9;
    color: #334155;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.725rem;
    letter-spacing: 0.04em;
    padding: 0.75rem 0.85rem;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
}

.table-monitoring td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-monitoring tbody tr:hover {
    background-color: #f8fafc;
}

.stats-card-industrial {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 1rem 1.25rem;
    border-radius: 0;
    position: relative;
}

.ip-code-mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: #f1f5f9;
    color: #0f172a;
    padding: 0.15rem 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 0;
}

.user-ranking-container {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 1rem;
}

.switch-matrix {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.score-cell {
    font-family: var(--font-mono);
    font-weight: 700;
    text-align: center;
}

.btn-toggle-status {
    border: none;
    background: transparent;
    cursor: pointer;
}

.user-row {
    transition: background-color 0.15s ease;
}

/* Framework compatibility shims (Tailwind & Bootstrap 4) */

.font-mono {
    font-family: var(--font-mono) !important;
}

.font-sans {
    font-family: var(--font-sans) !important;
}

.font-sans-serif {
    font-family: var(--font-sans) !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.font-weight-semibold {
    font-weight: 600 !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.fw-extrabold {
    font-weight: 800 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.capitalize {
    text-transform: capitalize !important;
}

.tracking-tight {
    letter-spacing: -0.025em !important;
}

.tracking-wider {
    letter-spacing: 0.05em !important;
}

.tracking-widest {
    letter-spacing: 0.1em !important;
}

/* Fractional spacing & layout helpers */

.p-2\.5 {
    padding: 0.625rem !important;
}

.p-3\.5 {
    padding: 0.875rem !important;
}

.py-0\.5 {
    padding-top: 0.125rem !important; padding-bottom: 0.125rem !important;
}

.py-1\.5 {
    padding-top: 0.375rem !important; padding-bottom: 0.375rem !important;
}

.py-2\.5 {
    padding-top: 0.625rem !important; padding-bottom: 0.625rem !important;
}

.py-3\.5 {
    padding-top: 0.875rem !important; padding-bottom: 0.875rem !important;
}

.px-1\.5 {
    padding-left: 0.375rem !important; padding-right: 0.375rem !important;
}

.px-2\.5 {
    padding-left: 0.625rem !important; padding-right: 0.625rem !important;
}

.pl-3\.5 {
    padding-left: 0.875rem !important;
}

.pr-3\.5 {
    padding-right: 0.875rem !important;
}

.pb-1\.5 {
    padding-bottom: 0.375rem !important;
}

.mb-0\.5 {
    margin-bottom: 0.125rem !important;
}

.mt-0\.5 {
    margin-top: 0.125rem !important;
}

.me-1\.5 {
    margin-right: 0.375rem !important;
}

.ms-1\.5 {
    margin-left: 0.375rem !important;
}

.gap-1\.5 {
    gap: 0.375rem !important;
}

.gap-2\.5 {
    gap: 0.625rem !important;
}

.border-zinc-200 {
    border-color: #e4e4e7 !important;
}

.border-start-md {
    border-left: 1px solid var(--border-subtle);
}

@media (min-width: 768px) {
    .border-start-md { border-left: 1px solid var(--border-subtle) !important; }
    .border-end-md { border-right: 1px solid var(--border-subtle) !important; }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/components/layouts/app.blade.php
   SECTION: LAYOUT CORE & PROGRESS BAR
   ========================================================================== */

/* Top Navigation Progress Bar */

#global-livewire-progress {
    position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: linear-gradient(90deg, #f59e0b, #10b981);
            z-index: 99999;
            transition: width 0.25s ease-out, opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
}

#global-livewire-progress.is-loading {
    opacity: 1;
}

/* Sidebar Desktop Fix & Smooth Scroll */

@media (min-width: 768px) {
    #sidebarMenu.sidebar-offcanvas {
                position: fixed !important;
                top: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                height: 100vh !important;
                max-height: 100vh !important;
                display: flex !important;
                flex-direction: column !important;
                z-index: 1030 !important;
                transition: transform 0.2s ease, width 0.2s ease;
            }
            #sidebarMenu .offcanvas-body,
            #sidebarMenu .sidebar-nav {
                flex: 1 1 auto !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                height: calc(100vh - 70px) !important;
            }
}

#sidebarMenu .offcanvas-body::-webkit-scrollbar,
        #sidebarMenu .sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

#sidebarMenu .offcanvas-body::-webkit-scrollbar-thumb,
        #sidebarMenu .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
}

#sidebarMenu .offcanvas-body::-webkit-scrollbar-thumb:hover,
        #sidebarMenu .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/welcome.blade.php
   SECTION: PORTAL UTAMA / WELCOME
   ========================================================================== */

/* ========== MODERN SYSTEM CSS VARIABLES ========== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* ========== ASYMMETRICAL HEADER LAYOUT ========== */

.portal-header {
    border-bottom: 1px solid var(--border-subtle);
        background: var(--surface);
        padding: 3rem 0;
}

.header-grid {
    display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
}

@media (min-width: 992px) {
    .header-grid {
            grid-template-columns: 1.2fr 0.8fr;
            align-items: flex-end;
        }
}

/* Typography Hierarchy Scale */

.portal-eyebrow {
    font-size: 0.75rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--brand-accent);
        margin-bottom: 0.75rem;
}

.portal-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--brand-green);
        margin-bottom: 1rem;
}

.portal-subtitle {
    font-size: 0.95rem;
        color: var(--text-muted);
        line-height: 1.5;
        max-width: 520px;
        margin: 0;
}

/* User Meta Box (Right Column) */

.user-meta-panel {
    border: 1px solid var(--border-subtle);
        background: var(--bg-main);
        padding: 1.25rem;
        border-radius: 8px;
}

/* Modern Minimalist Badges */

.role-badge-modern {
    display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
}

.role-super {
    background: #fee2e2;
        color: #991b1b;
}

.role-pimpinan {
    background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
}

.role-satker {
    background: #dbeafe;
        color: #1e40af;
}

.role-ptsp {
    background: #e0e7ff;
        color: #3730a3;
}

.role-custom {
    background: #ecfdf5;
        color: #065f46;
        border: 1px solid #a7f3d0;
}

.role-tamu {
    background: #f4f4f5;
        color: #3f3f46;
}

/* ========== CUSTOM SEARCH BAR ========== */

.search-container {
    margin: 2.5rem 0;
}

.search-box-modern {
    position: relative;
        display: flex;
        align-items: center;
}

.search-input-modern {
    width: 100%;
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        padding: 1rem 1rem 1rem 2.75rem;
        font-size: 0.95rem;
        color: var(--text-main);
        transition: border-color 0.2s ease;
}

.search-input-modern:focus {
    outline: none;
        border-color: var(--brand-green);
}

.search-icon-left {
    position: absolute;
        left: 1rem;
        color: var(--text-muted);
        pointer-events: none;
}

/* ========== ASYMMETRICAL MENU GRID LAYOUT ========== */

.asymmetric-grid {
    display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.25rem;
}

.menu-item-large {
    grid-column: span 12;
}

.menu-item-medium {
    grid-column: span 12;
}

.menu-item-small {
    grid-column: span 12;
}

@media (min-width: 768px) {
    .menu-item-large {
            grid-column: span 7;
        }
        .menu-item-medium {
            grid-column: span 5;
        }
        .menu-item-small {
            grid-column: span 4;
        }
}

.portal-card {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 1.75rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-decoration: none;
        color: inherit;
        transition: border-color 0.2s ease, transform 0.2s ease;
}

.portal-card:hover {
    border-color: var(--text-main);
        transform: translateY(-2px);
        color: inherit;
}

.card-top {
    margin-bottom: 2rem;
}

.card-icon-wrapper {
    width: 42px;
        height: 42px;
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        margin-bottom: 1.25rem;
        color: var(--brand-green);
        background: var(--bg-main);
}

.card-title-modern {
    font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 0.5rem;
        color: var(--text-main);
}

.card-desc-modern {
    font-size: 0.875rem;
        color: var(--text-muted);
        line-height: 1.5;
        margin: 0;
}

.card-action {
    display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--brand-green);
}

.portal-card-accent {
    background: var(--brand-green);
        color: #ffffff;
        border: 1px solid var(--brand-green);
}

.portal-card-accent .card-icon-wrapper {
    background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: #ffffff;
}

.portal-card-accent .card-title-modern {
    color: #ffffff;
}

.portal-card-accent .card-desc-modern {
    color: rgba(255, 255, 255, 0.75);
}

.portal-card-accent .card-action {
    color: var(--brand-accent);
}

/* ========== STATS STRIP ========== */

.stats-strip {
    border: 1px solid var(--border-subtle);
        background: var(--surface);
        border-radius: 8px;
        padding: 1.5rem;
        margin-top: 3rem;
}

.stat-value {
    font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--brand-green);
}

.stat-meta {
    font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
}

/* ========== PERMISSION INFO FOOTER ========== */

.access-info-box {
    border-top: 1px dashed var(--border-subtle);
        padding-top: 2rem;
        margin-top: 3rem;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/administrasi.blade.php
   SECTION: HUB ADMINISTRASI
   ========================================================================== */

/* [Centralized body style] */

/* ================= PALET WARNA KATEGORI ADMINISTRASI ================= */

.sec-arsip {
    --cat-accent: #1d4ed8;
        --cat-bg: #eff6ff;
        --cat-border: #bfdbfe;
}

.sec-admin {
    --cat-accent: #0f766e;
        --cat-bg: #f0fdfa;
        --cat-border: #99f6e4;
}

.sec-kinerja {
    --cat-accent: #7c3aed;
        --cat-bg: #f5f3ff;
        --cat-border: #ddd6fe;
}

/* ================= HERO HEADER (SHARP DESIGN) ================= */

.archive-hero {
    background: #ffffff;
        border-bottom: 1px solid var(--adm-border);
        padding: 1.75rem 0 1.5rem;
        margin-bottom: 1.5rem;
}

.hero-badge-eyebrow {
    display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.725rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--adm-brand-green);
        background: #e8f5ed;
        border: 1px solid rgba(20, 61, 41, 0.2);
        border-radius: 0 !important;
        padding: 0.3rem 0.75rem;
        margin-bottom: 0.5rem;
}

.hero-heading {
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--adm-brand-green);
        line-height: 1.2;
        margin-bottom: 0.35rem;
}

.hero-subheading {
    color: var(--adm-text-muted);
        font-size: 0.875rem;
        max-width: 650px;
        line-height: 1.45;
        margin-bottom: 1rem;
}

.hero-stats-wrap {
    display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
}

.hero-stat-pill {
    display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: #ffffff;
        border: 1px solid var(--adm-border);
        border-radius: 0 !important;
        padding: 0.35rem 0.75rem;
        font-size: 0.785rem;
        color: var(--adm-text-main);
}

.hero-stat-pill i {
    color: var(--adm-brand-accent);
}

.hero-stat-pill strong {
    color: var(--adm-brand-green);
        font-weight: 700;
}

/* ================= SEARCH BOX (SHARP + ANIMASI) ================= */

.search-capsule-container {
    position: relative;
        width: 100%;
        max-width: 440px;
}

.search-capsule-input {
    width: 100%;
        height: 42px;
        padding: 0.5rem 4.5rem 0.5rem 2.5rem;
        background: #ffffff;
        border: 1px solid var(--adm-border);
        border-radius: 0 !important;
        font-size: 0.85rem;
        color: var(--adm-text-main);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-capsule-input:focus {
    outline: none;
        border-color: var(--adm-brand-green);
        box-shadow: 0 0 0 2px rgba(20, 61, 41, 0.12), 0 4px 10px rgba(0, 0, 0, 0.03);
}

.search-icon-pos {
    position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--adm-text-muted);
        pointer-events: none;
        font-size: 0.85rem;
        transition: color 0.2s ease;
}

.search-capsule-input:focus ~ .search-icon-pos {
    color: var(--adm-brand-green);
}

.search-actions-pos {
    position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 0.35rem;
}

.search-kbd-hint {
    font-size: 0.7rem;
        font-family: var(--font-mono, monospace);
        background: #f4f4f5;
        color: var(--adm-text-muted);
        border: 1px solid var(--adm-border);
        border-radius: 0 !important;
        padding: 0.15rem 0.45rem;
        font-weight: 600;
}

.search-reset-btn {
    background: none;
        border: none;
        color: var(--adm-text-muted);
        padding: 0.2rem;
        cursor: pointer;
        display: none;
        font-size: 0.85rem;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.search-reset-btn:hover {
    color: #dc2626;
        transform: rotate(90deg) scale(1.15);
}

/* ================= TOOLBAR FILTER KATEGORI (WRAP ANTI-GESER) ================= */

.category-toolbar-box {
    background: #ffffff;
        border: 1px solid var(--adm-border);
        border-radius: 0 !important;
        padding: 0.85rem 1rem;
        margin-bottom: 1.5rem;
}

.category-toolbar-header {
    display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.65rem;
        padding-bottom: 0.45rem;
        border-bottom: 1px solid var(--adm-border);
}

.category-toolbar-label {
    font-size: 0.725rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--adm-text-muted);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.4rem;
}

.pills-scroll-wrapper {
    display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
}

.category-filter-pill {
    display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.42rem 0.85rem;
        border-radius: 0 !important;
        background: #ffffff;
        border: 1px solid var(--adm-border);
        color: var(--adm-text-main);
        font-size: 0.775rem;
        font-weight: 600;
        text-decoration: none;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 0.18s ease,
                    border-color 0.18s ease,
                    box-shadow 0.2s ease,
                    color 0.18s ease;
        cursor: pointer;
        line-height: 1.2;
}

.category-filter-pill:hover {
    background: #ffffff;
        border-color: var(--adm-brand-green);
        color: var(--adm-brand-green);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(20, 61, 41, 0.08);
}

.category-filter-pill:active {
    transform: translateY(0) scale(0.97);
}

.category-filter-pill.active {
    background: var(--adm-brand-green) !important;
        border-color: var(--adm-brand-green) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(20, 61, 41, 0.22), inset 0 -3px 0 var(--adm-brand-accent);
        transform: translateY(-1px);
}

.category-filter-pill.active i {
    color: var(--adm-brand-accent) !important;
        transform: scale(1.12);
        transition: transform 0.2s ease;
}

.category-filter-pill.active .pill-count {
    background: rgba(255, 255, 255, 0.22);
        color: #ffffff;
}

.pill-count {
    font-size: 0.675rem;
        font-family: var(--font-mono, monospace);
        padding: 0.1rem 0.4rem;
        border-radius: 0 !important;
        background: #f4f4f5;
        color: var(--adm-text-muted);
        font-weight: 700;
        transition: all 0.2s ease;
}

/* ================= SECTION BLOCKS (SIKU TAJAM) ================= */

.section-block {
    background: #ffffff;
        border: 1px solid var(--adm-border);
        border-radius: 0 !important;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
}

.section-block-header {
    display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 0.65rem;
        border-bottom: 1px solid var(--adm-border);
}

.section-block-title {
    display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 1rem;
        font-weight: 800;
        color: var(--adm-text-main);
        margin: 0;
}

.section-block-title i {
    color: var(--cat-accent, var(--adm-brand-green));
        font-size: 1rem;
}

.section-badge-counter {
    font-size: 0.725rem;
        font-weight: 700;
        color: var(--adm-text-muted);
        background: #f4f4f5;
        padding: 0.2rem 0.55rem;
        border-radius: 0 !important;
        border: 1px solid var(--adm-border);
}

.archive-card-grid {
    display: grid;
        grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
        gap: 1rem;
}

/* ================= CARD MODUL & ANIMASI (WARNA BERUBAH SAAT HOVER) ================= */

.archive-card {
    background: #ffffff;
        border: 1px solid var(--adm-border);
        border-left: 4px solid var(--cat-accent, var(--adm-brand-green));
        border-radius: 0 !important;
        padding: 1.2rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-decoration: none;
        color: var(--adm-text-main);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 0.2s ease,
                    border-color 0.2s ease,
                    border-left-width 0.2s ease;
        will-change: transform, box-shadow;
}

.archive-card:hover {
    background-color: var(--cat-bg, #f8fafc);
        border-color: var(--cat-border, var(--adm-border-strong));
        border-left-width: 6px;
        border-left-color: var(--cat-accent, var(--adm-brand-accent));
        transform: translateY(-3px);
        box-shadow: 0 10px 22px -4px rgba(15, 23, 42, 0.09), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
        color: var(--adm-text-main);
}

.archive-card:active {
    transform: translateY(-1px) scale(0.99);
}

.card-top-row {
    display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.9rem;
}

.card-icon-modern {
    width: 42px;
        height: 42px;
        border-radius: 0 !important;
        background: var(--cat-bg, #f4f4f5);
        border: 1px solid var(--cat-border, var(--adm-border));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        color: var(--cat-accent, var(--adm-brand-green));
        transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background-color 0.2s ease,
                    box-shadow 0.2s ease,
                    border-color 0.2s ease;
}

.archive-card:hover .card-icon-modern {
    background-color: #ffffff;
        transform: scale(1.12) rotate(-4deg);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        border-color: var(--cat-accent, var(--adm-brand-green));
}

.card-meta-modern {
    display: inline-block;
        font-size: 0.685rem;
        font-weight: 700;
        font-family: var(--font-mono, monospace);
        color: var(--cat-accent);
        background: #ffffff;
        padding: 0.2rem 0.5rem;
        border-radius: 0 !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border: 1px solid var(--cat-border);
}

.card-title-modern {
    font-size: 0.925rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 0.35rem;
        color: var(--adm-text-main);
        transition: color 0.15s ease;
}

.archive-card:hover .card-title-modern {
    color: var(--cat-accent, var(--adm-brand-green));
}

.card-desc-modern {
    font-size: 0.775rem;
        color: var(--adm-text-muted);
        line-height: 1.45;
        margin: 0;
}

.card-action-modern {
    font-size: 0.725rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cat-accent);
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 1.25rem;
        padding-top: 0.75rem;
        border-top: 1px dashed var(--adm-border);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.archive-card:hover .card-action-modern {
    color: var(--adm-brand-accent);
}

.archive-card:hover .card-action-modern i {
    transform: translateX(4px);
        transition: transform 0.2s ease;
}

/* ================= KARTU SPESIAL (ARSIP PERKARA KLASIK) ================= */

.archive-card-accent {
    background: linear-gradient(135deg, #143d29 0%, #0d2b1d 100%) !important;
        border-color: #143d29 !important;
        border-left: 4px solid var(--adm-brand-accent) !important;
        color: #ffffff !important;
}

.archive-card-accent .card-icon-modern {
    background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: var(--adm-brand-accent) !important;
}

.archive-card-accent:hover {
    background: linear-gradient(135deg, #0d2b1d 0%, #081d13 100%) !important;
        border-left-width: 6px !important;
        border-left-color: var(--adm-brand-accent-hover) !important;
}

.archive-card-accent:hover .card-icon-modern {
    background: var(--adm-brand-accent) !important;
        color: #143d29 !important;
}

.archive-card-accent .card-title-modern {
    color: #ffffff !important;
}

.archive-card-accent .card-meta-modern {
    background: rgba(234, 179, 8, 0.2) !important;
        color: #fef08a !important;
        border-color: rgba(234, 179, 8, 0.35) !important;
}

.archive-card-accent .card-desc-modern {
    color: rgba(255, 255, 255, 0.75) !important;
}

.archive-card-accent .card-action-modern {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
        color: var(--adm-brand-accent) !important;
}

/* Live Search Feedback Strip */

.search-summary-strip {
    background: #ffffff;
        border: 1px solid var(--adm-border);
        border-radius: 0 !important;
        border-left: 3px solid var(--adm-brand-green);
        padding: 0.65rem 1rem;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.825rem;
}

.search-target-item {
    animation: itemAppear 0.22s ease-out;
}

@keyframes itemAppear {
    from {
            opacity: 0.4;
            transform: translateY(5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/monitoring.blade.php
   SECTION: HUB MONITORING & MONITORING CARD
   ========================================================================== */

/* [Centralized body style] */

/* ================= THEME WARNA KATEGORI ================= */

.cat-perkara {
    --cat-accent: #1d4ed8; --cat-bg: #eff6ff; --cat-border: #bfdbfe;
}

.cat-keuangan {
    --cat-accent: #047857; --cat-bg: #ecfdf5; --cat-border: #a7f3d0;
}

.cat-kepatuhan {
    --cat-accent: #b45309; --cat-bg: #fffbeb; --cat-border: #fde68a;
}

.cat-akta {
    --cat-accent: #be123c; --cat-bg: #fff1f2; --cat-border: #fecdd3;
}

.cat-ecourt {
    --cat-accent: #0369a1; --cat-bg: #f0f9ff; --cat-border: #bae6fd;
}

.cat-data {
    --cat-accent: #6d28d9; --cat-bg: #f5f3ff; --cat-border: #ddd6fe;
}

.cat-anomali {
    --cat-accent: #c2410c; --cat-bg: #fff7ed; --cat-border: #ffedd5;
}

.cat-kinerja {
    --cat-accent: #0f766e; --cat-bg: #f0fdfa; --cat-border: #99f6e4;
}

.cat-pencarian {
    --cat-accent: #4338ca; --cat-bg: #eef2ff; --cat-border: #c7d2fe;
}

.cat-iku {
    --cat-accent: #be185d; --cat-bg: #fdf2f8; --cat-border: #fbcfe8;
}

.cat-satker {
    --cat-accent: #143d29; --cat-bg: #e8f5ed; --cat-border: #a7f3d0;
}

.cat-ptsp {
    --cat-accent: #0e7490; --cat-bg: #ecfeff; --cat-border: #a5f3fc;
}

/* ================= HEADER HERO (SHARP DESIGN) ================= */

.monitoring-hero {
    background: #ffffff;
        border-bottom: 1px solid var(--mon-border);
        padding: 1.75rem 0 1.5rem;
        margin-bottom: 1.5rem;
}

.hero-badge-role {
    display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.725rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--mon-brand-green);
        background: #e8f5ed;
        border: 1px solid rgba(20, 61, 41, 0.2);
        border-radius: 0 !important;
        padding: 0.3rem 0.75rem;
        margin-bottom: 0.5rem;
}

.hero-heading {
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--mon-brand-green);
        line-height: 1.2;
        margin-bottom: 0.35rem;
}

.hero-subheading {
    color: var(--mon-text-muted);
        font-size: 0.875rem;
        max-width: 650px;
        line-height: 1.45;
        margin-bottom: 1rem;
}

.hero-stat-pill {
    display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: #ffffff;
        border: 1px solid var(--mon-border);
        border-radius: 0 !important;
        padding: 0.35rem 0.75rem;
        font-size: 0.785rem;
        color: var(--mon-text-main);
}

.hero-stat-pill i {
    color: var(--mon-brand-accent);
}

.hero-stat-pill strong {
    color: var(--mon-brand-green);
        font-weight: 700;
}

/* ================= SEARCH BOX (SHARP / SIKU-SIKU + ANIMASI) ================= */

.search-capsule-input {
    width: 100%;
        height: 42px;
        padding: 0.5rem 4.5rem 0.5rem 2.5rem;
        background: #ffffff;
        border: 1px solid var(--mon-border);
        border-radius: 0 !important;
        font-size: 0.85rem;
        color: var(--mon-text-main);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-capsule-input:focus {
    outline: none;
        border-color: var(--mon-brand-green);
        box-shadow: 0 0 0 2px rgba(20, 61, 41, 0.12), 0 4px 10px rgba(0, 0, 0, 0.03);
}

.search-icon-pos {
    position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--mon-text-muted);
        pointer-events: none;
        font-size: 0.85rem;
        transition: color 0.2s ease;
}

.search-capsule-input:focus ~ .search-icon-pos {
    color: var(--mon-brand-green);
}

.search-reset-btn {
    background: none;
        border: none;
        color: var(--mon-text-muted);
        padding: 0.2rem;
        cursor: pointer;
        display: none;
        font-size: 0.85rem;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

/* ================= TOOLBAR FILTER KATEGORI (MULTI-ROW WRAP / ANTI-GESER) ================= */

.category-filter-pill {
    display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.42rem 0.85rem;
        border-radius: 0 !important;
        background: #ffffff;
        border: 1px solid var(--mon-border);
        color: var(--mon-text-main);
        font-size: 0.775rem;
        font-weight: 600;
        text-decoration: none;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 0.18s ease,
                    border-color 0.18s ease,
                    box-shadow 0.2s ease,
                    color 0.18s ease;
        cursor: pointer;
        line-height: 1.2;
        position: relative;
        overflow: hidden;
}

.category-filter-pill:hover {
    background: #ffffff;
        border-color: var(--mon-brand-green);
        color: var(--mon-brand-green);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(20, 61, 41, 0.08);
}

.category-filter-pill.active {
    background: var(--mon-brand-green) !important;
        border-color: var(--mon-brand-green) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(20, 61, 41, 0.22), inset 0 -3px 0 var(--mon-brand-accent);
        transform: translateY(-1px);
}

.category-filter-pill.active i {
    color: var(--mon-brand-accent) !important;
        transform: scale(1.12);
        transition: transform 0.2s ease;
}

.pill-count {
    font-size: 0.675rem;
        font-family: var(--font-mono, monospace);
        padding: 0.1rem 0.4rem;
        border-radius: 0 !important;
        background: #f4f4f5;
        color: var(--mon-text-muted);
        font-weight: 700;
        transition: all 0.2s ease;
}

.category-filter-pill:hover .pill-count {
    background: #e8f5ed;
        color: var(--mon-brand-green);
}

/* ================= SECTION BLOCKS (SIKU TAJAM) ================= */

.category-block {
    background: #ffffff;
        border: 1px solid var(--mon-border);
        border-radius: 0 !important;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
}

.category-block-header {
    display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 0.65rem;
        border-bottom: 1px solid var(--mon-border);
}

.category-block-title {
    display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 1rem;
        font-weight: 800;
        color: var(--mon-text-main);
        margin: 0;
}

.category-block-title i {
    color: var(--cat-accent, var(--mon-brand-green));
        font-size: 1rem;
}

.category-badge-counter {
    font-size: 0.725rem;
        font-weight: 700;
        color: var(--mon-text-muted);
        background: #f4f4f5;
        padding: 0.2rem 0.55rem;
        border-radius: 0 !important;
        border: 1px solid var(--mon-border);
}

.modules-card-grid {
    display: grid;
        grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
        gap: 0.85rem;
}

/* ================= CARD MODUL (SIKU TAJAM & ANIMASI RESPONSIF) ================= */

.module-card {
    display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        border: 1px solid var(--mon-border);
        border-radius: 0 !important;
        border-left: 3px solid var(--cat-accent, var(--mon-brand-green));
        padding: 0.95rem 1.05rem;
        text-decoration: none;
        color: inherit;
        position: relative;
        min-height: 84px;
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.2s ease,
                    background-color 0.2s ease,
                    border-left-width 0.2s ease;
        will-change: transform, box-shadow;
}

.module-card:hover {
    background-color: var(--cat-bg, #f8fafc);
        border-color: var(--cat-border, var(--mon-border-strong));
        border-left-width: 5px;
        border-left-color: var(--cat-accent, var(--mon-brand-accent));
        transform: translateY(-3px);
        box-shadow: 0 10px 22px -4px rgba(15, 23, 42, 0.09), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
}

.module-card:active {
    transform: translateY(-1px) scale(0.99);
        box-shadow: 0 3px 8px -2px rgba(15, 23, 42, 0.06);
}

.card-inner-wrapper {
    display: flex;
        align-items: center;
        gap: 0.85rem;
        flex: 1;
        min-width: 0;
}

.module-icon-box {
    width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 !important;
        background: var(--cat-bg, #f4f4f5);
        color: var(--cat-accent, var(--mon-brand-green));
        font-size: 1.05rem;
        border: 1px solid var(--cat-border, var(--mon-border));
        transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.2s ease,
                    border-color 0.2s ease;
}

.module-card:hover .module-icon-box {
    background-color: #ffffff;
        transform: scale(1.12) rotate(-4deg);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        border-color: var(--cat-accent, var(--mon-brand-green));
}

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

.module-title {
    font-size: 0.85rem;
        font-weight: 700;
        color: var(--mon-text-main);
        margin: 0;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.15s ease;
}

.module-card:hover .module-title {
    color: var(--cat-accent, var(--mon-brand-green));
}

.module-desc {
    font-size: 0.735rem;
        color: var(--mon-text-muted);
        margin: 0.2rem 0 0;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.module-action {
    flex-shrink: 0;
        margin-left: 0.5rem;
        color: #d4d4d8;
        font-size: 0.825rem;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.module-card:hover .module-action {
    color: var(--mon-brand-accent);
        transform: translateX(4px);
}

.module-card.is-disabled {
    opacity: 0.55;
        cursor: not-allowed;
        pointer-events: none;
        background: #f4f4f5;
        border-left-color: #a1a1aa;
}

/* Animasi Halus Kemunculan Item Hasil Filter */

.module-card .badge {
    border-radius: 0 !important;
}

.badge-external {
    font-size: 0.65rem;
        color: var(--mon-text-muted);
}

/* Live Search Feedback Strip */

.search-summary-strip {
    background: #ffffff;
        border: 1px solid var(--mon-border);
        border-radius: 0 !important;
        border-left: 3px solid var(--mon-brand-green);
        padding: 0.65rem 1rem;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.825rem;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/laporan_perkara.blade.php
   SECTION: HUB LAPORAN PERKARA
   ========================================================================== */

/* [Centralized body style] */

/* ================= PALET WARNA KATEGORI LAPORAN ================= */

.sec-register {
    --cat-accent: #1d4ed8;
        --cat-bg: #eff6ff;
        --cat-border: #bfdbfe;
}

.sec-tematik {
    --cat-accent: #d97706;
        --cat-bg: #fffbeb;
        --cat-border: #fde68a;
}

/* ================= HERO HEADER (SHARP DESIGN) ================= */

.report-hero {
    background: #ffffff;
        border-bottom: 1px solid var(--rep-border);
        padding: 1.75rem 0 1.5rem;
        margin-bottom: 1.5rem;
}

.hero-badge-eyebrow {
    display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.725rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--rep-brand-green);
        background: #e8f5ed;
        border: 1px solid rgba(20, 61, 41, 0.2);
        border-radius: 0 !important;
        padding: 0.3rem 0.75rem;
        margin-bottom: 0.5rem;
}

.hero-heading {
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--rep-brand-green);
        line-height: 1.2;
        margin-bottom: 0.35rem;
}

.hero-subheading {
    color: var(--rep-text-muted);
        font-size: 0.875rem;
        max-width: 650px;
        line-height: 1.45;
        margin-bottom: 1rem;
}

.hero-stat-pill {
    display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: #ffffff;
        border: 1px solid var(--rep-border);
        border-radius: 0 !important;
        padding: 0.35rem 0.75rem;
        font-size: 0.785rem;
        color: var(--rep-text-main);
}

.hero-stat-pill i {
    color: var(--rep-brand-accent);
}

.hero-stat-pill strong {
    color: var(--rep-brand-green);
        font-weight: 700;
}

/* ================= SEARCH BOX (SHARP + ANIMASI) ================= */

.search-capsule-input {
    width: 100%;
        height: 42px;
        padding: 0.5rem 4.5rem 0.5rem 2.5rem;
        background: #ffffff;
        border: 1px solid var(--rep-border);
        border-radius: 0 !important;
        font-size: 0.85rem;
        color: var(--rep-text-main);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-capsule-input:focus {
    outline: none;
        border-color: var(--rep-brand-green);
        box-shadow: 0 0 0 2px rgba(20, 61, 41, 0.12), 0 4px 10px rgba(0, 0, 0, 0.03);
}

.search-icon-pos {
    position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--rep-text-muted);
        pointer-events: none;
        font-size: 0.85rem;
        transition: color 0.2s ease;
}

.search-capsule-input:focus ~ .search-icon-pos {
    color: var(--rep-brand-green);
}

.search-reset-btn {
    background: none;
        border: none;
        color: var(--rep-text-muted);
        padding: 0.2rem;
        cursor: pointer;
        display: none;
        font-size: 0.85rem;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

/* ================= TOOLBAR FILTER KATEGORI (WRAP ANTI-GESER) ================= */

.category-filter-pill {
    display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.42rem 0.85rem;
        border-radius: 0 !important;
        background: #ffffff;
        border: 1px solid var(--rep-border);
        color: var(--rep-text-main);
        font-size: 0.775rem;
        font-weight: 600;
        text-decoration: none;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 0.18s ease,
                    border-color 0.18s ease,
                    box-shadow 0.2s ease,
                    color 0.18s ease;
        cursor: pointer;
        line-height: 1.2;
}

.category-filter-pill:hover {
    background: #ffffff;
        border-color: var(--rep-brand-green);
        color: var(--rep-brand-green);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(20, 61, 41, 0.08);
}

.category-filter-pill.active {
    background: var(--rep-brand-green) !important;
        border-color: var(--rep-brand-green) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(20, 61, 41, 0.22), inset 0 -3px 0 var(--rep-brand-accent);
        transform: translateY(-1px);
}

.category-filter-pill.active i {
    color: var(--rep-brand-accent) !important;
        transform: scale(1.12);
        transition: transform 0.2s ease;
}

.pill-count {
    font-size: 0.675rem;
        font-family: var(--font-mono, monospace);
        padding: 0.1rem 0.4rem;
        border-radius: 0 !important;
        background: #f4f4f5;
        color: var(--rep-text-muted);
        font-weight: 700;
        transition: all 0.2s ease;
}

/* ================= SECTION BLOCKS (SIKU TAJAM) ================= */

.section-block {
    background: #ffffff;
        border: 1px solid var(--rep-border);
        border-radius: 0 !important;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
}

.section-block-header {
    display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 0.65rem;
        border-bottom: 1px solid var(--rep-border);
}

.section-block-title {
    display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 1rem;
        font-weight: 800;
        color: var(--rep-text-main);
        margin: 0;
}

.section-block-title i {
    color: var(--cat-accent, var(--rep-brand-green));
        font-size: 1rem;
}

.section-badge-counter {
    font-size: 0.725rem;
        font-weight: 700;
        color: var(--rep-text-muted);
        background: #f4f4f5;
        padding: 0.2rem 0.55rem;
        border-radius: 0 !important;
        border: 1px solid var(--rep-border);
}

.report-card-grid {
    display: grid;
        grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
        gap: 1rem;
}

/* ================= CARD MODUL & ANIMASI (WARNA BERUBAH SAAT HOVER) ================= */

.report-card {
    background: #ffffff;
        border: 1px solid var(--rep-border);
        border-left: 4px solid var(--cat-accent, var(--rep-brand-green));
        border-radius: 0 !important;
        padding: 1.2rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-decoration: none;
        color: var(--rep-text-main);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 0.2s ease,
                    border-color 0.2s ease,
                    border-left-width 0.2s ease;
        will-change: transform, box-shadow;
}

.report-card:hover {
    background-color: var(--cat-bg, #f8fafc);
        border-color: var(--cat-border, var(--rep-border-strong));
        border-left-width: 6px;
        border-left-color: var(--cat-accent, var(--rep-brand-accent));
        transform: translateY(-3px);
        box-shadow: 0 10px 22px -4px rgba(15, 23, 42, 0.09), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
        color: var(--rep-text-main);
}

.report-card:active {
    transform: translateY(-1px) scale(0.99);
}

.card-icon-modern {
    width: 42px;
        height: 42px;
        border-radius: 0 !important;
        background: var(--cat-bg, #f4f4f5);
        border: 1px solid var(--cat-border, var(--rep-border));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        color: var(--cat-accent, var(--rep-brand-green));
        transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background-color 0.2s ease,
                    box-shadow 0.2s ease,
                    border-color 0.2s ease;
}

.report-card:hover .card-icon-modern {
    background-color: #ffffff;
        transform: scale(1.12) rotate(-4deg);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        border-color: var(--cat-accent, var(--rep-brand-green));
}

.badge-code {
    display: inline-block;
        font-size: 0.685rem;
        font-weight: 700;
        font-family: var(--font-mono, monospace);
        color: var(--cat-accent);
        background: #ffffff;
        padding: 0.2rem 0.5rem;
        border-radius: 0 !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border: 1px solid var(--cat-border);
}

.card-title-modern {
    font-size: 0.925rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 0.35rem;
        color: var(--rep-text-main);
        transition: color 0.15s ease;
}

.report-card:hover .card-title-modern {
    color: var(--cat-accent, var(--rep-brand-green));
}

.card-desc-modern {
    font-size: 0.775rem;
        color: var(--rep-text-muted);
        line-height: 1.45;
        margin: 0;
}

.card-action-modern {
    font-size: 0.725rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cat-accent);
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 1.25rem;
        padding-top: 0.75rem;
        border-top: 1px dashed var(--rep-border);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.report-card:hover .card-action-modern {
    color: var(--rep-brand-accent);
}

.report-card:hover .card-action-modern i {
    transform: translateX(4px);
        transition: transform 0.2s ease;
}

/* ================= KARTU SPESIAL ACCENT (RK1 DITERIMA BANDING) ================= */

.report-card-accent {
    background: linear-gradient(135deg, #143d29 0%, #0d2b1d 100%) !important;
        border-color: #143d29 !important;
        border-left: 4px solid var(--rep-brand-accent) !important;
        color: #ffffff !important;
}

.report-card-accent .card-icon-modern {
    background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: var(--rep-brand-accent) !important;
}

.report-card-accent:hover {
    background: linear-gradient(135deg, #0d2b1d 0%, #081d13 100%) !important;
        border-left-width: 6px !important;
        border-left-color: var(--rep-brand-accent-hover) !important;
}

.report-card-accent:hover .card-icon-modern {
    background: var(--rep-brand-accent) !important;
        color: #143d29 !important;
}

.report-card-accent .card-title-modern {
    color: #ffffff !important;
}

.report-card-accent .badge-code {
    background: rgba(234, 179, 8, 0.2) !important;
        color: #fef08a !important;
        border-color: rgba(234, 179, 8, 0.35) !important;
}

.report-card-accent .card-desc-modern {
    color: rgba(255, 255, 255, 0.75) !important;
}

.report-card-accent .card-action-modern {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
        color: var(--rep-brand-accent) !important;
}

/* Live Search Feedback Strip */

.search-summary-strip {
    background: #ffffff;
        border: 1px solid var(--rep-border);
        border-radius: 0 !important;
        border-left: 3px solid var(--rep-brand-green);
        padding: 0.65rem 1rem;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.825rem;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/dispensasi_kawin_home.blade.php
   SECTION: DISPENSASI KAWIN HOME
   ========================================================================== */

.hero-header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
        padding: 50px 0 90px;
        color: var(--white);
        position: relative;
        overflow: hidden;
        margin-top: -20px;
}

.hero-header::before {
    content: '';
        position: absolute;
        top: -30%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(198, 164, 63, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
}

.hero-header::after {
    content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(198, 164, 63, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
}

.hero-header h1 {
    font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.5px;
}

.main-container {
    margin-top: -55px;
        padding-bottom: 60px;
}

/* Premium Grid 3 Kolom */

.premium-grid {
    display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.8rem;
        max-width: 1000px;
        margin: 0 auto;
}

@media (max-width: 992px) {
    .premium-grid {
            grid-template-columns: repeat(2, 1fr);
            max-width: 700px;
        }
}

@media (max-width: 600px) {
    .premium-grid {
            grid-template-columns: 1fr;
            max-width: 100%;
        }
}

/* Card Premium */

.menu-card-premium {
    background: var(--white);
        border-radius: 24px !important;
        text-decoration: none !important;
        padding: 32px 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: var(--transition);
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.05);
}

.menu-card-premium::before {
    content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--secondary), var(--primary));
        transform: scaleX(0);
        transition: var(--transition);
}

.menu-card-premium:hover::before {
    transform: scaleX(1);
}

.menu-card-premium:hover {
    transform: translateY(-8px);
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.12);
        border-color: transparent;
}

.icon-box-premium {
    width: 80px;
        height: 80px;
        border-radius: 22px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 2.3rem;
        transition: var(--transition);
}

.menu-card-premium:hover .icon-box-premium {
    transform: scale(1.08) rotate(3deg);
}

.badge-premium {
    font-size: 0.7rem;
        padding: 5px 14px;
        border-radius: 30px !important;
        margin-bottom: 14px;
        font-weight: 800;
        letter-spacing: 0.5px;
        display: inline-block;
}

.card-title-premium {
    font-size: 1.1rem;
        font-weight: 800;
        color: var(--dark);
        margin-bottom: 10px;
}

.card-desc-premium {
    font-size: 0.8rem;
        color: var(--gray);
        line-height: 1.5;
        margin-bottom: 22px;
}

.btn-premium {
    font-weight: 700;
        padding: 10px 24px;
        border-radius: 40px !important;
        transition: var(--transition);
        width: 100%;
        font-size: 0.85rem;
        border: 2px solid;
        background: transparent;
        cursor: pointer;
        display: inline-block;
        text-align: center;
}

.btn-premium:hover {
    transform: translateY(-2px);
        filter: brightness(0.95);
}

.btn-premium:active {
    transform: scale(0.98);
}

/* Warna spesifik per card */

.card-primary {
    border-bottom: 3px solid var(--primary) !important;
}

.btn-outline-primary-premium {
    border-color: var(--primary);
        color: var(--primary);
}

.btn-outline-primary-premium:hover {
    background: var(--primary);
        color: var(--white);
}

.card-info {
    border-bottom: 3px solid #0ea5e9 !important;
}

.btn-outline-info-premium {
    border-color: #0ea5e9;
        color: #0ea5e9;
}

.btn-outline-info-premium:hover {
    background: #0ea5e9;
        color: var(--white);
}

.card-success {
    border-bottom: 3px solid #10b981 !important;
}

.btn-outline-success-premium {
    border-color: #10b981;
        color: #10b981;
}

.btn-outline-success-premium:hover {
    background: #10b981;
        color: var(--white);
}

/* Responsive */

@media (max-width: 768px) {
    .hero-header {
            padding: 35px 0 65px;
        }
        .hero-header h1 {
            font-size: 1.5rem;
        }
        .hero-header p {
            font-size: 0.85rem;
        }
        .menu-card-premium {
            padding: 24px 18px;
        }
        .icon-box-premium {
            width: 65px;
            height: 65px;
            font-size: 1.8rem;
            border-radius: 18px !important;
        }
        .card-title-premium {
            font-size: 0.95rem;
        }
        .card-desc-premium {
            font-size: 0.75rem;
        }
        .badge-premium {
            font-size: 0.65rem;
            padding: 4px 12px;
        }
        .btn-premium {
            padding: 8px 16px;
            font-size: 0.75rem;
        }
}

/* Animations */

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

.menu-card-premium {
    animation: fadeInUp 0.5s ease-out forwards;
        opacity: 0;
}

.menu-card-premium:nth-child(1) {
    animation-delay: 0s;
}

.menu-card-premium:nth-child(2) {
    animation-delay: 0.1s;
}

.menu-card-premium:nth-child(3) {
    animation-delay: 0.2s;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/sisa_panjar_menu.blade.php
   SECTION: SISA PANJAR MENU
   ========================================================================== */

.hero-header {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--secondary-red) 100%);
        padding: 50px 0 90px;
        color: white;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        margin-top: -20px;
        
        box-shadow: 0 10px 30px rgba(139, 0, 0, 0.2);
}

.main-container {
    margin-top: -60px;
        padding-bottom: 80px;
}

.menu-card {
    border: none;
        border-radius: 30px;
        background: white;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        text-decoration: none !important;
        padding: 35px 25px;
        height: 100%;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        overflow: hidden;
}

.menu-card:hover {
    transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.icon-box {
    width: 70px;
        height: 70px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 2rem;
        transition: 0.3s;
}

.menu-card:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
}

.card-title {
    font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 12px;
        min-height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2d3436;
}

.card-desc {
    font-size: 0.85rem;
        color: #636e72;
        margin-bottom: 25px;
        line-height: 1.5;
}

.border-indicator {
    position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/peraturan_public.blade.php
   SECTION: PERATURAN PUBLIK (JDIH)
   ========================================================================== */

/* [Centralized body style] */

.tracking-tight {
    letter-spacing: -0.03em;
}

.text-justify {
    text-align: justify;
}

/* NAVBAR FIX */

.navbar-custom {
    background: white;
            padding: 12px 0;
            border-bottom: 3px solid #8b0000;
            position: sticky;
            top: 0;
            z-index: 1060;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* CARD SULTAN */

.jdih-card {
    border-radius: 16px;
            border-left: 6px solid #8b0000 !important;
            border: none;
            background: white;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.jdih-card:hover {
    transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(139, 0, 0, 0.08) !important;
}

/* SIDEBAR STICKY */

.sticky-sidebar {
    position: -webkit-sticky;
            position: sticky;
            top: 90px;
            z-index: 1000;
            height: fit-content;
}

/* CUSTOM SCROLLBAR SIDEBAR */

.custom-radio-container::-webkit-scrollbar {
    width: 4px;
}

.custom-radio-container::-webkit-scrollbar-thumb {
    background: #8b0000;
            border-radius: 10px;
}

/* ANIMATION PULSE */

.pulse-animation {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
            }
}

@media (min-width: 768px) {
    .border-left-dashed {
                border-left: 1px dashed #dee2e6;
            }
}

/* SHARE BUTTONS */

.btn-share {
    width: 32px;
            height: 32px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f1f3f5;
            color: #495057;
            transition: 0.2s;
            text-decoration: none;
}

.btn-share:hover {
    background: #8b0000;
            color: white;
            transform: scale(1.1);
}

.btn-unduh {
    min-width: 180px;
}

.hover-bg-light:hover {
    background-color: rgba(139, 0, 0, 0.04);
            cursor: pointer;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/dashboard/index.blade.php
   SECTION: DASHBOARD INDEX
   ========================================================================== */

/* ========== MODERN SYSTEM CSS VARIABLES ========== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* Modern Minimalist Components */

.form-control,
    .btn {
    border-radius: 6px !important;
        font-size: 0.875rem;
}

.form-control {
    border: 1px solid var(--border-subtle);
        background-color: var(--surface);
}

.form-control:focus {
    border-color: var(--brand-green);
        box-shadow: none;
}

/* ========== ASYMMETRICAL HEADER BANNER ========== */

.dashboard-header {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 2rem;
        margin-bottom: 1.5rem;
}

/* Filter Panel (Crisp Border) */

.filter-panel {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
}

/* ========== STATS METRIC TILES ========== */

.metric-grid {
    display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .metric-grid {
            grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 1200px) {
    .metric-grid {
            grid-template-columns: repeat(6, 1fr);
        }
}

.metric-tile {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 1.25rem;
        text-decoration: none;
        color: var(--text-main);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: border-color 0.2s ease, transform 0.2s ease;
}

.metric-tile:hover {
    border-color: var(--border-strong);
        transform: translateY(-2px);
        color: var(--text-main);
}

.metric-label {
    font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
}

.metric-value {
    font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        font-feature-settings: "tnum";
}

/* Metric Accent Colors */

.tile-sisa-lalu .metric-value {
    color: #52525b;
}

.tile-diterima .metric-value {
    color: #2563eb;
}

.tile-beban .metric-value {
    color: #7c3aed;
}

.tile-sela .metric-value {
    color: #dc2626;
}

.tile-putus .metric-value {
    color: #166534;
}

.tile-sisa .metric-value {
    color: #d97706;
}

/* ========== MAIN CONTENT ASYMMETRICAL GRID ========== */

.dashboard-layout {
    display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
}

@media (min-width: 992px) {
    .dashboard-layout {
            grid-template-columns: 1fr 360px;
        }
}

/* Cards Content */

.panel-card {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 1.5rem;
}

.panel-title {
    font-size: 0.875rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--brand-green);
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

/* Putusan Sub-Grid */

.putusan-grid {
    display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .putusan-grid {
            grid-template-columns: repeat(4, 1fr);
        }
}

.putus-box-modern {
    background: var(--bg-main);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        padding: 1rem;
        text-decoration: none;
        color: var(--text-main);
        display: block;
        transition: border-color 0.2s ease;
}

.putus-box-modern:hover {
    border-color: var(--border-strong);
        color: var(--text-main);
}

.putus-box-label {
    font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
}

.putus-box-value {
    font-size: 1.25rem;
        font-weight: 800;
        margin-top: 0.25rem;
        font-feature-settings: "tnum";
}

.putus-bar {
    height: 3px;
        border-radius: 2px;
        margin-top: 0.5rem;
}

/* Chart Container */

.chart-wrapper {
    background: var(--bg-main);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
        padding: 1rem;
        height: 280px;
        position: relative;
}

/* Zone Kepatuhan Strip */

.zone-grid {
    display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-top: 1.25rem;
}

@media (min-width: 576px) {
    .zone-grid {
            grid-template-columns: repeat(4, 1fr);
        }
}

.zone-box {
    border: 1px solid var(--border-subtle);
        border-radius: 6px;
        padding: 0.85rem;
        text-decoration: none;
        display: block;
        transition: transform 0.2s ease;
}

.zone-box:hover {
    transform: translateY(-2px);
}

.zone-green-dark {
    background: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
}

.zone-green-light {
    background: #f0fdfa;
        border-color: #99f6e4;
        color: #115e59;
}

.zone-yellow {
    background: #fefce8;
        border-color: #fef08a;
        color: #854d0e;
}

.zone-red {
    background: #fef2f2;
        border-color: #fecaca;
        color: #991b1b;
}

/* Modern Sidebar Table */

.table-modern {
    width: 100%;
        border-collapse: collapse;
        font-size: 0.8rem;
}

.table-modern th {
    background: var(--bg-main);
        color: var(--text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.75rem 0.85rem;
        border-bottom: 1px solid var(--border-subtle);
        text-align: left;
}

.table-modern td {
    padding: 0.75rem 0.85rem;
        border-bottom: 1px solid var(--border-subtle);
        color: var(--text-main);
}

.table-modern tr:last-child td {
    border-bottom: none;
}

.table-modern tr:hover td {
    background: var(--bg-main);
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/dashboard/detail.blade.php
   SECTION: DASHBOARD DETAIL
   ========================================================================== */

/* ========== MODERN SYSTEM CSS VARIABLES ========== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* Modern Minimalist Components */

.btn {
    border-radius: 6px !important;
        font-size: 0.85rem;
        font-weight: 600;
}

.panel-card {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
}

/* Header Detail View */

.detail-header {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        padding: 1.5rem 1.75rem;
        margin-bottom: 1.25rem;
}

.breadcrumb-item a {
    color: var(--brand-green);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.8rem;
}

.breadcrumb-item.active {
    font-size: 0.8rem;
        color: var(--text-muted);
}

/* Table Detail View Modern */

.table-modern-detail {
    font-size: 0.825rem;
        width: 100%;
        border-collapse: collapse;
}

.table-modern-detail thead th {
    background: var(--bg-main) !important;
        color: var(--text-muted) !important;
        font-weight: 800;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border-subtle) !important;
        padding: 1rem 0.85rem;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
}

.table-modern-detail tbody td {
    padding: 1rem 0.85rem;
        border-bottom: 1px solid var(--border-subtle) !important;
        color: var(--text-main);
        vertical-align: middle;
}

.perkara-row:hover td {
    background-color: var(--bg-main) !important;
}

.no-banding {
    font-weight: 800;
        color: var(--brand-green);
        font-size: 0.9rem;
        letter-spacing: -0.01em;
}

.info-sub {
    font-size: 0.725rem;
        font-weight: 600;
        color: var(--text-muted);
}

/* Timeline Badges / Pills */

.timeline-mini {
    display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
}

.step-badge {
    font-size: 0.65rem;
        padding: 2px 8px;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 4px !important;
        letter-spacing: 0.03em;
}

.badge-done {
    background-color: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
}

.badge-wait {
    background-color: #f4f4f5;
        color: #71717a;
        border: 1px solid #e4e4e7;
}

/* Durasi Pill Badges */

.durasi-pill {
    border-radius: 4px !important;
        font-weight: 800;
        padding: 2px 8px;
        font-size: 0.65rem;
}

.durasi-hijau {
    background-color: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
}

.durasi-kuning-muda {
    background-color: #fefde8;
        color: #854d0e;
        border: 1px solid #fef08a;
}

.durasi-kuning-tua {
    background-color: #fefce8;
        color: #a16207;
        border: 1px solid #fde047;
}

.durasi-merah {
    background-color: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
}

@media print {
    .no-print {
            display: none !important;
        }
        .panel-card {
            border: none !important;
        }
        .table-modern-detail th {
            background-color: #f4f4f5 !important;
            color: #000000 !important;
            border-bottom: 2px solid #000000 !important;
        }
        .table-modern-detail td {
            border-bottom: 1px solid #e4e4e7 !important;
        }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/admin/sync_monitoring.blade.php
   SECTION: ADMIN SYNC MONITORING
   ========================================================================== */

/* ========== MODERN SYSTEM CSS VARIABLES ========== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* ========== ASYMMETRICAL HEADER ========== */

.panmud-header {
    background: var(--surface);
        border-bottom: 1px solid var(--border-subtle);
        padding: 2rem 0;
        margin-bottom: 1.5rem;
}

.refresh-badge {
    font-family: ui-monospace, SFMono-Regular, monospace;
        font-size: 0.725rem;
        font-weight: 700;
        background: var(--bg-main);
        color: var(--text-muted);
        border: 1px solid var(--border-subtle);
        border-radius: 4px;
        padding: 4px 10px;
}

/* ========== MODERN CARD SYNC ========== */

.panel-modern:hover {
    border-color: var(--border-strong);
        transform: translateY(-2px);
}

.panel-header-custom {
    padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-subtle);
        background: var(--surface);
        border-radius: 8px 8px 0 0;
}

.card-header-title {
    font-weight: 800;
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--brand-green);
}

.card-header-subtitle {
    font-family: ui-monospace, SFMono-Regular, monospace;
        font-size: 0.7rem;
        color: var(--text-muted);
}

.badge-sync-success {
    background: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
}

.badge-sync-warning {
    background: #fefce8;
        color: #854d0e;
        border: 1px solid #fef08a;
}

.badge-sync-danger {
    background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
}

/* ========== SUMMARY GRID ========== */

.summary-box {
    display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 1rem;
        background: var(--bg-main);
        border-bottom: 1px solid var(--border-subtle);
        text-align: center;
}

.summary-count {
    font-family: ui-monospace, SFMono-Regular, monospace;
        font-weight: 800;
        font-size: 1.25rem;
        display: block;
        line-height: 1;
        margin-bottom: 0.25rem;
}

.summary-label {
    font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
}

.panel-footer-custom {
    padding: 0.85rem 1.25rem;
        background: var(--surface);
        border-radius: 0 0 8px 8px;
}

.progress-premium {
    height: 6px;
        border-radius: 4px;
        background-color: var(--border-subtle);
        overflow: hidden;
}

.progress-premium .progress-bar {
    background: var(--brand-green) !important;
}

/* ========== MODAL STYLE OPTIMIZATION ========== */

.table-modal {
    font-size: 0.8125rem;
        width: 100%;
        border-collapse: collapse;
}

.table-modal thead th {
    background: var(--bg-main);
        color: var(--text-muted);
        font-weight: 800;
        text-transform: uppercase;
        font-size: 0.675rem;
        letter-spacing: 0.05em;
        padding: 0.85rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
}

.table-modal tbody td {
    padding: 0.75rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        vertical-align: middle;
}

.table-modal tbody tr:hover td {
    background-color: var(--bg-main);
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/admin/announcement/index.blade.php
   SECTION: ADMIN ANNOUNCEMENT
   ========================================================================== */

/* ========== MODERN SYSTEM CSS VARIABLES ========== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* ========== ASYMMETRICAL HEADER ========== */

.popup-header {
    background: var(--surface);
        border-bottom: 1px solid var(--border-subtle);
        padding: 1.75rem 0;
        margin-bottom: 1.25rem;
}

/* ========== PANELS & FORM CONTROLS ========== */

/* ========== BUTTONS & BADGES ========== */

.badge-active-green {
    background: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
}

.banner-card {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        overflow: hidden;
        transition: border-color 0.15s ease;
}

.banner-card:hover {
    border-color: var(--border-strong);
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/users/index.blade.php
   SECTION: USERS INDEX
   ========================================================================== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* Asymmetrical Command Header */

/* Minimalist Action Buttons */

/* Industrial Tabs */

.nav-tabs-industrial {
    border-bottom: 1px solid var(--border-subtle);
        gap: 6px;
}

.nav-tabs-industrial .nav-link {
    border: 1px solid transparent;
        border-bottom: none;
        border-radius: 6px 6px 0 0;
        padding: 8px 16px;
        font-family: ui-monospace, SFMono-Regular, monospace;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-muted);
        background: transparent;
        transition: all 0.15s ease;
}

.nav-tabs-industrial .nav-link:hover {
    color: var(--text-main);
        border-color: var(--border-subtle);
}

.nav-tabs-industrial .nav-link.active {
    color: var(--brand-green);
        background: var(--surface);
        border-color: var(--border-subtle) var(--border-subtle) var(--surface);
        border-top: 2px solid var(--brand-green);
}

/* Monospace Badges & Table */

.badge-super-admin {
    background: #fef2f2;
        color: #991b1b;
        border-color: #fecaca;
}

.badge-operator {
    background: #f0fdf4;
        color: #166534;
        border-color: #bbf7d0;
}

.badge-satker {
    background: #eff6ff;
        color: #1e40af;
        border-color: #bfdbfe;
}

.badge-ptsp {
    background: #ecfdf5;
        color: #065f46;
        border-color: #a7f3d0;
}

.badge-default {
    background: #f4f4f5;
        color: #3f3f46;
        border-color: #e4e4e7;
}

.table-monitoring {
    font-size: 0.8125rem;
        width: 100%;
        border-collapse: collapse;
}

.table-monitoring thead th {
    background: var(--bg-main);
        color: var(--text-muted);
        font-weight: 800;
        text-transform: uppercase;
        font-size: 0.65rem;
        letter-spacing: 0.05em;
        padding: 0.85rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
}

.table-monitoring tbody td {
    padding: 0.75rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        vertical-align: middle;
}

/* Modern Switch */

.form-check-input-custom {
    width: 38px;
        height: 20px;
        cursor: pointer;
}

.form-check-input-custom:checked {
    background-color: var(--brand-green);
        border-color: var(--brand-green);
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/users/create.blade.php
   SECTION: USERS CREATE
   ========================================================================== */

/* [Centralized :root variables] */

/* [Centralized body style] */

.form-control-custom,
    .form-select-custom {
    border: 1px solid var(--border-subtle);
        border-radius: 6px;
        padding: 0.5rem 0.85rem;
        font-size: 0.85rem;
        width: 100%;
        background-color: var(--surface);
        color: var(--text-main);
        transition: border-color 0.15s ease;
}

.form-control-custom:focus,
    .form-select-custom:focus {
    border-color: var(--border-strong);
        outline: none;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/users/edit.blade.php
   SECTION: USERS EDIT
   ========================================================================== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* ==========================================================================
   CENTRALIZED FROM: resources/views/users/change-password.blade.php
   SECTION: USERS CHANGE PASSWORD
   ========================================================================== */

/* [Centralized :root variables] */

/* [Centralized body style] */

.btn-toggle-password {
    background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-left: none;
        border-radius: 0 6px 6px 0;
        padding: 0 12px;
        color: var(--text-muted);
        cursor: pointer;
}

.btn-toggle-password:hover {
    background: var(--bg-main);
        color: var(--text-main);
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/putusan_sela/index.blade.php
   SECTION: PUTUSAN SELA INDEX
   ========================================================================== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* HEADER */

/* PANELS & CARDS */

.stats-summary-box {
    background: var(--surface);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            padding: 1rem 1.25rem;
            height: 100%;
}

.stats-value-mono {
    font-family: ui-monospace, SFMono-Regular, monospace;
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 1.1;
            margin: 0.25rem 0;
            color: var(--text-main);
}

.stats-label-mono {
    font-family: ui-monospace, SFMono-Regular, monospace;
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
}

/* INPUTS & LABELS */

/* BUTTONS */

/* MATRIX TABLE */

.table-matrix {
    font-size: 0.775rem;
            width: 100%;
            border-collapse: collapse;
}

.table-matrix thead th {
    background: var(--bg-main);
            color: var(--text-muted);
            font-weight: 800;
            text-transform: uppercase;
            font-size: 0.625rem;
            letter-spacing: 0.05em;
            padding: 0.75rem;
            border-bottom: 1px solid var(--border-subtle);
            border-right: 1px solid var(--border-subtle);
            text-align: center;
}

.table-matrix tbody td {
    padding: 0.75rem;
            border-bottom: 1px solid var(--border-subtle);
            border-right: 1px solid var(--border-subtle);
            vertical-align: middle;
}

.table-matrix tbody tr:hover td {
    background-color: var(--bg-main);
}

.table-matrix th:last-child,
        .table-matrix td:last-child {
    border-right: none;
}

/* BADGES & INTERACTIVE LINKS */

.b-total {
    background: #eef2ff;
            color: #4338ca;
            border-color: #c7d2fe;
}

.link-interactive-mono {
    font-family: ui-monospace, SFMono-Regular, monospace;
            font-weight: 800;
            text-decoration: none;
            padding: 3px 10px;
            border-radius: 4px;
            transition: all 0.15s ease-in-out;
            display: inline-block;
}

.link-interactive-mono:hover {
    background-color: var(--brand-green);
            color: #ffffff !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
                opacity: 0;
                transform: translateY(6px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/putusan_sela/detail.blade.php
   SECTION: PUTUSAN SELA DETAIL
   ========================================================================== */

/* [Centralized :root variables] */

/* [Centralized body style] */

/* HEADER */

/* PANELS & CARDS */

/* BUTTONS */

/* MATRIX TABLE */

/* BADGES */

/* ==========================================================================
   CENTRALIZED FROM: resources/views/laporan/banding_detail.blade.php
   SECTION: LAPORAN BANDING DETAIL
   ========================================================================== */

body {
    font-family: 'Plus Jakarta Sans', sans-serif; 
        background-color: #f4f7fa;
}

.page-heading {
    padding: 2rem 0;
}

/* Card Luxury DNA */

.card-luxury {
    background: #ffffff;
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        overflow: hidden;
}

/* Tabel Detail Presisi */

.table-luxury thead th {
    background: #f8fafc;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        font-weight: 800;
        color: #64748b;
        padding: 1.2rem 1.5rem;
        border-bottom: 2px solid #f1f5f9;
}

.table-luxury tbody td {
    padding: 1.2rem 1.5rem;
        vertical-align: middle;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.875rem;
}

/* Tombol Kembali Melingkar DNA Putusan Sela */

.btn-back {
    width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid #e2e8f0;
        color: #4f46e5;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transition: all 0.3s;
        text-decoration: none;
}

.btn-back:hover {
    background: #4f46e5;
        color: white;
        transform: translateX(-5px);
}

/* Soft Badge DNA */

.badge-soft-ecourt {
    background: #f0fdf4;
        color: #16a34a;
        border: 1px solid #dcfce7;
        font-weight: 700;
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        font-size: 0.75rem;
}

.badge-soft-manual {
    background: #fff1f2;
        color: #e11d48;
        border: 1px solid #ffe4e6;
        font-weight: 700;
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        font-size: 0.75rem;
}

/* Hover effect baris */

.table-luxury tbody tr:hover {
    background-color: #f8fafc; transition: 0.2s;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/laporan/banding_diterima.blade.php
   SECTION: LAPORAN BANDING DITERIMA
   ========================================================================== */

/* Scoped styling to avoid affecting other tables */

.rk1-container .table-rk1 {
    width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.75rem;
        color: #333;
}

.rk1-container .table-rk1 th,
    .rk1-container .table-rk1 td {
    border: 1px solid #cbd5e1;
        padding: 8px 6px;
        text-align: center;
        vertical-align: middle;
}

/* Header Atas Sticky */

.rk1-container thead tr th {
    position: sticky;
        top: 0;
        z-index: 20;
        background-color: #1e293b !important;
        color: #f8fafc;
        font-weight: 600;
        border-color: #334155;
}

.rk1-container .text-vertical {
    writing-mode: vertical-rl;
        transform: rotate(180deg);
        height: 200px;
        
        white-space: nowrap;
        padding: 10px 4px !important;
        text-align: left;
        font-weight: 500;
        letter-spacing: 0.5px;
}

/* Kolom Kiri Sticky */

.rk1-container .sticky-col {
    position: sticky;
        left: 0;
        z-index: 10;
        background-color: #ffffff;
}

.rk1-container .fz-1 {
    left: 0;
        width: 50px;
}

.rk1-container .fz-2 {
    left: 50px;
        min-width: 220px;
        border-right: 2px solid #94a3b8 !important;
}

/* Titik Temu Kiri-Atas */

.rk1-container .sticky-header-col {
    position: sticky;
        left: 0;
        top: 0;
        z-index: 30 !important;
        background-color: #1e293b !important;
}

.rk1-container .fz-2.sticky-header-col {
    left: 50px;
        border-right: 2px solid #0f172a !important;
}

/* Baris Total Bawah Sticky */

.rk1-container .sticky-footer td {
    position: sticky;
        bottom: 0;
        z-index: 25;
        background-color: #e2e8f0 !important;
        font-weight: bold;
        color: #0f172a;
        border-top: 2px solid #94a3b8;
}

.rk1-container .sticky-footer .sticky-col {
    z-index: 26;
}

.rk1-container .bg-jumlah {
    background-color: #0284c7 !important;
        color: #ffffff !important;
}

.rk1-container tbody tr:not(.sticky-footer):hover td:not(.sticky-col) {
    background-color: #f1f5f9;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/laporan/banding_putus.blade.php
   SECTION: LAPORAN BANDING PUTUS
   ========================================================================== */

.table-rk {
    font-size: 10px;
        border-collapse: separate;
        border-spacing: 0;
}

.table-rk td,
    .table-rk th {
    padding: 5px !important;
        border: 1px solid #dee2e6 !important;
}

thead th {
    vertical-align: middle !important;
        text-align: center !important;
        font-weight: 700;
        text-transform: uppercase;
}

.header-dark {
    background-color: #2c3e50 !important;
        color: #ffffff !important;
}

.header-gray {
    background-color: #5d6d7e !important;
        color: #ffffff !important;
}

.header-blue {
    background-color: #2980b9 !important;
        color: #ffffff !important;
}

.header-orange {
    background-color: #f39c12 !important;
        color: #000 !important;
}

.v-head {
    height: 200px;
        min-width: 30px;
        position: relative;
}

.v-head span {
    writing-mode: vertical-rl;
        transform: rotate(180deg);
        display: inline-block;
        text-align: center;
        height: 100%;
        margin: 0 auto;
}

.table-responsive {
    position: relative;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        overflow: auto;
}

thead tr.main-header th {
    position: sticky;
        top: 0;
        z-index: 1000;
}

thead tr.sub-header th {
    position: sticky;
        top: 41px;
        z-index: 999;
}

.sticky-col {
    position: sticky !important;
        z-index: 10;
        background-color: white;
}

.fz-1 {
    left: 0;
        width: 35px;
}

.fz-2 {
    left: 35px;
        width: 160px;
}

.fz-3 {
    left: 195px;
        width: 55px;
}

.fz-4 {
    left: 250px;
        width: 55px;
}

.fz-5 {
    left: 305px;
        width: 55px;
}

.sticky-footer td {
    position: sticky;
        bottom: 0;
        z-index: 1000;
        background-color: #2c3e50 !important;
        color: white !important;
        font-weight: bold;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/laporan/banding_putus_detail.blade.php
   SECTION: LAPORAN BANDING PUTUS DETAIL
   ========================================================================== */

/* Card Luxury DNA */

/* Tabel Detail Presisi */

/* Tombol Kembali Melingkar DNA */

/* Soft Badge DNA */

.badge-soft-success {
    background: #f0fdf4;
        color: #16a34a;
        border: 1px solid #dcfce7;
        font-weight: 700;
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        font-size: 0.75rem;
}

.badge-soft-info {
    background: #eef2ff;
        color: #4f46e5;
        border: 1px solid #e0e7ff;
        font-weight: 700;
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        font-size: 0.75rem;
}

.badge-soft-light {
    background: #f8fafc;
        color: #94a3b8;
        border: 1px solid #e2e8f0;
        font-weight: 600;
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        font-size: 0.75rem;
}

/* Hover effect baris */

/* ==========================================================================
   CENTRALIZED FROM: resources/views/laporan/perkara_diterima.blade.php
   SECTION: LAPORAN PERKARA DITERIMA (RK3)
   ========================================================================== */

body,
    .system-container,
    table,
    th,
    td,
    input,
    button,
    select,
    textarea {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        -webkit-font-smoothing: antialiased;
}

/* [Centralized body style] */

/* ================= HEADER HERO ================= */

/* ================= PANEL & FORM FILTER (SHARP & COMPACT) ================= */

/* ================= TABEL MATRIKS RK.3 (HAIRLINE 1PX & SINKRON) ================= */

.table-rk3 {
    width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.75rem;
        color: var(--text-main);
        white-space: nowrap;
        border-top: 1px solid var(--mat-border);
        border-left: 1px solid var(--mat-border);
}

.table-rk3 th,
    .table-rk3 td {
    border-right: 1px solid var(--mat-border);
        border-bottom: 1px solid var(--mat-border);
        border-top: none;
        border-left: none;
        padding: 5px 6px;
        text-align: center;
        vertical-align: middle;
}

/* Header Baris Utama */

.table-rk3 thead tr.main-header th {
    position: sticky;
        top: 0;
        z-index: 20;
        background-color: var(--mat-header-sticky) !important;
        color: #ffffff !important;
        font-weight: 700;
        border-right: 1px solid var(--mat-border-dark);
        border-bottom: 1px solid var(--mat-border-dark);
        height: 38px;
}

/* Header Klasifikasi Perkara */

.header-group-banner {
    background: var(--mat-header-group) !important;
        color: #ffffff !important;
        font-size: 0.775rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        border-bottom: 2px solid var(--brand-accent) !important;
}

/* Sub-Header Kolom Klasifikasi */

.table-rk3 thead tr.sub-header th {
    position: sticky;
        top: 38px;
        z-index: 20;
        background-color: var(--mat-header-col) !important;
        color: #ffffff !important;
        border-right: 1px solid var(--mat-border-dark);
        border-bottom: 1px solid var(--mat-border-dark);
        height: 220px;
        vertical-align: bottom !important;
        padding: 0 !important;
        min-width: 38px;
        max-width: 42px;
        width: 40px;
        transition: background-color 0.15s ease;
}

.table-rk3 thead tr.sub-header th:hover {
    background-color: var(--mat-header-col-hover) !important;
}

/* Pembungkus Teks Vertikal (Anti-Nabrak) */

.v-head-wrap {
    writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.15;
        height: 205px;
        max-height: 205px;
        text-align: left;
        padding: 8px 6px 12px 6px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
}

.v-head-col {
    vertical-align: bottom !important;
        padding: 0 !important;
        min-width: 44px;
        max-width: 48px;
        width: 46px;
}

.v-head-col .v-head-wrap {
    height: 240px;
        max-height: 240px;
}

/* ================= FREEZE PANE (KOLOM NO & PENGADILAN STICKY) ================= */

.table-rk3 .sticky-col {
    position: sticky;
        z-index: 10;
        background-color: #ffffff;
}

.table-rk3 .fz-1 {
    left: 0;
        min-width: 44px;
        max-width: 44px;
        width: 44px;
        text-align: center;
        font-weight: 500;
        font-feature-settings: "tnum" 1;
}

.table-rk3 .fz-2 {
    left: 44px;
        min-width: 220px;
        max-width: 260px;
        width: 240px;
        text-align: left !important;
        padding-left: 12px !important;
        border-right: 2px solid #0f2d1e !important;
        font-weight: 500;
}

/* Titik Temu Sticky TH dan Kolom Kiri */

.table-rk3 thead th.sticky-col {
    z-index: 35 !important;
        background-color: var(--mat-header-sticky) !important;
        color: #ffffff !important;
}

.table-rk3 thead th.fz-2.sticky-col {
    border-right: 2px solid var(--brand-accent) !important;
}

/* Kolom Total Paling Kanan */

.col-total-header {
    background-color: var(--brand-green-deep) !important;
        border-left: 2px solid var(--brand-accent) !important;
}

.col-total-cell {
    background-color: #f0fdf4 !important;
        color: var(--brand-green) !important;
        font-weight: 500 !important;
        font-feature-settings: "tnum" 1;
        border-left: 2px solid var(--brand-accent) !important;
}

/* ================= DATA BODY & ANGKA REGULAR CLEAN ================= */

.table-matrix-body td {
    font-feature-settings: "tnum" 1;
        font-variant-numeric: tabular-nums;
        font-size: 0.775rem;
        font-weight: 400 !important;
        color: var(--text-main);
        transition: background-color 0.15s ease;
}

/* Efek Hover Baris Penuh */

.table-rk3 tbody tr:not(.row-grand-total):hover td {
    background-color: #f1f8f4 !important;
}

.table-rk3 tbody tr:not(.row-grand-total):hover td.sticky-col {
    background-color: #e5f2eb !important;
        color: var(--brand-green) !important;
}

/* Tanda Strip Halus untuk Sel Kosong / Nol */

.cell-empty {
    color: #cbd5e1 !important;
        font-size: 0.75rem;
        font-weight: 300 !important;
        user-select: none;
}

/* Baris Total Keseluruhan (Bawah) */

.row-grand-total td {
    background-color: var(--brand-green-deep) !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        font-feature-settings: "tnum" 1;
        border-top: 2px solid var(--brand-accent) !important;
        border-bottom: 2px solid var(--brand-accent) !important;
}

.row-grand-total td.sticky-col {
    z-index: 12 !important;
        background-color: var(--brand-green-deep) !important;
        color: #ffffff !important;
}

/* Freeze Pane Paten untuk Baris Total Bawah (Colspan 2) */

.table-rk3 .fz-total-title {
    position: sticky !important;
        left: 0 !important;
        z-index: 15 !important;
        min-width: 284px !important;
        max-width: 284px !important;
        width: 284px !important;
        letter-spacing: 0.05em;
        text-align: left !important;
        padding-left: 12px !important;
        border-right: 2px solid var(--brand-accent) !important;
        background-color: var(--brand-green-deep) !important;
        color: #ffffff !important;
}

/* Media Print Optimization */

@media print {
    .system-header,
        .panel-modern:first-of-type,
        .btn-action-custom,
        form {
            display: none !important;
        }
        .table-matrix-wrapper {
            overflow: visible !important;
            max-height: none !important;
            border: none !important;
        }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/laporan/perkara_putus.blade.php
   SECTION: LAPORAN PERKARA PUTUS (RK4)
   ========================================================================== */

/* [Centralized body style] */

/* ================= HEADER HERO ================= */

/* ================= PANEL & FORM FILTER (SHARP & COMPACT) ================= */

.btn-action-success:hover {
    background-color: #065f46 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(4, 120, 87, 0.25);
}

/* ================= TABEL MATRIKS RK.4 (HAIRLINE 1PX & SINKRON) ================= */

.table-rk4 {
    width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.75rem;
        color: var(--text-main);
        white-space: nowrap;
        border-top: 1px solid var(--mat-border);
        border-left: 1px solid var(--mat-border);
}

.table-rk4 th,
    .table-rk4 td {
    border-right: 1px solid var(--mat-border);
        border-bottom: 1px solid var(--mat-border);
        border-top: none;
        border-left: none;
        padding: 5px 6px;
        text-align: center;
        vertical-align: middle;
}

/* Header Baris Utama */

.table-rk4 thead tr.main-header th {
    position: sticky;
        top: 0;
        z-index: 20;
        background-color: var(--mat-header-sticky) !important;
        color: #ffffff !important;
        font-weight: 700;
        border-right: 1px solid var(--mat-border-dark);
        border-bottom: 1px solid var(--mat-border-dark);
        height: 38px;
}

/* Header Grup Klasifikasi Dikabulkan */

/* Sub-Header Kolom Klasifikasi */

.table-rk4 thead tr.sub-header th {
    position: sticky;
        top: 38px;
        z-index: 20;
        background-color: var(--mat-header-col) !important;
        color: #ffffff !important;
        border-right: 1px solid var(--mat-border-dark);
        border-bottom: 1px solid var(--mat-border-dark);
        height: 220px;
        vertical-align: bottom !important;
        padding: 0 !important;
        min-width: 38px;
        max-width: 42px;
        width: 40px;
        transition: background-color 0.15s ease;
}

.table-rk4 thead tr.sub-header th:hover {
    background-color: var(--mat-header-col-hover) !important;
}

/* Pembungkus Teks Vertikal (Anti-Nabrak) */

.v-head-col {
    vertical-align: bottom !important;
        padding: 0 !important;
        min-width: 38px;
        max-width: 42px;
        width: 40px;
}

/* ================= FREEZE PANE (KOLOM NO & PENGADILAN STICKY) ================= */

.table-rk4 .sticky-col {
    position: sticky;
        z-index: 10;
        background-color: #ffffff;
}

.table-rk4 .fz-1 {
    left: 0;
        min-width: 44px;
        max-width: 44px;
        width: 44px;
        text-align: center;
        font-weight: 500;
        font-feature-settings: "tnum" 1;
}

.table-rk4 .fz-2 {
    left: 44px;
        min-width: 220px;
        max-width: 260px;
        width: 240px;
        text-align: left !important;
        padding-left: 12px !important;
        border-right: 2px solid #0f2d1e !important;
        font-weight: 500;
}

/* Titik Temu Sticky TH dan Kolom Kiri */

.table-rk4 thead th.sticky-col {
    z-index: 35 !important;
        background-color: var(--mat-header-sticky) !important;
        color: #ffffff !important;
}

.table-rk4 thead th.fz-2.sticky-col {
    border-right: 2px solid var(--brand-accent) !important;
}

/* Kolom Sorotan Khusus (Beban, Putus, Sisa) */

.col-beban-cell {
    background-color: #fefce8 !important;
        font-weight: 500 !important;
        font-feature-settings: "tnum" 1;
}

.col-putus-cell {
    background-color: #f0fdf4 !important;
        color: var(--brand-green) !important;
        font-weight: 500 !important;
        font-feature-settings: "tnum" 1;
        border-left: 2px solid var(--brand-accent) !important;
}

.col-sisa-cell {
    background-color: #fef2f2 !important;
        color: #b91c1c !important;
        font-weight: 500 !important;
        font-feature-settings: "tnum" 1;
}

/* ================= DATA BODY & ANGKA REGULAR CLEAN ================= */

/* Efek Hover Baris Penuh */

.table-rk4 tbody tr:not(.row-grand-total):hover td {
    background-color: #f1f8f4 !important;
}

.table-rk4 tbody tr:not(.row-grand-total):hover td.sticky-col {
    background-color: #e5f2eb !important;
        color: var(--brand-green) !important;
}

/* Tanda Strip Halus untuk Sel Kosong / Nol */

/* Baris Total Keseluruhan (Bawah) */

/* Freeze Pane Paten untuk Baris Total Bawah (Colspan 2) */

.table-rk4 .fz-total-title {
    position: sticky !important;
        left: 0 !important;
        z-index: 15 !important;
        min-width: 284px !important;
        max-width: 284px !important;
        width: 284px !important;
        letter-spacing: 0.05em;
        text-align: left !important;
        padding-left: 12px !important;
        border-right: 2px solid var(--brand-accent) !important;
        background-color: var(--brand-green-deep) !important;
        color: #ffffff !important;
}

/* Media Print Optimization */

/* ==========================================================================
   CENTRALIZED FROM: resources/views/laporan/putusan_sela.blade.php
   SECTION: LAPORAN PUTUSAN SELA
   ========================================================================== */

/* Card Mewah */

.card-luxury {
    background: #ffffff;
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
        overflow: hidden;
}

/* Tabel Presisi */

/* Tombol Kembali Melingkar */

/* Input & Badge */

.badge-soft-success {
    background: #f0fdf4;
        color: #16a34a;
        border: 1px solid #dcfce7;
        font-weight: 700;
        padding: 0.5rem 1rem;
        border-radius: 10px;
}

/* Efek Hover Baris */

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/activity-log-index.blade.php
   SECTION: LIVEWIRE ACTIVITY LOG
   ========================================================================== */

/* [Centralized :root variables] */

body,
        div,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        table,
        th,
        td,
        button,
        input,
        select {
    font-family: var(--font-inter) !important;
            -webkit-font-smoothing: antialiased;
}

/* [Centralized body style] */

/* HEADER */

/* PANELS & CARDS */

.stats-card-industrial {
    background: var(--brand-green);
            border: 1px solid var(--brand-green-dark);
            border-radius: 0px !important;
            padding: 1.25rem;
            color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.stats-value-mono {
    font-size: 2.25rem;
            font-weight: 600;
            line-height: 1;
            margin: 0.5rem 0;
            color: #ffffff;
}

.stats-label-mono {
    font-size: 0.7rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--brand-accent);
}

/* USER RANKING LIST */

.user-list-item-industrial {
    display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-subtle);
}

.rank-number {
    font-weight: 500;
            font-size: 0.75rem;
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background: var(--bg-main);
            color: var(--text-muted);
            border: 1px solid var(--border-subtle);
}

.rank-top {
    background: #fefce8;
            color: #854d0e;
            border-color: #fef08a;
}

.progress-bar-industrial {
    height: 4px;
            background: var(--bg-main);
            border-radius: 2px;
            overflow: hidden;
}

.progress-fill {
    background: var(--brand-accent);
            height: 100%;
}

/* FORM CONTROLS & BUTTONS */

/* DATA TABLE & BADGES */

.table-monitoring {
    font-size: 0.825rem;
            width: 100%;
            border-collapse: collapse;
            font-weight: 300;
}

.table-monitoring thead th {
    background: var(--bg-main);
            color: var(--text-muted);
            font-weight: 500;
            text-transform: uppercase;
            font-size: 0.675rem;
            letter-spacing: 0.05em;
            padding: 0.85rem 0.75rem;
            border-bottom: 1px solid var(--border-subtle);
}

.table-monitoring tbody tr {
    transition: background-color 0.15s ease;
}

.table-monitoring tbody tr:hover td {
    background-color: #f1f5f9;
}

.ip-code-mono {
    background: var(--bg-main);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            color: var(--text-muted);
            border: 1px solid var(--border-subtle);
            display: inline-block;
            font-weight: 300;
}

/* CUSTOM PAGINATION STYLING */

.custom-pagination-container .pagination {
    margin: 0;
            gap: 4px;
}

.custom-pagination-container .pagination .page-item .page-link {
    border-radius: 6px !important;
            border: 1px solid var(--border-subtle) !important;
            color: var(--brand-green) !important;
            background-color: #ffffff !important;
            font-size: 0.75rem;
            font-weight: 400;
            padding: 0.375rem 0.75rem;
            box-shadow: none !important;
}

.custom-pagination-container .pagination .page-item.active .page-link {
    background-color: var(--brand-green) !important;
            border-color: var(--brand-green-dark) !important;
            color: #ffffff !important;
}

.custom-pagination-container .pagination .page-item.disabled .page-link {
    background-color: var(--bg-main) !important;
            color: var(--text-muted) !important;
            opacity: 0.6;
}

.custom-pagination-container .pagination .page-item .page-link:hover:not(.active) {
    background-color: var(--bg-main) !important;
            border-color: var(--border-strong) !important;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/arsip-aktif-dashboard.blade.php
   SECTION: LIVEWIRE ARSIP AKTIF DASHBOARD
   ========================================================================== */

.border-white-subtle-custom {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

@media (max-width: 576px) {
    .divide-light-mobile .col-4 {
                width: 100% !important;
                border-right: none !important;
                border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
                padding-bottom: 15px;
                padding-top: 10px;
            }
            .divide-light-mobile .col-4:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }
            .fs-3-mobile {
                font-size: calc(1.3rem + .6vw) !important;
            }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/bas.blade.php
   SECTION: LIVEWIRE BAS
   ========================================================================== */

.pagination-compact nav > div:first-child {
    display: none !important;
}

.pagination-compact .pagination {
    margin-bottom: 0 !important; font-size: 0.72rem;
}

.pagination-compact .page-link {
    padding: 0.25rem 0.55rem; font-size: 0.72rem; border-radius: 2px !important;
}

.pagination-compact .page-item.active .page-link {
    background-color: #143522; border-color: #143522;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/kalkulator-biaya-perkara.blade.php
   SECTION: LIVEWIRE KALKULATOR BIAYA
   ========================================================================== */

/* ============================================
               FONT SYSTEM — TIPIS, ELEGAN, MUDAH DIBACA
               ============================================ */

.kalkulator-biaya {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                font-weight: 400;
                font-size: 0.875rem;
                line-height: 1.5;
                letter-spacing: 0.005em;
                color: #1e293b;
                font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
}

/* Proteksi Font-Family Pengecualian FontAwesome & Monospace */

.kalkulator-biaya *:not(.font-monospace):not(.custom-input-field):not(.custom-input-unit):not(.fa-solid):not(.fas):not(.far):not(.fab):not(.fa) {
    font-family: inherit;
}

/* Mandatory Fix: Proteksi FontAwesome agar tidak tertimpa font Inter */

.kalkulator-biaya i.fa-solid,
            .kalkulator-biaya i.fas,
            .kalkulator-biaya i.far,
            .kalkulator-biaya i.fab,
            .kalkulator-biaya i.fa {
    font-family: "Font Awesome 6 Free" !important;
                font-weight: 900 !important;
}

.kalkulator-biaya button,
            .kalkulator-biaya input,
            .kalkulator-biaya select,
            .kalkulator-biaya textarea,
            .kalkulator-biaya table,
            .kalkulator-biaya th,
            .kalkulator-biaya td,
            .kalkulator-biaya label,
            .kalkulator-biaya h1,
            .kalkulator-biaya h2,
            .kalkulator-biaya h3,
            .kalkulator-biaya h4,
            .kalkulator-biaya p,
            .kalkulator-biaya span,
            .kalkulator-biaya div {
    font-family: inherit;
}

.kalkulator-biaya .font-monospace,
            .kalkulator-biaya .custom-input-field,
            .kalkulator-biaya .custom-input-unit {
    font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
                font-weight: 400;
                font-feature-settings: 'tnum' 1, 'zero' 1, 'cv02' 1;
                letter-spacing: -0.005em;
}

/* WEIGHT SYSTEM */

.kalkulator-biaya h1,
            .kalkulator-biaya .h1 {
    font-weight: 500;
                letter-spacing: -0.015em;
}

.kalkulator-biaya .fw-bold,
            .kalkulator-biaya .fw-semibold,
            .kalkulator-biaya strong,
            .kalkulator-biaya b {
    font-weight: 500 !important;
}

.kalkulator-biaya .fw-normal,
            .kalkulator-biaya p,
            .kalkulator-biaya span,
            .kalkulator-biaya td,
            .kalkulator-biaya label {
    font-weight: 400;
}

.kalkulator-biaya .text-uppercase {
    font-weight: 500;
                letter-spacing: 0.04em;
}

.kalkulator-biaya thead th {
    font-weight: 500 !important;
                letter-spacing: 0.06em;
}

/* KONTRAS WARNA */

.kalkulator-biaya .text-muted {
    color: #64748b !important;
}

.kalkulator-biaya .text-secondary {
    color: #475569 !important;
}

.kalkulator-biaya .text-dark {
    color: #0f172a !important;
}

/* ANIMASI */

.fade-in-ui {
    animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.table-row-active {
    transition: background-color 0.15s ease;
}

.table-row-active:hover {
    background-color: #f8fafc !important;
}

/* HILANGKAN SPINNER BROWSER */

input[type=number]::-webkit-inner-spin-button,
            input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
                margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
                appearance: textfield;
}

/* INPUT BOX SIKU TERKUNCI (LOCKED GRID) */

.custom-input-box {
    display: flex;
                align-items: center;
                border: 1px solid #cbd5e1;
                background: #ffffff;
                height: 28px;
                width: 135px;
                
                transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.custom-input-box:focus-within {
    border-color: #0f5132 !important;
                box-shadow: 0 0 0 2px rgba(15, 81, 50, 0.15);
}

.custom-input-field {
    border: none !important;
                outline: none !important;
                background: transparent;
                width: 100%;
                min-width: 0;
                height: 100%;
                padding: 0 6px;
                text-align: right;
                font-weight: 500;
                font-size: 0.8rem;
                color: #0f172a;
}

.custom-input-field::placeholder {
    color: #94a3b8;
                font-weight: 400;
}

/* FIXED WIDTH BADGE SATUAN (LURUS TEGAK SEMPURNA) */

.custom-input-unit {
    background: #f1f5f9;
                border-left: 1px solid #cbd5e1;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 4px;
                width: 58px;
                min-width: 58px;
                max-width: 58px;
                font-size: 0.65rem;
                color: #475569;
                white-space: nowrap;
                user-select: none;
                overflow: hidden;
                text-overflow: ellipsis;
                flex-shrink: 0;
}

/* AKSESIBILITAS */

.btn:focus-visible,
            .custom-input-field:focus-visible {
    outline: 2px solid #d97706;
                outline-offset: 2px;
}

.sticky-bottom-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* MODAL TEMA SIAPPTA */

.modal-sippta .modal-content {
    border-radius: 0 !important;
                border: none !important;
                border-left: 4px solid #d97706 !important;
                box-shadow: 0 20px 40px -10px rgba(7, 39, 24, 0.25) !important;
}

.modal-sippta .modal-header {
    border-bottom: none !important;
}

.modal-sippta .modal-footer {
    border-top: none !important;
}

.modal-sippta .modal-title {
    font-size: 0.9rem !important;
                font-weight: 500 !important;
                letter-spacing: 0.04em !important;
                color: #072718 !important;
}

.modal-sippta .modal-body {
    font-size: 0.85rem !important;
                color: #475569 !important;
                line-height: 1.5 !important;
}

.modal-sippta .btn-close {
    box-shadow: none !important;
}

.modal-sippta .btn-close:focus-visible {
    outline: 2px solid #d97706 !important;
                outline-offset: 2px !important;
}

/* TOAST TEMA SIAPPTA */

.toast-sippta {
    border-radius: 0 !important;
                border: none !important;
                border-left: 4px solid #0f5132 !important;
                background: #ffffff !important;
                box-shadow: 0 10px 25px -5px rgba(7, 39, 24, 0.2) !important;
}

.toast-sippta .toast-body {
    font-family: 'Inter', sans-serif !important;
                font-size: 0.825rem !important;
                font-weight: 500 !important;
                color: #0f5132 !important;
}

/* RESPONSIF */

@media (max-width: 768px) {
    .table-responsive {
                    -webkit-overflow-scrolling: touch;
                }
                .table th,
                .table td {
                    white-space: nowrap;
                }
}

@media (max-width: 576px) {
    .custom-input-box {
                    width: 110px !important;
                }
                .custom-input-unit {
                    width: 42px !important;
                    min-width: 42px !important;
                    max-width: 42px !important;
                    font-size: 0.6rem;
                    padding: 0 2px;
                }
                .header-actions {
                    width: 100%;
                    flex-wrap: wrap;
                }
}

@keyframes fadeIn {
    from {
                    opacity: 0;
                    transform: translateY(4px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-ui {
                    animation: none;
                }
                .table-row-active,
                .custom-input-box {
                    transition: none;
                }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/kasasi-satker.blade.php
   SECTION: LIVEWIRE KASASI SATKER
   ========================================================================== */

.table-modern-card {
    background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
            overflow: hidden;
}

.table-modern {
    width: 100%;
            margin-bottom: 0;
            border-collapse: separate;
            border-spacing: 0;
}

.table-modern thead th {
    background: #f8fafc;
            color: #475569;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 14px 16px;
            border-bottom: 2px solid #e2e8f0;
            border-top: none;
            white-space: nowrap;
}

.table-modern tbody tr {
    transition: all 0.15s ease-in-out;
            border-bottom: 1px solid #f1f5f9;
}

.table-modern tbody tr:hover {
    background-color: #f8fafc;
            box-shadow: inset 3px 0 0 #10b981;
}

.table-modern tbody td {
    padding: 14px 16px;
            vertical-align: middle;
            border-bottom: 1px solid #f1f5f9;
}

.table-modern tbody tr:last-child td {
    border-bottom: none;
}

.row-num-badge {
    display: inline-block;
            font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
            font-size: 0.75rem;
            font-weight: 600;
            color: #64748b;
            background: #f1f5f9;
            padding: 2px 6px;
            border-radius: 4px;
}

.satker-pill {
    display: inline-block;
            background: #f1f5f9;
            color: #0f172a;
            font-weight: 600;
            font-size: 0.72rem;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid #e2e8f0;
            letter-spacing: 0.03em;
}

.badge-amar-tolak {
    background-color: #fff1f2;
            color: #e11d48;
            border: 1px solid #fecdd3;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            letter-spacing: 0.04em;
}

.badge-amar-kabul {
    background-color: #ecfdf5;
            color: #059669;
            border: 1px solid #a7f3d0;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            letter-spacing: 0.04em;
}

.badge-amar-no {
    background-color: #fffbeb;
            color: #d97706;
            border: 1px solid #fde68a;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            letter-spacing: 0.04em;
}

.badge-doc-status {
    display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.72rem;
            font-weight: 600;
}

.badge-doc-status.lengkap {
    background-color: #ecfdf5;
            color: #065f46;
            border: 1px solid #a7f3d0;
}

.badge-doc-status.pending {
    background-color: #fff1f2;
            color: #9f1239;
            border: 1px solid #fecdd3;
}

.doc-dot {
    width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
}

.doc-dot-green {
    background-color: #10b981;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.doc-dot-red {
    background-color: #ef4444;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.btn-modern-icon {
    display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            color: #475569;
            transition: all 0.15s ease;
            text-decoration: none;
}

.btn-modern-icon:hover {
    border-color: #cbd5e1;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.btn-modern-icon.pdf:hover {
    color: #dc2626;
            border-color: #fca5a5;
            background-color: #fef2f2;
}

.btn-modern-icon.delete:hover {
    color: #dc2626;
            border-color: #fca5a5;
            background-color: #fef2f2;
}

.btn-upload-satker {
    display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 6px;
            background: #ecfdf5;
            color: #047857;
            border: 1px solid #a7f3d0;
            font-size: 0.75rem;
            font-weight: 600;
            transition: all 0.15s ease;
}

.btn-upload-satker:hover {
    background: #047857;
            color: #ffffff;
            border-color: #047857;
            box-shadow: 0 2px 4px rgba(4, 120, 87, 0.2);
            transform: translateY(-1px);
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/laporan-rk1.blade.php
   SECTION: LIVEWIRE LAPORAN RK1
   ========================================================================== */

/* [Centralized body style] */

/* ================= HEADER HERO ================= */

/* ================= PANEL & FORM FILTER ================= */

/* ================= TABEL MATRIKS RK.1 (SINKRON, TEGAK & RAPI) ================= */

.table-rk {
    width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.75rem;
            color: var(--text-main);
            white-space: nowrap;
            font-family: var(--font-sans);
            border-top: 1px solid var(--mat-border);
            border-left: 1px solid var(--mat-border);
}

.table-rk th,
        .table-rk td {
    border-right: 1px solid var(--mat-border);
            border-bottom: 1px solid var(--mat-border);
            border-top: none;
            border-left: none;
            padding: 5px 6px;
            text-align: center;
            vertical-align: middle;
}

/* Baris Header Atas */

.table-rk thead tr.main-header th {
    position: sticky;
            top: 0;
            z-index: 20;
            background-color: var(--mat-header-sticky) !important;
            color: #ffffff !important;
            font-weight: 700;
            border-right: 1px solid var(--mat-border-dark);
            border-bottom: 1px solid var(--mat-border-dark);
            height: 38px;
}

/* Header Grup Klasifikasi */

/* Baris Sub-Header Vertikal (Ketinggian Terkendali & Garis Halus) */

.table-rk thead tr.sub-header th {
    position: sticky;
            top: 38px;
            z-index: 20;
            background-color: var(--mat-header-col) !important;
            color: #ffffff !important;
            border-right: 1px solid var(--mat-border-dark);
            border-bottom: 1px solid var(--mat-border-dark);
            height: 220px;
            vertical-align: bottom !important;
            padding: 0 !important;
            min-width: 38px;
            max-width: 42px;
            width: 40px;
            transition: background-color 0.15s ease;
}

.table-rk thead tr.sub-header th:hover {
    background-color: var(--mat-header-col-hover) !important;
}

/* Pembungkus Teks Vertikal (Anti-Nabrak) */

/* ================= FREEZE PANE (KOLOM NO & SATKER STICKY) ================= */

.table-rk .sticky-col {
    position: sticky;
            z-index: 10;
            background-color: #ffffff;
}

.table-rk .fz-1 {
    left: 0;
            min-width: 44px;
            max-width: 44px;
            width: 44px;
            text-align: center;
            font-weight: 500;
}

.table-rk .fz-2 {
    left: 44px;
            min-width: 220px;
            max-width: 260px;
            width: 240px;
            text-align: left !important;
            padding-left: 12px !important;
            border-right: 2px solid #0f2d1e !important;
            font-weight: 500;
}

/* Titik Temu Sticky TH dan Kolom Kiri (Lapisan Tertinggi) */

.table-rk thead th.sticky-col {
    z-index: 35 !important;
            background-color: var(--mat-header-sticky) !important;
            color: #ffffff !important;
}

.table-rk thead th.fz-2.sticky-col {
    border-right: 2px solid var(--brand-accent) !important;
}

/* Kolom Total Paling Kanan */

.col-total-cell {
    background-color: #f8fafc !important;
            color: var(--brand-green) !important;
            font-weight: 500 !important;
            border-left: 2px solid var(--brand-accent) !important;
}

/* ================= BODY DATA & TABULAR NUMS ================= */

.table-matrix-body td {
    font-family: 'Inter', sans-serif !important;
            font-feature-settings: "tnum" 1;
            font-variant-numeric: tabular-nums;
            font-size: 0.775rem;
            font-weight: 400 !important;
            color: var(--text-main);
            transition: background-color 0.15s ease;
}

/* Efek Hover Baris Penuh */

.table-rk tbody tr:not(.row-grand-total):hover td {
    background-color: #f1f8f4 !important;
}

.table-rk tbody tr:not(.row-grand-total):hover td.sticky-col {
    background-color: #e5f2eb !important;
            color: var(--brand-green) !important;
}

/* Tombol Angka Interaktif (Regular / Non-Bold / Clean Text) */

.btn-link-detail {
    background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            font-family: 'Inter', sans-serif !important;
            font-feature-settings: "tnum" 1;
            font-weight: 400 !important;
            font-size: 0.775rem;
            color: var(--text-main) !important;
            cursor: pointer;
            text-decoration: none !important;
            display: inline-block;
            line-height: 1;
            transition: color 0.15s ease;
}

.btn-link-detail:hover {
    color: var(--brand-accent) !important;
            text-decoration: none !important;
            background: transparent !important;
}

/* Tanda Strip Halus untuk Sel Kosong */

/* Baris Total Keseluruhan (Bawah) */

/* ================= MODAL SIKU-SIKU TAJAM (SHARP & REGULAR CLEAN) ================= */

.modal-content {
    border-radius: 0 !important;
            border: 1px solid var(--border-strong) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            font-family: var(--font-sans);
}

.modal-header {
    border-radius: 0 !important;
            background-color: var(--brand-green) !important;
            color: #ffffff;
            border-bottom: 2px solid var(--brand-accent);
}

.modal-footer {
    border-radius: 0 !important;
}

#modalRincianPerkara,
        #modalRincianPerkara table,
        #modalRincianPerkara table td,
        #modalRincianPerkara .badge-mono {
    font-family: 'Inter', sans-serif !important;
            font-weight: 400 !important;
}

#modalRincianPerkara table th {
    font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            letter-spacing: 0.03em;
}

#modalRincianPerkara .modal-title {
    font-weight: 600 !important;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/laporan-rk2.blade.php
   SECTION: LIVEWIRE LAPORAN RK2
   ========================================================================== */

/* [Centralized body style] */

/* ================= HEADER HERO ================= */

/* ================= PANEL & FORM FILTER ================= */

/* ================= TABEL MATRIKS RK.2 (HAIRLINE 1PX & SINKRON) ================= */

.table-rk {
    width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.75rem;
            color: var(--text-main);
            white-space: nowrap;
            border-top: 1px solid var(--mat-border);
            border-left: 1px solid var(--mat-border);
}

/* Baris Header Atas */

/* Header Grup Klasifikasi */

/* Sub-Header Kolom Klasifikasi 40 Jenis */

/* Pembungkus Teks Vertikal (Anti-Nabrak) */

/* Khusus teks vertikal pada kolom header rowspan=2 di baris utama */

.table-rk thead tr.main-header th.v-head-col {
    vertical-align: bottom !important;
            padding: 0 !important;
            min-width: 38px;
            max-width: 42px;
            width: 40px;
}

.table-rk thead tr.main-header th.v-head-col .v-head-wrap {
    height: 240px;
            max-height: 240px;
}

/* ================= FREEZE PANE (KOLOM NO & SATKER STICKY) ================= */

.table-rk .fz-1 {
    left: 0;
            min-width: 44px;
            max-width: 44px;
            width: 44px;
            text-align: center;
            font-weight: 500;
            font-feature-settings: "tnum" 1;
}

/* Titik Temu Sticky TH dan Kolom Kiri */

/* Kolom Sorotan Total & Sisa */

/* ================= DATA BODY & ANGKA CLEAN (NON-BOLD) ================= */

/* Efek Hover Baris Penuh */

/* Tombol Angka Interaktif (Regular / Clean Text / Tanpa Kotak / Tanpa Underline) */

.btn-link-detail {
    background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            font-feature-settings: "tnum" 1;
            font-weight: 400 !important;
            font-size: 0.775rem;
            color: var(--text-main) !important;
            cursor: pointer;
            text-decoration: none !important;
            display: inline-block;
            line-height: 1;
            transition: color 0.15s ease;
}

/* Tanda Strip Halus untuk Sel Kosong / Nol */

/* Baris Total Keseluruhan (Bawah) */

/* ================= MODAL SIKU-SIKU TAJAM (SHARP & REGULAR CLEAN) ================= */

.modal-content {
    border-radius: 0 !important;
            border: 1px solid var(--border-strong) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

#modalRincianPerkara,
        #modalRincianPerkara table,
        #modalRincianPerkara table td,
        #modalRincianPerkara .badge-mono {
    font-weight: 400 !important;
}

#modalRincianPerkara table th {
    font-weight: 600 !important;
            letter-spacing: 0.03em;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/monitor-audit-trail.blade.php
   SECTION: LIVEWIRE MONITOR AUDIT TRAIL
   ========================================================================== */

/* --- TEMA WARNA BAWAN --- */

.premium-header {
    background: linear-gradient(135deg, #4a154b 0%, #7c1a22 50%, #b81d24 100%);
            border-bottom: 4px solid #ffc107;
}

.table-custom thead {
    background-color: #212529;
            color: #ffffff;
}

.table-hover-custom tbody tr.main-row {
    transition: all 0.2s ease;
            cursor: pointer;
}

.table-hover-custom tbody tr.main-row:hover {
    background-color: #f8f9fa !important;
            box-shadow: inset 4px 0 0 #b81d24;
}

/* Badge Aksi */

.badge-tambah {
    background-color: #d1e7dd;
            color: #0f5132;
            border: 1px solid #badbcc;
}

.badge-ubah {
    background-color: #fff3cd;
            color: #664d03;
            border: 1px solid #ffecb5;
}

.badge-hapus {
    background-color: #f8d7da;
            color: #842029;
            border: 1px solid #f5c2c7;
}

.badge-lainnya {
    background-color: #e2e3e5;
            color: #41464b;
            border: 1px solid #d3d6d8;
}

/* Pulse Dot */

.live-pulse-dot {
    width: 8px;
            height: 8px;
            background-color: #198754;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
            animation: pulse-green 1.5s infinite;
}

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

/* --- STYLE KHUSUS MOBILE CARD --- */

.mobile-card-log {
    background: #ffffff;
            border-radius: 12px;
            border: 1px solid #eef0f2;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
            margin-bottom: 12px;
            transition: all 0.2s ease;
}

.mobile-card-log:active {
    background-color: #f8f9fa;
}

/* Penyesuaian responsif ekstra ketat karena adanya sidebar */

@media (max-width: 1200px) {
    .chart-container-responsive {
                height: 165px !important;
            }
            .page-title {
                font-size: 1.1rem !important;
            }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/monitor-live-keuangan.blade.php
   SECTION: LIVEWIRE MONITOR LIVE KEUANGAN
   ========================================================================== */

.premium-header-keuangan {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
            border-bottom: 4px solid #00b4db;
}

.table-custom thead {
    background-color: #1a252f;
            color: #ffffff;
}

.table-hover-custom tbody tr.main-row:hover {
    background-color: #f1f8ff !important;
            box-shadow: inset 4px 0 0 #00b4db;
}

/* Indicator Dots */

.live-pulse-dot-green {
    width: 8px;
            height: 8px;
            background-color: #10b981;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: pulse-green 1.5s infinite;
}

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

.mobile-scroll-wrapper {
    overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            background: #ffffff;
            border-radius: 12px;
}

@media (max-width: 768px) {
    .table-custom {
                min-width: 1000px;
            }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/monitoring-kasasi.blade.php
   SECTION: LIVEWIRE MONITORING KASASI
   ========================================================================== */

.table-modern tbody tr:hover {
    background-color: #f8fafc;
            box-shadow: inset 3px 0 0 var(--brand-green, #10b981);
}

/* Nomor Urut Card */

/* Pill Satker & Jenis */

/* Amar Putusan Pills */

/* Status Dokumen Pills */

/* Action Buttons */

.btn-modern-icon.upload {
    color: #047857;
            border-color: #a7f3d0;
            background-color: #ecfdf5;
}

.btn-modern-icon.upload:hover {
    background-color: #047857;
            color: #ffffff;
            border-color: #047857;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/perkara-banding.blade.php
   SECTION: LIVEWIRE PERKARA BANDING
   ========================================================================== */

.header-nav {
    height: 11vh;
            padding: 0 3vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 2px solid #2563eb;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.main-content {
    height: 83vh;
            padding: 2.5vh 3vw;
            display: flex;
            flex-direction: column;
            gap: 2.5vh;
}

.glass-card {
    background: var(--glass-bg);
            backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.row-hero {
    height: 28vh;
}

.hero-card {
    height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2.2vh 1.2vw;
            text-align: center;
            position: relative;
            overflow: hidden;
}

.hero-card::before {
    content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--card-accent, #2563eb);
}

.label-sub {
    font-size: 0.85rem;
            font-weight: 800;
            color: #64748b;
            letter-spacing: 1.5px;
            text-transform: uppercase;
}

.value-hero {
    font-size: 4.2rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -2px;
            margin: 0.5vh 0;
}

.row-bottom {
    flex: 1;
            min-height: 0;
}

.box-title {
    font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: 1px;
            color: #1e293b;
            border-bottom: 2px solid #f1f5f9;
            padding-bottom: 1.5vh;
            margin-bottom: 2vh;
            display: flex;
            align-items: center;
            text-transform: uppercase;
}

.reg-card {
    background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 2.5vh 2vw;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

#clock {
    font-size: 2.8rem;
            font-weight: 800;
            color: #1e3a8a;
            line-height: 1;
            font-family: monospace;
}

.footer-nav {
    height: 6vh;
            padding: 0 3vw;
            background: #1e293b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 700;
            color: #cbd5e1;
            font-size: 0.85rem;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/pk-satker.blade.php
   SECTION: LIVEWIRE PK SATKER
   ========================================================================== */

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/public-keadaan-perkara.blade.php
   SECTION: LIVEWIRE PUBLIC KEADAAN PERKARA
   ========================================================================== */

@keyframes shrinkLineSixty {
    0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
}

.animate-progress-line-sixty {
    animation: shrinkLineSixty 60s linear infinite;
}

.align-row {
    transition: background-color 0.1s ease;
}

.align-row:hover {
    background-color: #f1f5f9 !important;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%,
            100% {
                opacity: 1;
            }
            50% {
                opacity: .4;
            }
}

.font-sans {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/rekap-ecourt-public.blade.php
   SECTION: LIVEWIRE REKAP ECOURT PUBLIC
   ========================================================================== */

body,
        div,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        table,
        th,
        td,
        button,
        input,
        select {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
            -webkit-font-smoothing: antialiased;
}

.mono-num {
    font-family: 'JetBrains Mono', monospace !important;
}

/* HERO BANNER SECTION */

.portal-hero {
    background: linear-gradient(135deg, #02361c 0%, #046A38 50%, #00875A 100%);
            border-radius: 0 0 24px 24px;
            padding: 3rem 1.5rem 4.5rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(4, 106, 56, 0.15);
}

.portal-hero::before {
    content: "";
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #FFDF00;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 6px;
}

.hero-title {
    color: #FFFFFF;
            font-weight: 800;
            font-size: clamp(1.6rem, 3.2vw, 2.4rem);
            letter-spacing: -0.02em;
            line-height: 1.25;
            margin-top: 0.75rem;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
            font-size: 0.95rem;
            max-width: 680px;
            font-weight: 400;
            line-height: 1.6;
}

.hero-illustration {
    width: 140px;
            height: 140px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            border: 2px solid rgba(255, 255, 255, 0.25);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* METRIC CARDS OVERLAP */

.metric-container {
    margin-top: -3rem;
            position: relative;
            z-index: 10;
}

.stat-card-modern {
    background: var(--surface-card);
            border-radius: 16px;
            border: 1px solid var(--border-card);
            padding: 1.25rem 1.5rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
            transition: all 0.2s ease-in-out;
            height: 100%;
}

.stat-card-modern:hover {
    transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(4, 106, 56, 0.08);
            border-color: #cbd5e1;
}

.stat-icon-bubble {
    width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
}

/* TOP 3 PODIUM */

.podium-card {
    background: #FFFFFF;
            border: 1px solid #E2E8F0;
            border-radius: 14px;
            padding: 1rem 1.2rem;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.podium-rank-badge {
    width: 34px;
            height: 34px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.95rem;
}

/* FILTER & DATA PANEL */

.portal-panel {
    background: #FFFFFF;
            border-radius: 18px;
            border: 1px solid var(--border-card);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
            overflow: hidden;
}

.filter-input-modern {
    border: 1.5px solid #E2E8F0;
            border-radius: 10px;
            padding: 0.6rem 0.9rem;
            font-size: 0.875rem;
            transition: all 0.15s ease;
            background-color: #F8FAFC;
}

.filter-input-modern:focus {
    background-color: #FFFFFF;
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 3px rgba(4, 106, 56, 0.12);
            outline: none;
}

.btn-portal {
    border-radius: 10px;
            padding: 0.6rem 1.1rem;
            font-weight: 600;
            font-size: 0.825rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1.5px solid #E2E8F0;
            background: #FFFFFF;
            color: var(--text-dark);
            transition: all 0.15s ease;
            cursor: pointer;
}

.btn-portal:hover {
    background: #F8FAFC;
            border-color: #94A3B8;
}

.btn-portal-primary {
    background: var(--brand-primary);
            border-color: var(--brand-primary);
            color: #FFFFFF;
}

.btn-portal-primary:hover {
    background: var(--brand-dark);
            border-color: var(--brand-dark);
            color: #FFFFFF;
}

/* TABLE STYLING */

.table-portal thead th {
    background: #F8FAFC;
            color: #475569;
            font-size: 0.725rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 0.9rem 1rem;
            border-bottom: 2px solid #E2E8F0;
            border-top: none;
}

.table-portal tbody td {
    padding: 0.85rem 1rem;
            vertical-align: middle;
            border-bottom: 1px solid #F1F5F9;
            font-size: 0.875rem;
}

.table-portal tbody tr:hover {
    background-color: #F8FAF9;
}

.progress-pill {
    height: 8px;
            border-radius: 999px;
            background-color: #E2E8F0;
            overflow: hidden;
            width: 85px;
}

.progress-fill {
    height: 100%;
            border-radius: 999px;
            transition: width 0.3s ease;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/relaas-doc.blade.php
   SECTION: LIVEWIRE RELAAS DOC
   ========================================================================== */

.btn-stat-clean {
    background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            padding: 2px 6px !important;
            margin: 0 !important;
            cursor: pointer !important;
            text-decoration: none !important;
            display: inline-block;
            font-size: inherit;
            border-radius: 4px;
            transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
}

.btn-stat-clean:hover {
    background-color: rgba(15, 23, 42, 0.06) !important;
            transform: scale(1.04);
}

.btn-stat-clean:active {
    transform: scale(0.98);
}

.badge-cc-danger {
    font-family: ui-monospace, SFMono-Regular, monospace;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            background-color: #fef2f2;
            color: #dc2626;
            border: 1px solid #fca5a5;
            display: inline-block;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
}

.badge-cc-danger:hover {
    background-color: #fee2e2;
            border-color: #f87171;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/admin/kelola-item-biaya.blade.php
   SECTION: LIVEWIRE ADMIN KELOLA ITEM BIAYA
   ========================================================================== */

.fade-in-ui {
    animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-backdrop-smooth {
    background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
}

.modal-dialog-smooth {
    animation: modalSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.table-row-compact:hover {
    background-color: #f8fafc !important;
}

@keyframes fadeIn {
    from {
                opacity: 0;
                transform: translateY(3px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
}

@keyframes modalSlideDown {
    from {
                opacity: 0;
                transform: translateY(-8px) scale(0.99);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/livewire/placeholder/loading-skeleton.blade.php
   SECTION: LIVEWIRE LOADING SKELETON
   ========================================================================== */

/* 1. ANIMASI GRADASI AURORA & SAPUAN CAHAYA CAIR (FLUID WAVE) */

.premium-skeleton-loader .bg-secondary-subtle {
    position: relative;
        overflow: hidden;
        background-color: #ebedf0 !important;
}

.premium-skeleton-loader .bg-secondary-subtle::after {
    content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(115deg,
                rgba(255, 255, 255, 0) 30%,
                rgba(255, 255, 255, 0.75) 45%,
                rgba(224, 231, 255, 0.6) 55%,
                rgba(255, 255, 255, 0) 70%);
        background-size: 300% 100%;
        animation: fluidWave 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes fluidWave {
    0% {
            background-position: 150% 0;
        }
        100% {
            background-position: -150% 0;
        }
}

/* 2. EFEK RADAR BERDENYUT PADA AVATAR BULAT */

.avatar-radar {
    position: relative;
}

.avatar-radar::before {
    content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 2px solid #e0e7ff;
        border-radius: 50%;
        animation: radarPulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
        opacity: 0;
}

@keyframes radarPulse {
    0% {
            transform: scale(0.9);
            opacity: 0.8;
        }
        100% {
            transform: scale(1.3);
            opacity: 0;
        }
}

/* 3. EFEK KARTU DOMINO (STAGGERED ENTRANCE) */

@keyframes cardFadeUp {
    0% {
            opacity: 0;
            transform: translateY(15px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
}

.staggered-card {
    opacity: 0;
        animation: cardFadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: calc(var(--i) * 0.12s);
}

/* 4. INTERAKSI CURSOR MOUSE (HOVER EFFECT) */

.staggered-card {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.staggered-card:hover {
    transform: translateY(-3px) scale(1.005);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/components/layouts/app-public.blade.php
   SECTION: LAYOUT PUBLIC COMMAND CENTER
   ========================================================================== */

body.app-public-body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            background-color: var(--bg-main);
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            margin: 0;
            -webkit-font-smoothing: antialiased;
}

.font-monospace {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* COMMAND NAV HEADER */

.navbar-command {
    background-color: var(--brand-green-dark);
            border-bottom: 2px solid var(--brand-accent);
            padding: 0.85rem 0;
            box-shadow: var(--shadow-md);
}

.brand-title {
    font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #ffffff;
            line-height: 1.2;
}

.brand-subtitle {
    font-size: 0.65rem;
            font-family: 'JetBrains Mono', monospace;
            color: #fcd34d;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 600;
}

.logo-box {
    width: 42px;
            height: 42px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(217, 119, 6, 0.4);
            border-radius: 10px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.2s ease;
}

.logo-box:hover {
    transform: scale(1.05);
}

.badge-mono-status {
    font-family: 'JetBrains Mono', monospace;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.08);
            color: #f8fafc;
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            backdrop-filter: blur(4px);
}

/* COMMAND FOOTER */

.footer-command {
    background-color: var(--brand-green-dark);
            color: #94a3b8;
            margin-top: auto;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 1.5rem 0;
            font-size: 0.775rem;
}

.footer-command a {
    color: var(--brand-accent);
            text-decoration: none;
            transition: color 0.15s ease;
}

.footer-command a:hover {
    color: #f59e0b;
            text-decoration: underline;
}

/* ==========================================================================
   CENTRALIZED FROM: resources/views/dashboard/index_public.blade.php
   SECTION: DASHBOARD PUBLIC
   ========================================================================== */

/* Scoped khusus Kiosk TV 16:9 agar tidak mengunci scrolling aplikasi */

body.public-kiosk-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
            background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            flex-direction: column;
}

.header-nav {
    height: 12vh;
            padding: 0 4vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(15px);
            border-bottom: 2px solid #3b82f6;
}

.main-content {
    height: 82vh;
            padding: 2vh 2vw;
            display: flex;
            flex-direction: column;
            gap: 2vh;
}

.row-top {
    height: 22vh;
}

.glass-card {
    background: var(--glass);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            border: 1px solid var(--glass-border);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 1vh 1vw;
            text-align: center;
}

.label-sub {
    font-size: 0.8rem;
            font-weight: 800;
            color: #64748b;
            letter-spacing: 1.5px;
            text-transform: uppercase;
}

.value-hero {
    font-size: 4rem;
            font-weight: 800;
            line-height: 1;
            margin: 0.5vh 0;
            letter-spacing: -2px;
}

.box-title {
    font-size: 1.1rem;
            font-weight: 800;
            border-bottom: 2px solid #f1f5f9;
            padding-bottom: 1vh;
            margin-bottom: 1.5vh;
            display: flex;
            align-items: center;
            color: #1e293b;
}

.table-container {
    height: 42vh;
            overflow: hidden;
}

.table-modern {
    width: 100%;
            border-collapse: separate;
            border-spacing: 0 8px;
}

.table-modern tr {
    background: #f8fafc;
            transition: 0.3s;
}

.table-modern td {
    padding: 1.5vh 15px;
            font-size: 1.2rem;
            font-weight: 700;
            color: #334155;
            border-radius: 10px;
}

.table-modern td:last-child {
    text-align: right;
            color: #2563eb;
}

.status-item {
    padding: 1.2vh 1.5vw;
            border-radius: 18px;
            margin-bottom: 0.8vh;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            border: 1px solid #e2e8f0;
            height: 7vh;
}

#clock {
    font-size: 3rem;
            font-weight: 800;
            color: #1e3a8a;
            line-height: 1;
}

.durasi-item {
    display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5vh;
            padding: 0.5vh 10px;
            border-radius: 10px;
}

.footer-nav {
    height: 6vh;
            padding: 0 4vw;
            background: #1e293b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 700;
            color: #cbd5e1;
            font-size: 0.85rem;
}

/* Additional System Helpers & Component Fixes */

.border-subtle {
    border-color: var(--border-subtle, #e4e4e7) !important;
}

.search-section-card {
    display: block;
}

.section-visible-count {
    font-size: 0.75rem; color: var(--text-muted);
}

.menu-item {
    transition: all 0.2s ease;
}

.progress-percent {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
}

.module-arrow {
    transition: transform 0.2s ease;
}

.search-desc {
    font-size: 0.775rem; color: var(--text-muted);
}

.search-title {
    font-weight: 600; font-size: 0.875rem; color: var(--text-main);
}

.text-xs {
    font-size: 0.75rem !important;
}

.text-xxs {
    font-size: 0.65rem !important;
}

.opacity-90 {
    opacity: 0.9 !important;
}

.text-amber-400 {
    color: #fbbf24 !important;
}

.text-emerald-400 {
    color: #34d399 !important;
}

.text-slate-300 {
    color: #cbd5e1 !important;
}

.text-slate-400 {
    color: #94a3b8 !important;
}

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

/* ==========================================================================
   REKAP KINERJA TRIWULAN - STICKY MATRIX TABLE SYSTEM (PIXEL-PERFECT)
   ========================================================================== */

/* 1. Container Wrapper: Batasi tinggi & aktifkan dual scroll */
.table-matrix-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
    position: relative;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
}

/* 2. Core Matrix Table Dimension */
.rekap-kinerja-wrapper .table-matrix,
.table-matrix.table-matrix-wide {
    min-width: 2200px !important;
    width: max-content !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    background-color: #ffffff;
}

/* 3. Thead Architecture */
.rekap-kinerja-wrapper .table-matrix thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Baris Header Tingkat 1 (Header Utama: Height 42px, Solid #143622) */
.rekap-kinerja-wrapper .table-matrix thead tr:first-child {
    height: 42px !important;
}

.rekap-kinerja-wrapper .table-matrix thead tr:first-child th {
    position: sticky !important;
    top: 0 !important;
    height: 42px !important;
    background-color: #143622 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #2d6a45 !important;
    border-right: 1px solid #2d6a45 !important;
    z-index: 10 !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
}

/* Baris Header Tingkat 2 (Sub-header Maksimal Nilai: Top 42px, Solid #1f4e32) */
.rekap-kinerja-wrapper .table-matrix thead tr.sub-header {
    height: 28px !important;
}

.rekap-kinerja-wrapper .table-matrix thead tr.sub-header th {
    position: sticky !important;
    top: 42px !important;
    height: 28px !important;
    background-color: #1f4e32 !important;
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 0.68rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-bottom: 2px solid #cbd5e1 !important;
    border-right: 1px solid #2d6a45 !important;
    z-index: 10 !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
}

/* 4. Intersection Corner: thead th.sticky-col-satker (Z-INDEX 20) */
.rekap-kinerja-wrapper .table-matrix thead th.sticky-col-satker {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 20 !important;
    background-color: #143622 !important;
    color: #ffffff !important;
    border-right: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    text-align: left !important;
    padding: 8px 12px !important;
}

/* Header Kolom No (Top-Left Edge) */
.rekap-kinerja-wrapper .table-matrix thead th:first-child {
    border-left: none !important;
}

/* 5. Kolom Satker Sticky (Tbody): Left 0, Solid #ffffff, Z-INDEX 5 */
.rekap-kinerja-wrapper .table-matrix tbody td.sticky-col-satker {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background-color: #ffffff !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    text-align: left !important;
    padding: 8px 12px !important;
    border-right: 2px solid #cbd5e1 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    min-width: 220px !important;
    max-width: 320px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

/* 6. Sel Nilai Biasa (Tbody Td): Rata tengah, Z-INDEX 1, Font 0.78rem, Padding 6px 4px */
.rekap-kinerja-wrapper .table-matrix tbody td {
    position: relative;
    z-index: 1;
    font-size: 0.78rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 6px 4px !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b;
    background-color: #ffffff;
}

/* Hover Efek Baris: Background #f8fafc termasuk kolom sticky-nya */
.rekap-kinerja-wrapper .table-matrix tbody tr:hover td:not(.cell-gap-alert) {
    background-color: #f8fafc !important;
}

.rekap-kinerja-wrapper .table-matrix tbody tr:hover td.sticky-col-satker {
    background-color: #f8fafc !important;
}

/* 7. Footer Sticky (Rata-rata): Left 0, Z-INDEX 5 */
.rekap-kinerja-wrapper .table-matrix tfoot td {
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px 6px !important;
    border-top: 2px solid #cbd5e1 !important;
    border-right: 1px solid #cbd5e1 !important;
    background-color: #f1f5f9 !important;
}

.rekap-kinerja-wrapper .table-matrix tfoot td.sticky-col-satker {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background-color: #f1f5f9 !important;
    border-right: 2px solid #cbd5e1 !important;
    text-align: right !important;
    padding-right: 12px !important;
}

/* ==========================================================================
   MODUL KELEMAHAN SATKER - STANDARISASI VISUAL UI & SHARP THEME (ROUNDED-0)
   Source View: resources/views/livewire/kelemahan-satker.blade.php
   ========================================================================== */

.analisis-kelemahan-wrapper {
    background-color: var(--bg-main, #f8faf9);
    color: var(--text-main, #09090b);
    min-height: 100vh;
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.analisis-kelemahan-wrapper *:not([class*="fa-"]):not(.fas):not(.far):not(.fal):not(.fad):not(.fab) {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* 1. Standarisasi Sudut Tajam (Border-radius: 0 !important / Sharp Edge) */
.analisis-kelemahan-wrapper .panel-modern,
.analisis-kelemahan-wrapper .card-kelemahan-umum,
.analisis-kelemahan-wrapper .item-kelemahan-umum,
.analisis-kelemahan-wrapper .card-metric-stat,
.analisis-kelemahan-wrapper .badge-status,
.analisis-kelemahan-wrapper .progress,
.analisis-kelemahan-wrapper .progress-bar,
.analisis-kelemahan-wrapper .table-responsive,
.analisis-kelemahan-wrapper .system-header-panel,
.analisis-kelemahan-wrapper .badge-header-instansi,
.analisis-kelemahan-wrapper .header-meta-badge,
.analisis-kelemahan-wrapper .btn-action-custom {
    border-radius: 0 !important;
}

.analisis-kelemahan-wrapper .panel-modern {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 1.25rem;
}

.analisis-kelemahan-wrapper .panel-modern.p-0 {
    padding: 0 !important;
    overflow: hidden !important;
}

/* Card Kelemahan Umum Wilayah */
.analisis-kelemahan-wrapper .card-kelemahan-umum {
    background: #ffffff;
    border: 1px solid #fed7aa !important;
    border-left: 4px solid #f97316 !important;
    padding: 1.15rem 1.25rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.analisis-kelemahan-wrapper .item-kelemahan-umum {
    background: #fff7ed;
    border: 1px solid #ffedd5;
    padding: 0.75rem 0.85rem !important;
    transition: all 0.15s ease-in-out;
}

.analisis-kelemahan-wrapper .item-kelemahan-umum:hover {
    border-color: #fdba74;
    background: #ffedd5;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.08);
}

/* 2. 5 Metric Summary Cards (Simetris & Sudut Tajam) */
.analisis-kelemahan-wrapper .card-metric-stat {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 1rem 0.75rem !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.analisis-kelemahan-wrapper .card-metric-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.analisis-kelemahan-wrapper .card-metric-stat.metric-sky { border-top: 3px solid #0ea5e9 !important; }
.analisis-kelemahan-wrapper .card-metric-stat.metric-green { border-top: 3px solid #16a34a !important; }
.analisis-kelemahan-wrapper .card-metric-stat.metric-red { border-top: 3px solid #dc2626 !important; background: #fef2f2 !important; }
.analisis-kelemahan-wrapper .card-metric-stat.metric-amber { border-top: 3px solid #d97706 !important; }
.analisis-kelemahan-wrapper .card-metric-stat.metric-purple { border-top: 3px solid #7c3aed !important; }

.analisis-kelemahan-wrapper .card-metric-stat .metric-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.analisis-kelemahan-wrapper .card-metric-stat .metric-value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

/* 3. Standarisasi Badge Status (Sudut Tajam) */
.analisis-kelemahan-wrapper .badge-status {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
}

.analisis-kelemahan-wrapper .badge-status-danger {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.analisis-kelemahan-wrapper .badge-status-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}

.analisis-kelemahan-wrapper .badge-status-warning {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

.analisis-kelemahan-wrapper .badge-status-orange {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fdba74 !important;
}

/* 4. Tabel Prioritas Perbaikan Satker (Standar .table, Non-Matrix) */
.analisis-kelemahan-wrapper .table thead th {
    background-color: #143622 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0.75rem 0.6rem !important;
    border-bottom: 2px solid #2d6a45 !important;
    border-right: 1px solid #2d6a45 !important;
}

.analisis-kelemahan-wrapper .table tbody td {
    vertical-align: middle !important;
    padding: 0.75rem 0.6rem !important;
    font-size: 0.8rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

.analisis-kelemahan-wrapper .table tbody tr:hover td:not(.score-gap-cell) {
    background-color: #f8fafc !important;
}

.analisis-kelemahan-wrapper .score-gap-cell {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.analisis-kelemahan-wrapper th.score-gap-cell {
    background-color: #143622 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.analisis-kelemahan-wrapper .capaian-col {
    min-width: 190px !important;
    width: 220px !important;
}

.analisis-kelemahan-wrapper .capaian-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

.analisis-kelemahan-wrapper .capaian-flex .progress {
    height: 8px !important;
    background-color: #e2e8f0 !important;
    flex-grow: 1 !important;
    margin: 0 !important;
}

.analisis-kelemahan-wrapper .capaian-flex .percent-text {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    min-width: 58px !important;
    text-align: right !important;
}


/* ==========================================================================
   RESET GENERAL TABLE WRAPPER & ISOLATE REKAP MATRIX ONLY
   ========================================================================== */
/* Kembalikan semua wrapper tabel standar agar tidak terkunci scroll vertikalnya */
.table-responsive,
.panel-modern .table-responsive,
.table-responsive-custom {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
}

/* Pastikan pembatasan scroll tinggi HANYA berlaku di modul Rekap Kinerja Triwulan */
.rekap-kinerja-wrapper .table-matrix-wrapper {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* ==========================================================================
   GLOBAL DESIGN SYSTEM ENFORCEMENT - SHARP & FULL-WIDTH SYMMETRIC
   ========================================================================== */
/* Pastikan semua kartu, alert, input, dan panel bersudut siku tegas */
.system-header-panel,
.panel-modern,
.card,
.modal-content,
.alert,
.badge,
.btn,
.form-control,
.form-select,
.progress,
.progress-bar {
    border-radius: 0px !important;
}

/* Keseimbangan kontainer: selalu 100% penuh */
.panel-modern {
    width: 100% !important;
    border-radius: 0px !important;
}

/* Normalkan tabel standar agar tidak terkunci inner scrollbar vertikal */
.table-responsive {
    max-height: none !important;
    overflow-y: visible !important;
    border-radius: 0px !important;
}

/* Isolasi khusus tabel matriks triwulan */
.rekap-kinerja-wrapper .table-matrix-wrapper {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* ==========================================================================
   FORCE 100% SYMMETRIC FULL-WIDTH (HEADER, FILTER, TABLE)
   ========================================================================== */
/* Pastikan tidak ada max-width yang menahan card header */
.system-header-panel,
.panel-modern,
.table-matrix-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hilangkan distorsi margin jika terbungkus class container bootstrap */
.container:has(.system-header-panel),
.container:has(.panel-modern) {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   DESIGN SYSTEM RAHMAT-S: BADGE CUSTOM (SHARP-EDGE)
   ========================================================================== */
.badge-custom {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.badge-custom-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

.badge-custom-success {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

.badge-custom-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}