@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-gradient-1:#e0f2fe;--bg-gradient-2:#f0f9ff;--bg-gradient-3:#e8f4f8;--bg-gradient-4:#fff;--text-primary:#0f172a;--text-muted:#475569;--accent:#0ea5e9;--accent-hover:#0284c7;--card-bg:#ffffffd9;--card-border:#0ea5e926;--sidebar-bg:#f8fafcf2;--color-aman:#10b981;--color-menipis:#f59e0b;--color-kosong:#ef4444;--space-xs:clamp(.25rem, 1vw, .5rem);--space-sm:clamp(.5rem, 2vw, .75rem);--space-md:clamp(.75rem, 3vw, 1.25rem);--space-lg:clamp(1rem, 4vw, 2rem);--space-xl:clamp(1.5rem, 5vw, 3rem);--text-xs:clamp(.65rem, 1.5vw, .75rem);--text-sm:clamp(.75rem, 2vw, .875rem);--text-base:clamp(.875rem, 2.5vw, 1rem);--text-lg:clamp(1rem, 3vw, 1.25rem);--text-xl:clamp(1.125rem, 3.5vw, 1.5rem);--text-2xl:clamp(1.25rem, 4vw, 1.75rem);--text-3xl:clamp(1.5rem, 5vw, 2.5rem);--sidebar-w:250px;--sidebar-w-collapsed:72px;--bottom-nav-h:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;font-size:var(--text-base);color:var(--text-primary);background:linear-gradient(-45deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3), var(--bg-gradient-4));-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;background-size:400% 400%;min-height:100vh;animation:15s infinite gradientBG;overflow-x:hidden}body:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 15%,#0ea5e914 0%,#0000 50%),radial-gradient(circle at 85% 30%,#8b5cf60f 0%,#0000 50%);width:100vw;height:100vh;animation:20s ease-in-out infinite alternate floatParticles;position:fixed;top:0;left:0}@keyframes floatParticles{0%{transform:scale(1)translateY(0)}to{transform:scale(1.2)translateY(-20px)}}@keyframes gradientBG{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}h1{background:linear-gradient(90deg,#0284c7,#8b5cf6);-webkit-text-fill-color:transparent;text-shadow:0 0 20px #0ea5e926;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:1.75rem;font-weight:700}h2{color:var(--text-primary);margin-bottom:1rem;font-size:1.25rem;font-weight:600}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:16px;padding:1.5rem;transition:transform .3s,box-shadow .3s,border-color .3s;box-shadow:0 8px 32px #0f172a0d,inset 0 0 10px #ffffff80}.card:hover{border-color:#0ea5e94d;transform:translateY(-2px);box-shadow:0 12px 40px #0f172a14,inset 0 0 15px #fffc}.dashboard-grid{gap:var(--space-md);grid-template-columns:repeat(12,1fr);display:grid}.stats-grid{gap:var(--space-md);grid-template-columns:repeat(4,1fr);display:grid}.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}.col-span-6{grid-column:span 6}.col-span-8{grid-column:span 8}.col-span-12{grid-column:span 12}.auto-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));display:grid}@media (width<=1024px){.col-span-3,.col-span-4{grid-column:span 6}.col-span-8{grid-column:span 12}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.col-span-3,.col-span-4,.col-span-6,.col-span-8{grid-column:span 12}.stats-grid{gap:var(--space-sm);grid-template-columns:repeat(2,1fr)}.dashboard-grid{gap:var(--space-sm)}}.form-input,.form-select{width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--card-border);color:var(--text-primary);font-family:inherit;font-size:var(--text-base);appearance:none;background:#ffffffb3;min-height:44px;transition:all .2s;box-shadow:inset 0 2px 4px #0f172a05}.form-input:focus,.form-select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #0ea5e933,inset 0 2px 4px #0f172a05}.form-select option{background:var(--card-bg);color:var(--text-primary)}.btn-primary{background:linear-gradient(135deg, var(--accent), #8b5cf6);color:#fff;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-base);cursor:pointer;text-shadow:0 1px 2px #0f172a1a;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none;justify-content:center;align-items:center;gap:.5rem;min-height:44px;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 15px #38bdf866}.btn-primary:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 25px #0ea5e966}.btn-primary:active{transform:translateY(0)scale(.98)}.sidebar-link{color:var(--text-muted);border-radius:12px;align-items:center;gap:.75rem;padding:.875rem 1rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.sidebar-link:hover{color:var(--accent-hover);box-shadow:inset 2px 0 0 var(--accent);background:#0ea5e91a}.sidebar-link.active{color:var(--accent);border-left:3px solid var(--accent);background:linear-gradient(90deg,#0ea5e926,#0000);box-shadow:0 4px 15px #0f172a0d}.bottom-nav-link{color:var(--text-muted);touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:52px;padding:.4rem .2rem;font-size:.58rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.bottom-nav-link span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;line-height:1;overflow:hidden}.bottom-nav-link.active{color:var(--accent);text-shadow:0 0 10px #38bdf880}.bottom-nav-link.active svg{stroke:var(--accent);filter:drop-shadow(0 0 5px #38bdf880)}.table-wrapper{-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--card-border);background:#fff9;overflow-x:auto}table{border-collapse:separate;border-spacing:0;text-align:left;width:100%;min-width:600px}th,td{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);border-bottom:1px solid #0f172a0d}th{color:var(--text-muted);text-transform:uppercase;font-weight:600;font-size:var(--text-xs);letter-spacing:.05em;white-space:nowrap;background:#f1f5f9cc}tr:last-child td{border-bottom:none}tr:hover td{background:#0ea5e90d}.badge{text-shadow:0 1px 1px #0003;border-radius:999px;padding:.25rem .75rem;font-size:.75rem;font-weight:600}.badge-aman{color:#34d399;background:#10b98133;box-shadow:0 0 10px #10b98133}.badge-menipis{color:#fbbf24;background:#f59e0b33;box-shadow:0 0 10px #f59e0b33}.badge-kosong{color:#f87171;background:#ef444433;box-shadow:0 0 10px #ef444433}.region-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;display:grid}.region-card{border:1px solid var(--card-border);background:#ffffffb3;border-radius:12px;justify-content:space-between;align-items:center;padding:1rem;transition:all .3s;display:flex;box-shadow:0 4px 15px #0f172a0d}.region-card:hover{border-color:#0ea5e94d;transform:translateY(-2px);box-shadow:0 6px 20px #0ea5e91a}.recharts-cartesian-axis-tick-value{font-family:Outfit,sans-serif;font-size:12px;fill:var(--text-muted)!important}.full-screen-loader{color:#fff;background:#0b1120;justify-content:center;align-items:center;height:100vh;display:flex}.spinner{border:4px solid #10b981;border-top-color:#0000;border-radius:50%;width:32px;height:32px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-fallback-container{justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.splash-screen-container{background:var(--bg-gradient-4);z-index:9999;-webkit-backdrop-filter:blur(20px);flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.splash-logo{filter:drop-shadow(0 15px 35px #0ea5e966);height:180px;margin-bottom:2rem}.splash-title{letter-spacing:4px;text-align:center;background:linear-gradient(90deg,#0ea5e9,#6366f1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:2.5rem}.splash-subtitle{color:var(--text-muted);text-align:center;max-width:80%;margin-top:.5rem;font-size:1rem;font-weight:500}.signature-pad-container{-webkit-backdrop-filter:blur(10px);background:#fff9;border:2px dashed #0ea5e966;border-radius:12px;transition:border-color .3s;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #0000000d}.signature-pad-container:hover{border-color:var(--accent)}.btn-secondary{color:var(--text-muted);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);font-weight:600;font-size:var(--text-sm);cursor:pointer;touch-action:manipulation;background:#0f172a0d;border:1px solid #0f172a1a;align-items:center;gap:.4rem;min-height:36px;transition:all .2s;display:inline-flex}.btn-secondary:hover{color:var(--accent);background:#0ea5e91a}.stepper-container{margin-bottom:var(--space-lg);-webkit-overflow-scrolling:touch;justify-content:center;align-items:center;padding-bottom:4px;display:flex;overflow-x:auto}.stepper-step{flex-shrink:0;align-items:center;display:flex;position:relative}.stepper-circle{border:2px solid var(--card-border);width:32px;height:32px;color:var(--text-muted);background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;transition:all .3s;display:flex}.stepper-circle.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px #0ea5e933}.stepper-circle.done{color:#fff;background:#10b981;border-color:#10b981}.stepper-line{background:var(--card-border);flex-shrink:0;width:28px;height:2px;transition:background .3s}.stepper-line.done{background:#10b981}.section-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:var(--space-sm);align-items:center;gap:.5rem;font-weight:700;display:flex}.section-title:after{content:"";background:linear-gradient(90deg,#0ea5e94d,#0000);flex:1;height:1px}.qr-frame{padding:var(--space-lg);border-radius:var(--radius-xl);background:#fff;box-shadow:0 20px 60px #0ea5e926,0 0 0 1px #0ea5e91a}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.divider{background:var(--card-border);height:1px;margin:var(--space-md) 0}.w-full{width:100%}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.text-success{color:#10b981}.text-warning{color:#f59e0b}.text-danger{color:#ef4444}@media print{body{background:#fff;animation:none}body:before{display:none}.no-print{display:none!important}.card{box-shadow:none;border:1px solid #e2e8f0}}.dashboard-single-screen{flex-direction:column;height:calc(100vh - 120px);display:flex;overflow:hidden}.dashboard-single-screen .dashboard-grid{gap:var(--space-sm);flex:1;grid-template-rows:1fr;grid-template-columns:repeat(12,1fr);min-height:0;display:grid}.dashboard-single-screen .card{flex-direction:column;display:flex;overflow:hidden}.dashboard-single-screen .card>div:last-child{flex:1;min-height:0}@media (width<=1024px){.dashboard-single-screen{height:auto;overflow:visible}.dashboard-single-screen .dashboard-grid{grid-template-rows:auto}}