/* SUNFISH skin — palet Kolam & Pesisir. Dimuat paling akhir agar menang cascade. */
:root {
  --sunfish-primary: #145a72;
  --sunfish-primary-dark: #103b4a;
  --sunfish-primary-soft: rgba(20, 90, 114, .12);
  --sunfish-accent: #c8832b;
  --sunfish-surface: #f3f7f8;
  --sunfish-ink: #20343b;
  --sunfish-success: #287d68;
  --sunfish-info: #3c8496;
  --sunfish-warning: #b97828;
  --sunfish-danger: #a94b4b;
  --sunfish-secondary: #687b82;
  --bs-primary: #145a72;
  --bs-primary-rgb: 20, 90, 114;
  --bs-success: #287d68;
  --bs-info: #3c8496;
  --bs-warning: #b97828;
  --bs-danger: #a94b4b;
  --bs-secondary: #687b82;
  --bs-body-bg: #f3f7f8;
  --bs-body-color: #20343b;
  --bs-link-color: #145a72;
  --bs-link-hover-color: #103b4a;
}

body {
  font-family: 'Plus Jakarta Sans', 'Public Sans', -apple-system, system-ui, sans-serif;
  background-color: var(--sunfish-surface);
  color: var(--sunfish-ink);
}

code, kbd, pre, samp, .font-monospace {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Semantic palette */
.bg-primary, .badge.bg-primary { background-color: var(--sunfish-primary) !important; }
.text-primary { color: var(--sunfish-primary) !important; }
.border-primary { border-color: var(--sunfish-primary) !important; }
.bg-label-primary { background-color: var(--sunfish-primary-soft) !important; color: var(--sunfish-primary) !important; }
.bg-success, .badge.bg-success { background-color: var(--sunfish-success) !important; }
.bg-info, .badge.bg-info { background-color: var(--sunfish-info) !important; }
.bg-warning, .badge.bg-warning { background-color: var(--sunfish-warning) !important; }
.bg-danger, .badge.bg-danger { background-color: var(--sunfish-danger) !important; }
.bg-secondary, .badge.bg-secondary { background-color: var(--sunfish-secondary) !important; }
.text-success { color: var(--sunfish-success) !important; }
.text-info { color: var(--sunfish-info) !important; }
.text-warning { color: var(--sunfish-warning) !important; }
.text-danger { color: var(--sunfish-danger) !important; }
.text-secondary { color: var(--sunfish-secondary) !important; }
.bg-label-success { background-color: rgba(40,125,104,.12) !important; color: var(--sunfish-success) !important; }
.bg-label-info { background-color: rgba(60,132,150,.12) !important; color: var(--sunfish-info) !important; }
.bg-label-warning { background-color: rgba(185,120,40,.14) !important; color: var(--sunfish-warning) !important; }
.bg-label-danger { background-color: rgba(169,75,75,.12) !important; color: var(--sunfish-danger) !important; }
.bg-label-secondary { background-color: rgba(104,123,130,.14) !important; color: var(--sunfish-secondary) !important; }

.btn-primary { background-color: var(--sunfish-primary) !important; border-color: var(--sunfish-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:focus-visible { background-color: var(--sunfish-primary-dark) !important; border-color: var(--sunfish-primary-dark) !important; box-shadow: 0 0 0 .2rem rgba(20,90,114,.22) !important; }
.btn-outline-primary { color: var(--sunfish-primary) !important; border-color: var(--sunfish-primary) !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--sunfish-primary) !important; color: #fff !important; }
.btn-success { background-color: var(--sunfish-success) !important; border-color: var(--sunfish-success) !important; }
.btn-danger { background-color: var(--sunfish-danger) !important; border-color: var(--sunfish-danger) !important; }
.btn-warning { background-color: var(--sunfish-warning) !important; border-color: var(--sunfish-warning) !important; color: #fff !important; }
.btn-info { background-color: var(--sunfish-info) !important; border-color: var(--sunfish-info) !important; color: #fff !important; }
.alert-primary { background-color: var(--sunfish-primary-soft) !important; border-color: rgba(20,90,114,.25) !important; color: var(--sunfish-primary-dark) !important; }
.alert-success { background-color: rgba(40,125,104,.12) !important; border-color: rgba(40,125,104,.25) !important; color: #1f624f !important; }
.alert-warning { background-color: rgba(185,120,40,.14) !important; border-color: rgba(185,120,40,.28) !important; color: #80531c !important; }
.alert-danger { background-color: rgba(169,75,75,.12) !important; border-color: rgba(169,75,75,.25) !important; color: #853d3d !important; }


/* Outline, label buttons, progress */
.btn-outline-success { color: var(--sunfish-success) !important; border-color: var(--sunfish-success) !important; }
.btn-outline-danger { color: var(--sunfish-danger) !important; border-color: var(--sunfish-danger) !important; }
.btn-outline-warning { color: var(--sunfish-warning) !important; border-color: var(--sunfish-warning) !important; }
.btn-outline-info { color: var(--sunfish-info) !important; border-color: var(--sunfish-info) !important; }
.btn-outline-secondary { color: var(--sunfish-secondary) !important; border-color: rgba(104,123,130,.45) !important; }
.btn-outline-success:hover { background-color: var(--sunfish-success) !important; color: #fff !important; }
.btn-outline-danger:hover { background-color: var(--sunfish-danger) !important; color: #fff !important; }
.btn-outline-warning:hover { background-color: var(--sunfish-warning) !important; color: #fff !important; }
.btn-outline-info:hover { background-color: var(--sunfish-info) !important; color: #fff !important; }
.btn-outline-secondary:hover { background-color: var(--sunfish-secondary) !important; color: #fff !important; }
.btn-label-primary { background-color: var(--sunfish-primary-soft) !important; color: var(--sunfish-primary) !important; border-color: transparent !important; }
.btn-label-danger { background-color: rgba(169,75,75,.12) !important; color: var(--sunfish-danger) !important; border-color: transparent !important; }
.btn-label-danger:hover { background-color: var(--sunfish-danger) !important; color: #fff !important; }
.btn-label-secondary { background-color: rgba(104,123,130,.14) !important; color: var(--sunfish-secondary) !important; border-color: transparent !important; }
.progress-bar.bg-primary { background-color: var(--sunfish-primary) !important; }
.progress-bar.bg-success { background-color: var(--sunfish-success) !important; }
.progress-bar.bg-warning { background-color: var(--sunfish-warning) !important; }
.progress-bar.bg-danger { background-color: var(--sunfish-danger) !important; }
.progress-bar.bg-info { background-color: var(--sunfish-info) !important; }

/* Links */
a, .link-primary { color: var(--sunfish-primary); }
a:hover, .link-primary:hover { color: var(--sunfish-primary-dark); }

/* Forms */
.form-check-input:checked,
.form-check-input[type=checkbox]:checked,
.form-check-input[type=radio]:checked,
.form-switch .form-check-input:checked { background-color: var(--sunfish-primary) !important; border-color: var(--sunfish-primary) !important; box-shadow: none !important; }
.form-check-input:focus { border-color: var(--sunfish-primary) !important; box-shadow: 0 0 0 .2rem rgba(20,90,114,.18) !important; }
.form-control:focus, .form-select:focus,
.input-group:focus-within .form-control, .input-group:focus-within .input-group-text { border-color: var(--sunfish-primary) !important; box-shadow: 0 0 0 .2rem rgba(20,90,114,.15) !important; }
.form-range::-webkit-slider-thumb { background: var(--sunfish-primary) !important; }
.form-range::-moz-range-thumb { background: var(--sunfish-primary) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted { background-color: var(--sunfish-primary) !important; color: #fff !important; }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection { border-color: var(--sunfish-primary) !important; }

/* Navigation and contextual menu */
.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus { background-color: var(--sunfish-primary) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(20,90,114,.22) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover, .nav-tabs .nav-link.active:focus { color: var(--sunfish-primary) !important; border-bottom-color: var(--sunfish-primary) !important; box-shadow: 0 -2px 0 var(--sunfish-primary) inset !important; }
.nav-tabs .nav-link:hover { color: var(--sunfish-primary) !important; }
.page-link { color: var(--sunfish-primary) !important; }
.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus { background-color: var(--sunfish-primary) !important; border-color: var(--sunfish-primary) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(20,90,114,.25) !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--sunfish-primary-soft) !important; color: var(--sunfish-primary) !important; }
.list-group-item.active { background-color: var(--sunfish-primary) !important; border-color: var(--sunfish-primary) !important; color: #fff !important; }
.accordion-button:not(.collapsed) { background-color: var(--sunfish-primary-soft) !important; color: var(--sunfish-primary) !important; box-shadow: none !important; }
.accordion-button:not(.collapsed):focus, .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(20,90,114,.15) !important; }
.timeline .timeline-indicator-primary i { color: var(--sunfish-primary) !important; }
.timeline .timeline-indicator-success i { color: var(--sunfish-success) !important; }
.timeline .timeline-indicator-danger i { color: var(--sunfish-danger) !important; }
.timeline .timeline-indicator-info i { color: var(--sunfish-info) !important; }
.timeline .timeline-indicator-secondary i { color: var(--sunfish-secondary) !important; }

/* Shell */
.card { border-color: rgba(16,59,74,.10); box-shadow: 0 4px 16px rgba(16,59,74,.06); }
.card-header { background: transparent; }
.layout-menu.bg-menu-theme { background: var(--sunfish-primary-dark) !important; }

/* Vuexy menu states: normal, hover, active, and open parent */
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle {
  background: rgba(200,131,43,.18) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--sunfish-accent) !important;
}
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.bg-menu-theme .menu-inner > .menu-item.active::before { background: transparent !important; }
.bg-menu-theme .menu-inner .menu-link,
.bg-menu-theme .menu-inner .menu-icon,
.bg-menu-theme .menu-header-text { color: rgba(255,255,255,.78) !important; }
.bg-menu-theme .menu-inner .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link .menu-icon { color: #fff !important; }
.bg-menu-theme .menu-sub .menu-link { color: rgba(255,255,255,.68) !important; }
.menu-inner-shadow { background: linear-gradient(var(--sunfish-primary-dark) 41%, rgba(16,59,74,0)) !important; }

/* Brand, navbar, footer */
.app-brand-text { color: #fff !important; letter-spacing: .04em; }
.navbar { background: rgba(255,255,255,.94) !important; backdrop-filter: blur(10px); }
.content-footer { border-top: 1px solid rgba(16,59,74,.1); }
.sunfish-brand-tagline { color: rgba(255,255,255,.55); font-size: .58rem; letter-spacing: .08em; }
.sunfish-owner { color: rgba(255,255,255,.6); font-size: .68rem; letter-spacing: .04em; }
.sunfish-context { color: var(--sunfish-primary-dark); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }

:focus-visible { outline: 3px solid rgba(200,131,43,.55) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Login: informative split layout */
.sunfish-login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); background: var(--sunfish-surface); }
.sunfish-login-intro { position: relative; overflow: hidden; display: flex; align-items: center; padding: clamp(3rem, 8vw, 8rem); color: #fff; background: linear-gradient(145deg, var(--sunfish-primary-dark), var(--sunfish-primary)); }
.sunfish-login-intro::before, .sunfish-login-intro::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; width: 42rem; height: 42rem; right: -18rem; bottom: -24rem; }
.sunfish-login-intro::after { width: 28rem; height: 28rem; right: 8rem; bottom: -19rem; border-color: rgba(200,131,43,.28); }
.sunfish-login-wave { position: absolute; inset: auto -10% 8%; height: 10rem; opacity: .25; border-top: 2px solid var(--sunfish-accent); transform: rotate(-5deg); }
.sunfish-login-intro-content { position: relative; z-index: 1; max-width: 39rem; }
.sunfish-login-brand, .sunfish-mobile-brand { display: flex; align-items: center; gap: .75rem; font-size: 1.15rem; font-weight: 700; letter-spacing: .12em; }
.sunfish-login-brand .sunfish-seal, .sunfish-mobile-brand .sunfish-seal { flex: 0 0 auto; }
.sunfish-kicker { color: var(--sunfish-accent); font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.sunfish-login-intro h1 { margin: 2rem 0 1.25rem; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1.08; letter-spacing: -.04em; }
.sunfish-login-intro h1 em { color: #f3c46d; font-style: normal; }
.sunfish-login-copy { max-width: 32rem; color: rgba(255,255,255,.75); font-size: 1.05rem; line-height: 1.8; }
.sunfish-login-points { display: grid; gap: .8rem; margin-top: 2.5rem; color: rgba(255,255,255,.88); font-size: .86rem; }
.sunfish-login-points i { color: #f3c46d; margin-right: .5rem; }
.sunfish-login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 3rem clamp(1.5rem, 6vw, 6rem); background: #fff; }
.sunfish-login-form-card { width: min(100%, 27rem); }
.sunfish-login-form-card h2 { color: var(--sunfish-ink); font-size: 1.65rem; }
.sunfish-mobile-brand { display: none; color: var(--sunfish-primary-dark); margin-bottom: 2rem; }
.sunfish-login-form-card .form-control { min-height: 3rem; }
@media (max-width: 991.98px) { .sunfish-login-page { grid-template-columns: 1fr; } .sunfish-login-intro { min-height: 20rem; padding: 3rem 2rem; } .sunfish-login-intro h1 { margin-top: 1rem; font-size: 2.5rem; } .sunfish-login-points { grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; } .sunfish-login-form-wrap { padding: 3rem 1.5rem; } }
@media (max-width: 575.98px) { .sunfish-login-intro { min-height: 17rem; padding: 2rem 1.5rem; } .sunfish-login-copy { font-size: .9rem; line-height: 1.5; } .sunfish-login-points { display: none; } .sunfish-login-form-wrap { padding: 2.5rem 1.25rem; } .sunfish-mobile-brand { display: flex; } }

/* Signature: pematang tambak accent + stat tile */
.sunfish-seal { width: 2rem; height: 2rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--sunfish-primary), var(--sunfish-primary-dark)); color: #fff; box-shadow: inset 0 0 0 2px rgba(200,131,43,.65); }
.layout-menu::after { content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, rgba(200,131,43,.65), rgba(200,131,43,0)); }
.sunfish-tile { border-left: 3px solid var(--sunfish-accent); }