/* SI-RKPD v1.4.7: compact login + full-viewport background.
   Loaded after legacy styles to consolidate conflicting v0.x login overrides.
   All additions are presentation-only. Supabase/Auth and RBAC scripts are untouched. */
:root{
  --premium-navy:#081e3b;
  --premium-blue:#155398;
  --premium-gold:#e3b957;
  --premium-radius:18px;
}
/* Stable, full-bleed artwork. `contain` from legacy styles caused navy bands on wide screens. */
body.auth-guest{background:#071d38!important}
body.auth-guest #loginScreen,
body.auth-guest .login-screen{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  height:100dvh!important;
  padding:clamp(20px,4vh,44px) clamp(18px,4vw,56px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate!important;
  background:#071d38!important;
}
.login-screen::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  display:block!important;
  background-image:url('./login-panorama-pesisir.png')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  animation:none!important;
  transform:none!important;
  filter:none!important;
  z-index:-2!important;
}
.login-screen::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  display:block!important;
  z-index:-1!important;
  background:linear-gradient(112deg,rgba(2,16,36,.48) 0%,rgba(3,22,48,.24) 53%,rgba(3,17,39,.48) 100%),linear-gradient(0deg,rgba(3,16,34,.35),transparent 46%)!important;
  pointer-events:none!important;
}
.login-screen .login-shell{
  position:relative!important;
  isolation:isolate!important;
  width:min(868px,100%)!important;
  max-width:800px!important;
  min-width:0!important;
  height:auto!important;
  min-height:450px!important;
  max-height:none!important;
  margin:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,45%) minmax(0,55%)!important;
  border:0!important;
  outline:0!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:0 22px 65px rgba(0,12,36,.38),0 3px 15px rgba(0,10,28,.16)!important;
  transform:none!important;
  -webkit-backdrop-filter:blur(3px)!important;
  backdrop-filter:blur(3px)!important;
}
.login-shell .login-visual{
  display:flex!important;
  flex-direction:column!important;
  min-height:450px!important;
  padding:clamp(22px,2.6vw,28px)!important;
  background:linear-gradient(156deg,rgba(7,43,85,.78) 0%,rgba(7,36,71,.76) 56%,rgba(5,25,54,.80) 100%)!important;
  color:#fff!important;
  border:0!important;
}
.login-shell .login-visual-main{margin:auto 0 0!important;display:grid!important;gap:0!important}
.login-visual-label{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.19em;color:#cbdff5;margin-bottom:20px}
.login-label-dot,.stage-dot{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:#edc671;box-shadow:0 0 0 4px rgba(237,198,113,.12)}
.login-shell .login-logo-duo{display:flex!important;align-items:center!important;gap:13px!important;min-height:59px!important;margin:0 0 15px!important}
.login-shell .login-logo-duo .login-logo{height:58px!important;width:65px!important;object-fit:contain!important}
.login-shell .login-logo-duo .login-logo-sumenep{width:56px!important;height:56px!important}
.login-shell .login-logo-divider{height:47px!important;background:rgba(255,255,255,.32)!important}
.login-shell .login-system-kicker{color:#f2c55f!important;font-size:10px!important;letter-spacing:.24em!important;font-weight:900!important}
.login-shell .login-product-name{font-size:clamp(31px,3vw,37px)!important;letter-spacing:-.04em!important;line-height:1.08!important;margin:4px 0!important}
.login-shell .login-product-subname{font-size:10px!important;letter-spacing:.15em!important;color:#d3e5fb!important;line-height:1.55!important}
.login-shell .login-visual h1{max-width:26ch!important;font-size:clamp(18px,1.7vw,20px)!important;line-height:1.34!important;letter-spacing:-.023em!important;margin:15px 0 8px!important;color:#fff!important;font-weight:780!important}
.login-shell .login-visual p{font-size:12px!important;line-height:1.55!important;color:#d1e0f3!important;max-width:42ch!important}
.login-shell .login-capabilities{display:none!important}
.login-shell .login-capabilities span{font-size:10px!important;padding:7px 10px!important;border-radius:999px!important;background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.21)!important;color:#eaf4ff!important}
.login-shell .login-visual-foot{color:#b5cde8!important;line-height:1.55!important;font-size:10px!important;margin-top:12px!important}
.login-shell .login-access{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  min-height:450px!important;padding:22px clamp(24px,2.6vw,32px)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.60),rgba(247,251,255,.52))!important;
  border:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.login-shell .login-card{max-width:420px!important;width:100%!important;margin:0!important}
.login-shell .secure-pill{font-size:10px!important;letter-spacing:.12em!important;padding:7px 11px!important;border-radius:999px!important;border:1px solid #cfdded!important;background:#edf4fb!important;color:#1d5188!important}
.login-shell .login-card-head h2{font-size:clamp(24px,2.2vw,28px)!important;line-height:1.14!important;letter-spacing:-.035em!important;color:#0d2e52!important;margin:12px 0 7px!important}
.login-shell .login-card-head p{font-size:13px!important;line-height:1.52!important;color:#52677f!important;margin:0 0 16px!important;max-width:43ch!important}
.login-shell .login-portal-switch{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:15px!important}
.login-shell .login-portal-option{min-height:61px!important;padding:9px!important;border:1px solid #d3e0ef!important;border-radius:13px!important;background:rgba(247,250,254,.9)!important;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s!important}
.login-shell .login-portal-option b{font-size:13px!important;line-height:1.35!important;color:#27445f!important}
.login-shell .login-portal-option span{font-size:11px!important;line-height:1.35!important;margin-top:5px!important;color:#60758c!important}
.login-shell .login-portal-option:hover{background:#f2f7ff!important;border-color:#8baed7!important;transform:translateY(-1px)!important}
.login-shell .login-portal-option.active{border:1px solid #2f6db8!important;background:#eaf3ff!important;box-shadow:inset 0 0 0 1px rgba(47,109,184,.3),0 3px 8px rgba(23,75,140,.07)!important}
.login-shell .login-portal-option.active b{color:#174c86!important}
.login-shell .login-field{margin-bottom:12px!important}
.login-shell .login-field>span{font-size:13px!important;color:#233f5d!important;margin-bottom:8px!important;font-weight:750!important}
.login-shell .field-shell{height:45px!important;border-radius:12px!important;border:1px solid #cbd9e8!important;background:#fff!important;padding:5px!important;transition:border-color .15s,box-shadow .15s!important}
.login-shell .field-shell:focus-within{border-color:#8b7545!important;box-shadow:none!important}
.login-shell .field-icon{height:36px!important;width:37px!important;border-radius:9px!important;background:#eff5fd!important;font-size:11px!important}
.login-shell .field-shell input{font-size:14px!important;font-weight:500!important}
.login-shell .field-shell input::placeholder{color:#8796a8!important}
.login-shell .password-toggle{font-size:12px!important;color:#1f568e!important;font-weight:700!important}
.login-shell .login-meta-row{margin:1px 0 12px!important;gap:10px!important}
.login-shell .remember-box,.login-shell .support-copy{font-size:11px!important;color:#233f5d!important}
.login-shell .login-submit{height:47px!important;border:0!important;border-radius:12px!important;padding:0 17px!important;background:linear-gradient(112deg,#1857a1,#0c3e7f)!important;box-shadow:0 12px 23px rgba(17,73,143,.22)!important;font-size:13px!important;letter-spacing:.006em!important;transition:transform .16s,box-shadow .16s!important}
.login-shell .login-submit:hover:not(:disabled){transform:translateY(-1px)!important;box-shadow:0 16px 25px rgba(17,73,143,.28)!important}
.login-shell .login-account-help{font-size:11px!important;line-height:1.55!important;color:#233f5d!important;margin-top:10px!important}
.login-shell .login-footnote{font-size:10px!important;color:#607b94!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;flex-wrap:wrap!important;margin-top:12px!important;text-align:center!important}
.login-footnote .stage-dot{width:6px;height:6px;background:#1c9866;box-shadow:0 0 0 3px rgba(28,152,102,.11)}
.login-mobile-brand{display:none}
/* Inputs use one neutral focus border on their enclosing field. */
.login-screen .login-shell .field-shell input,
.login-screen .login-shell .field-shell input:focus,
.login-screen .login-shell .field-shell input:focus-visible{
  border:0!important;outline:none!important;box-shadow:none!important;
  background:transparent!important;
}
.login-screen .login-shell .field-shell input:-webkit-autofill,
.login-screen .login-shell .field-shell input:-webkit-autofill:hover,
.login-screen .login-shell .field-shell input:-webkit-autofill:focus{
  -webkit-text-fill-color:#233f5d!important;
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  caret-color:#233f5d!important;
}
.login-screen .login-shell .field-shell input:autofill{
  background:#fff!important;color:#233f5d!important;
}
.login-screen button:focus-visible,
.login-screen input[type="checkbox"]:focus-visible{
  outline:2px solid #8b7545!important;outline-offset:3px!important;
}
/* Authenticated application: subtle design lift without rewriting functionality. */
body.authenticated .sidebar{background:linear-gradient(178deg,#fff,#fbfdff)!important;border-right:1px solid #e1e9f3!important;box-shadow:3px 0 19px rgba(19,52,91,.035)}
body.authenticated .sidebar-brand{padding-bottom:18px!important}
body.authenticated .nav-item{min-height:44px!important;border-radius:12px!important;transition:background .15s,color .15s,transform .15s!important}
body.authenticated .nav-item:hover{background:#eef5fd!important;transform:translateX(2px)!important}
body.authenticated .nav-item.active{background:linear-gradient(100deg,#e9f2fd,#f1f7ff)!important;color:#174b88!important;box-shadow:inset 3px 0 #2767b7!important}
body.authenticated .topbar{background:rgba(255,255,255,.97)!important;border-bottom:1px solid #e0e9f3!important;box-shadow:0 3px 18px rgba(20,51,89,.035)!important}
body.authenticated .icon-btn:focus-visible,body.authenticated .nav-item:focus-visible{outline:3px solid #78b2f6;outline-offset:2px}
body.authenticated #view-rkpd-control .rkpdctl-stats article{border-radius:17px!important;box-shadow:0 7px 22px rgba(17,59,107,.045)!important}
body.authenticated #view-rkpd-control .rkpdctl-panel{border-radius:0 0 17px 17px!important}
/* Tablet: two balanced columns if there is enough room. */
@media(max-width:960px) and (min-width:701px){
  .login-screen .login-shell{grid-template-columns:43% 57%!important;min-height:450px!important}
  .login-shell .login-visual,.login-shell .login-access{min-height:450px!important}
  .login-shell .login-visual{padding:28px!important}
  .login-shell .login-access{padding:28px!important}
  .login-shell .login-visual h1{font-size:20px!important}
  .login-shell .login-portal-option{padding:10px!important}
}
/* Phones: show a brand header above the form, avoid cramped two-column cards. */
@media(max-width:700px){
  body.auth-guest #loginScreen{display:flex!important;flex-direction:column!important;justify-content:safe center!important;align-items:center!important;padding:18px 12px!important;min-height:100dvh!important}
  .login-screen::before{background-size:cover!important;background-position:45% center!important}
  .login-screen .login-shell{grid-template-columns:1fr!important;min-height:0!important;width:min(470px,100%)!important;max-height:none!important;border-radius:21px!important}
  .login-shell .login-visual{display:none!important}
  .login-shell .login-access{min-height:0!important;padding:24px clamp(18px,5vw,30px)!important;background:rgba(255,255,255,.66)!important;align-items:stretch!important}
  .login-mobile-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
  .login-mobile-brand img{width:49px;height:55px;object-fit:contain}
  .login-mobile-brand strong{display:block;font-size:20px;font-weight:850;color:#0d335e;letter-spacing:-.02em}
  .login-mobile-brand span{display:block;font-size:11px;color:#65809b;margin-top:2px}
  .login-shell .login-card-head h2{font-size:27px!important}
  .login-shell .login-card-head p{margin-bottom:20px!important}
  .login-shell .login-portal-option{min-height:67px!important}
  .login-shell .login-meta-row{flex-wrap:wrap!important}
}
@media(max-width:390px){
  .login-shell .login-access{padding:21px 17px!important}
  .login-shell .login-portal-option{padding:9px!important}
  .login-shell .login-portal-option b{font-size:12px!important}
  .login-shell .login-portal-option span{font-size:10px!important}
  .login-shell .login-footnote{font-size:9px!important}
}
@media(max-height:670px) and (min-width:701px){
  .login-screen .login-shell{min-height:0!important}
  .login-shell .login-visual,.login-shell .login-access{min-height:435px!important}
  .login-shell .login-access{padding-top:21px!important;padding-bottom:21px!important}
  .login-shell .login-card-head p{margin-bottom:17px!important}
  .login-shell .login-portal-switch{margin-bottom:12px!important}
}
@media(prefers-reduced-motion:reduce){
  .login-shell .login-submit,.login-shell .login-portal-option,body.authenticated .nav-item{transition:none!important;transform:none!important}
}
/* Clearer choices for admin workspace and more breathable working surfaces. */
body.authenticated .workspace-gate{background:radial-gradient(circle at 8% 10%,rgba(28,100,177,.12),transparent 30%),#eef4fa!important}
body.authenticated .workspace-gate-shell{border-radius:23px!important;border:1px solid #dce7f2!important;box-shadow:0 26px 75px rgba(11,45,89,.15)!important}
body.authenticated .workspace-type-btn{border-radius:13px!important;transition:background .15s,border-color .15s,box-shadow .15s!important}
body.authenticated .workspace-type-btn:hover:not(:disabled){border-color:#7ba3d1!important;background:#f3f8ff!important}
body.authenticated .workspace-choice-preview{border-radius:14px!important;background:#f6faff!important}
body.authenticated .metric,body.authenticated .panel{border-radius:16px!important;box-shadow:0 7px 21px rgba(16,51,90,.045)!important}
body.authenticated #view-rkpd-control .rkpdctl-heading h1{font-size:clamp(24px,2.2vw,29px)!important}
body.authenticated #view-rkpd-control .rkpdctl-heading p,body.authenticated #view-rkpd-control .rkpdctl-panel-head p{font-size:12px!important;line-height:1.6!important}
body.authenticated #view-rkpd-control .rkpdctl-feedback{font-size:12px!important}
body.authenticated #view-rkpd-control .rkpdctl-tabs button{font-size:12px!important}
body.authenticated #view-rkpd-control th,body.authenticated #view-rkpd-control td{font-size:12px!important}
body.authenticated #view-rkpd-control .rkpdctl-flag,body.authenticated #view-rkpd-control .rkpdctl-small{font-size:12px!important}
@media(max-width:690px){body.authenticated .workspace-gate{padding:12px!important;overflow:auto!important}body.authenticated .workspace-gate-shell{padding:19px!important;max-width:100%!important}body.authenticated .workspace-gate-head{flex-wrap:wrap!important}body.authenticated .workspace-picker-grid{grid-template-columns:1fr!important}}