:root { --sipraja-navy: #12375b; --sipraja-blue: #1f6fb2; --sipraja-mist: #f4f7fb; }
body { background: var(--sipraja-mist); }
.sidebar-sipraja { background: linear-gradient(180deg, #102f50 0%, #174d79 100%); min-height: 100vh; }
.brand-link, .brand-link:hover { align-items: center; color: #fff; display: flex; gap: .65rem; text-decoration: none; }
.brand-link small { display: block; font-size: .62rem; font-weight: 400; letter-spacing: .02em; opacity: .75; }
.brand-mark { background: #fff; border-radius: .5rem; height: 2.5rem; object-fit: contain; padding: .15rem; width: 2.5rem; }
.sidebar-sipraja .nav-link { border-radius: .5rem; color: rgba(255,255,255,.8); margin: .15rem 0; padding: .7rem .85rem; }
.sidebar-sipraja .nav-link.active, .sidebar-sipraja .nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.16); box-sizing: border-box; margin-top: auto; padding: 1rem 1.25rem; width: 100%; }
.topbar-sipraja { background: #fff; border-bottom: 1px solid #e7edf4; min-height: 4.1rem; }
.page-wrapper .page-body { margin-top: 0; padding-top: 1.5rem; }
.page-body .page-header { margin-top: 0; margin-bottom: 1.25rem; }
.page-wrapper > .footer { margin-top: auto; padding: .75rem 0; text-align: center; }
.metric-card { overflow: hidden; position: relative; }
.metric-dot { border-radius: 999px; height: .65rem; position: absolute; right: 1.25rem; top: 1.35rem; width: .65rem; }
.table-description { min-width: 320px; white-space: normal; }
.ts-wrapper.form-select { padding: 0; }
.ts-wrapper .ts-control { border-color: #dce1e7; border-radius: .375rem; color: inherit; font-size: inherit; min-height: 2.5rem; padding: .5625rem .75rem; }
.ts-wrapper.single .ts-control .item { overflow-wrap: anywhere; white-space: normal; }
.ts-dropdown { background: #fff; color: #182433; border-color: #dce1e7; border-radius: .375rem; font-size: inherit; box-shadow: 0 .5rem 1.5rem rgba(18,55,91,.12); }
.ts-dropdown .option { overflow-wrap: anywhere; padding: .625rem .75rem; }
.spj-notes-dialog { background: #fff; border: 1px solid #e7edf4; border-radius: .75rem; box-shadow: 0 1rem 3rem rgba(18,55,91,.2); color: inherit; margin: auto; max-height: calc(100vh - 2rem); max-width: 600px; overflow-y: auto; padding: 0; width: calc(100% - 2rem); }
.spj-notes-dialog::backdrop { background: rgba(16,47,80,.5); }
.spj-notes-content { overflow-wrap: anywhere; white-space: pre-wrap; }
.login-page { background: #f3f7fb; min-height: 100vh; }
.login-shell { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 100vh; }
.login-intro { background: linear-gradient(135deg, #0d3155, #1f75b5); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 8vw, 8rem); }
.login-brand { align-items: center; display: flex; font-size: 1.2rem; font-weight: 800; gap: .65rem; margin-bottom: 5rem; }
.login-brand .brand-mark { background: rgba(255,255,255,.96); height: 3.5rem; padding: .2rem; width: 3.5rem; }
.login-intro h1 { font-size: clamp(2.3rem, 4vw, 4.25rem); line-height: 1.08; max-width: 720px; }
.login-intro > p:not(.eyebrow) { color: rgba(255,255,255,.78); font-size: 1.1rem; max-width: 600px; }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; opacity: .7; }
.intro-note { border-left: 3px solid #8ec6ee; color: rgba(255,255,255,.8); margin-top: 2rem; max-width: 500px; padding-left: 1rem; }
.login-panel { align-items: center; display: flex; justify-content: center; padding: 2rem; }
.login-panel .card { width: min(100%, 430px); }
@media (max-width: 767px) { .login-shell { display: block; } .login-intro { min-height: 38vh; padding: 2.25rem; } .login-brand { margin-bottom: 2rem; } .login-intro h1 { font-size: 2rem; } .sidebar-sipraja { min-height: auto; } }
@media (min-width: 768px) and (max-width: 991px) { .sidebar-sipraja { min-height: auto; } }