:root { --pu-blue: #374774; --pu-yellow: #EAB630; --bg-light: #f8f9fc; }
body { background-color: var(--bg-light); font-family: 'Inter', sans-serif; display: flex; flex-direction: column; min-height: 100vh; }

/* NAVBAR STYLING & MOBILE FIX */
.navbar-pu { background-color: var(--pu-blue); border-bottom: 3px solid var(--pu-yellow); padding: 10px 0; z-index: 1050; }

.navbar-brand { max-width: calc(100% - 70px); }
.logo-pu { height: 40px; width: 36px; object-fit: contain; background: #fff; padding: 3px; border-radius: 4px; flex-shrink: 0; }
.instansi-text { color: #fff; line-height: 1.2; margin-left: 10px; overflow: hidden; }
.instansi-name { font-weight: 600; font-size: clamp(13px, 3.5vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.instansi-sub { font-size: clamp(11px, 2.5vw, 12px); color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-pu .nav-link { color: rgba(255,255,255,0.85); font-weight: 500; font-size: 14px; padding: 8px 15px !important; }
.navbar-pu .nav-link:hover, .navbar-pu .nav-link.active { color: var(--pu-yellow) !important; }

/* CAROUSEL */
.carousel-item { height: 400px; background-color: var(--pu-blue); }
.carousel-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7)); }
.carousel-caption { z-index: 2; bottom: 15%; }
.carousel-caption h2 { font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

/* KARTU DASHBOARD PU */
.app-card { border: 2px solid rgba(55,71,116,0.08); border-radius: 1rem; background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.25s ease; height: 100%;padding: 25px;}

.app-card:hover { transform: translateY(-5px); border-color: var(--pu-yellow); box-shadow: 0 10px 25px rgba(55,71,116,0.15); }
.text-mantap { color: #198754; } .text-tidak-mantap { color: #dc3545; }
.bg-kondisi-baik { background-color: #2ecc71; color: white; }
.bg-kondisi-sedang { background-color: #f1c40f; color: #333; }
.bg-kondisi-rusak-ringan { background-color: #e67e22; color: white; }
.bg-kondisi-rusak-berat { background-color: #e74c3c; color: white; }

.apptabel-card { border: 2px solid rgba(55,71,116,0.08); border-radius: 1rem; background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); padding: 25px; }
table.dataTable thead th { background-color: #f1f3f8; color: var(--pu-blue); border-bottom: 2px solid #ddd; }
	.dt-buttons { margin-bottom: 15px; }
	.btn-excel-pu { background-color: #198754; border-color: #198754; color: white; font-size: 13px; border-radius: 6px; }
	
/* CARDS */
        .appgrafik-card { border: 2px solid rgba(55,71,116,0.08); border-radius: 1rem; background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); padding: 25px; margin-bottom: 20px; }

/* KARTU DETAIL */
.appdetail-card { border: 2px solid rgba(55,71,116,0.08); border-radius: 1rem; background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); padding: 25px; }
.appdetail-card-title { color: var(--pu-blue); font-weight: 700; margin-bottom: 20px; border-bottom: 2px solid #f1f3f8; padding-bottom: 10px; }

/* TABEL INFO & DETAIL */
.table-info-jalan th { width: 35%; color: #6c757d; font-weight: 500; background-color: #f8f9fc; }
.table-info-jalan td { font-weight: 600; color: #333; }
.table-detail th { background-color: #f1f3f8; color: var(--pu-blue); font-weight: 600; }
.table-detail td { vertical-align: middle; }

/* TABS ASET */
.nav-tabs .nav-link { color: #6c757d; font-weight: 600; border: none; border-bottom: 3px solid transparent; }
.nav-tabs .nav-link.active { color: var(--pu-blue); background-color: transparent; border-color: transparent; border-bottom: 3px solid var(--pu-yellow); }
.nav-tabs .nav-link:hover { border-bottom: 3px solid #e2e8f0; color: var(--pu-blue); }

/* PETA STICKY */
#mapDetail { width: 100%; height: 380px; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; z-index: 1; }

.btn-pu-outline { border: 2px solid var(--pu-blue); color: var(--pu-blue); font-weight: 500; }
.btn-pu-outline:hover { background-color: var(--pu-blue); color: #fff; }		


/* ECHARTS CONTAINER */
.echart-container { width: 100%; height: 450px; }
.echart-small { width: 100%; height: 280px; }

        /* ADUAN */
        .appformaduan-card { border: 2px solid rgba(55,71,116,0.08); border-radius: 1rem; background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        
        /* FORM STYLING */
        .form-label { font-weight: 600; color: #495057; font-size: 14px; }
        .form-control:focus, .form-select:focus { border-color: var(--pu-yellow); box-shadow: 0 0 0 0.25rem rgba(234, 182, 48, 0.25); }
        
        /* PETA PICKER */
        #mapPicker { 
            width: 100%; 
            height: 350px; 
            border-radius: 8px; 
            border: 2px solid #e2e8f0; 
            z-index: 1; 
        }
        @media (min-width: 992px) {
            #mapPicker { height: 450px; } 
        }

        /* BUTTONS */
        .btn-pu-primary { background-color: var(--pu-blue); color: #fff; font-weight: 600; border: none; padding: 10px 20px; border-radius: 6px; transition: all 0.2s; }
        .btn-pu-primary:hover { background-color: #2a365c; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(55,71,116,0.3); }
        
        .btn-pu-outline { border: 2px solid var(--pu-blue); color: var(--pu-blue); font-weight: 600; transition: all 0.2s; }
        .btn-pu-outline:hover { background-color: var(--pu-blue); color: #fff; }
		
		
		/* DAFTAR ADUAN */
		.appaduan-card { border: 2px solid rgba(55,71,116,0.08); border-radius: 1rem; background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); padding: 25px; }
        
        /* SUMMARY STATS */
        .stat-box { border-radius: 12px; padding: 15px; text-align: center; border: 1px solid #e2e8f0; }
        .stat-box.menunggu { border-left: 4px solid #dc3545; }
        .stat-box.diterima { border-left: 4px solid #0d6efd; }
        .stat-box.dikerjakan { border-left: 4px solid #ffc107; }
        .stat-box.selesai { border-left: 4px solid #198754; }

        table.dataTable thead th { background-color: #f1f3f8; color: var(--pu-blue); border-bottom: 2px solid #ddd; }
        #mapModalPublik { width: 100%; height: 250px; border-radius: 8px; border: 1px solid #dee2e6; }
        footer { background-color: #f1f3f8; color: #777; font-size: 13px; border-top: 1px solid #e9ecef; }

footer { background-color: #f1f3f8; color: #777; font-size: 13px; }