/* SIMR PA DENPASAR
   Bootstrap 5.3 presentation layer + application-specific theme.
*/
:root{
  --simr-navy:#123b66;
  --simr-navy-dark:#0d2f51;
  --simr-blue:#1769aa;
  --simr-bg:#f4f7fb;
  --simr-border:#e3e8ef;
  --simr-text:#172033;
  --simr-muted:#64748b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--simr-bg);
  color:var(--simr-text);
  font-size:.875rem;
}
.topbar{
  position:fixed;z-index:1040;top:0;left:0;right:0;height:68px;
  background:linear-gradient(135deg,var(--simr-navy),#174d7f);
  color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
}
.brand{font-size:1.18rem;font-weight:700;letter-spacing:.01em}
.subtitle{font-size:.72rem;opacity:.82;margin-top:2px}
.top-right{font-size:.76rem;opacity:.85}
.sidebar{
  position:fixed;z-index:1030;top:68px;bottom:0;left:0;width:230px;
  background:var(--simr-navy-dark);padding:16px 10px;color:#dbeafe;overflow:auto;
}
.sidebar a{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  padding:10px 13px;border-radius:.55rem;margin:3px 0;font-size:.82rem;
  transition:.15s ease;
}
.sidebar a:hover{background:#16466f;color:#fff;transform:translateX(1px)}
.sidebar a.active{
  background:linear-gradient(90deg,#1f6798,#1c5888);
  color:#fff;box-shadow:inset 3px 0 0 #8fd0ff;
}
.nav-section{
  font-size:.62rem;letter-spacing:.1em;opacity:.55;
  padding:15px 13px 6px;font-weight:700;
}
.sidebar-bottom{border-top:1px solid #ffffff18;margin-top:18px;padding-top:12px}
.user-chip{
  padding:9px 12px;display:flex;flex-direction:column;font-size:.75rem;
  background:#ffffff09;border-radius:.5rem;margin-bottom:6px
}
.user-chip span{opacity:.62;font-size:.65rem;margin-top:2px}
.main{margin-left:230px;padding:90px 28px 35px;min-height:100vh}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}
h1{font-size:1.55rem;margin:0 0 5px;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.1rem;margin:0 0 6px;font-weight:700}
h3{font-size:1rem}
.muted{color:var(--simr-muted);font-size:.75rem}
.year-badge{
  background:#e7eef7;color:var(--simr-navy);padding:7px 11px;
  border-radius:50rem;font-size:.68rem;font-weight:700
}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.card{
  background:#fff;border:1px solid var(--simr-border);border-radius:.7rem;
  padding:16px;box-shadow:0 .125rem .4rem rgba(16,24,40,.05);
}
.card span{font-size:.78rem;color:#334155}
.card strong{display:block;font-size:1.75rem;margin-top:7px;line-height:1}
.grid-2{display:grid;grid-template-columns:1.45fr 1fr;gap:18px;margin-bottom:18px}
.panel{
  background:#fff;border:1px solid var(--simr-border);border-radius:.7rem;
  box-shadow:0 .125rem .45rem rgba(16,24,40,.05);padding:18px;margin-bottom:18px
}
.panel-title{
  font-size:1rem;font-weight:700;margin-bottom:14px;
  display:flex;align-items:baseline;gap:6px
}
.table-wrap{overflow:auto;border-radius:.5rem}
table{width:100%;border-collapse:collapse;font-size:.76rem}
th,td{padding:10px 11px;border-bottom:1px solid #e9edf2;text-align:left;vertical-align:top}
th{
  background:#f8fafc;color:#0f172a;white-space:nowrap;
  font-size:.7rem;text-transform:none;font-weight:700
}
tbody tr:hover{background:#f8fbff}
td small{display:block;color:var(--simr-muted);margin-top:4px;line-height:1.35}
.wide{min-width:1150px}
.empty{text-align:center;color:var(--simr-muted);padding:28px}
.toolbar{display:flex;gap:9px;align-items:center;margin-bottom:13px}
.toolbar input{flex:1}
input,select,textarea{
  width:100%;padding:.48rem .65rem;border:1px solid #cbd5e1;border-radius:.45rem;
  background:#fff;color:var(--simr-text);font:inherit;
  transition:border-color .15s,box-shadow .15s
}
input:focus,select:focus,textarea:focus{
  border-color:#75aadb;box-shadow:0 0 0 .2rem rgba(23,105,170,.12);outline:0
}
textarea{resize:vertical}
label{font-size:.73rem;font-weight:700;display:block;margin-bottom:10px}
label input,label select,label textarea{margin-top:5px;font-weight:400}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.full{grid-column:1/-1}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:0;border-radius:.45rem;padding:.5rem .75rem;text-decoration:none;
  cursor:pointer;font:inherit;font-size:.76rem;font-weight:600;transition:.15s ease
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--simr-blue);color:#fff}
.btn.primary:hover{background:#145d96;color:#fff}
.btn.secondary{background:#edf2f7;color:#172033}
.btn.secondary:hover{background:#e2e8f0}
.btn.danger{background:#fee2e2;color:#991b1b}
.btn.small{padding:.35rem .55rem;font-size:.68rem}
.btn.wide{width:100%;min-width:0;margin-top:6px}
.actions{white-space:nowrap}
.flash{padding:10px 13px;border-radius:.5rem;margin-bottom:14px;font-size:.74rem;border:1px solid transparent}
.flash.success{background:#ecfdf3;color:#166534;border-color:#bbf7d0}
.flash.error{background:#fff1f2;color:#991b1b;border-color:#fecdd3}
.flash.warning{background:#fffbeb;color:#92400e;border-color:#fde68a}
.badge,.score{
  display:inline-flex;align-items:center;justify-content:center;border-radius:50rem;
  padding:4px 8px;font-size:.64rem;font-weight:700;white-space:nowrap
}
.score{border-radius:.4rem;min-width:32px}
.very-high{background:#7f1d1d;color:#fff}
.high{background:#fecaca;color:#991b1b}
.medium{background:#fef3c7;color:#92400e}
.low{background:#dcfce7;color:#166534}
.very-low{background:#dbeafe;color:#1e40af}
.neutral{background:#e5e7eb;color:#475569}
.progress{height:9px;background:#e5e7eb;border-radius:50rem;overflow:hidden;margin:9px 0}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#1769aa,#3c8dcc)}
.metric-big{font-size:2.7rem;font-weight:700;color:var(--simr-navy);margin:8px 0}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:25px}
.mini-stats div{background:#f8fafc;padding:10px;border-radius:.5rem;border:1px solid #edf1f5}
.mini-stats b{display:block;font-size:1.25rem}.mini-stats span{font-size:.64rem;color:var(--simr-muted)}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.flow>div{
  background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid #e5e7eb;
  border-radius:.6rem;padding:12px;font-size:.68rem;color:var(--simr-blue)
}
.flow b{display:block;color:var(--simr-text);margin-top:3px}.flow small{display:block;color:var(--simr-muted);margin-top:6px;line-height:1.4}
.risk-summary{display:flex;justify-content:space-between;gap:18px}
.score-stack{display:flex;gap:14px;align-items:center}
.score-stack div{display:flex;flex-direction:column;gap:5px;text-align:center}
.score-stack small{font-size:.62rem;color:var(--simr-muted)}
.score-stack .score{font-size:1rem;min-width:48px;padding:7px}
.hint{font-size:.68rem;background:#f8fafc;padding:10px;border-radius:.45rem;color:var(--simr-muted);margin-top:10px;border:1px solid #edf1f5}
.risk-map-wrap{position:relative;max-width:760px;margin:auto}
.matrix{display:grid;grid-template-columns:48px repeat(5,1fr);gap:5px}
.corner,.axis{display:flex;align-items:center;justify-content:center;color:var(--simr-muted);font-size:.68rem;font-weight:700}
.map-cell{
  min-height:100px;border-radius:.55rem;display:flex;align-items:center;justify-content:center;
  position:relative;flex-direction:column;cursor:pointer;border:1px solid rgba(0,0,0,.04)
}
.map-cell strong{font-size:1.15rem}.map-cell span{font-size:.72rem}
.map-cell .map-tooltip{
  display:none;position:absolute;z-index:5;left:50%;top:calc(100% + 5px);
  transform:translateX(-50%);width:260px;background:#fff;border:1px solid #cbd5e1;
  border-radius:.5rem;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.15);padding:8px
}
.map-cell:hover .map-tooltip{display:block}
.map-tooltip a{display:block;padding:6px;color:var(--simr-blue);text-decoration:none;border-bottom:1px solid #eee;font-size:.68rem}
.map-label{text-align:center;color:var(--simr-muted);font-size:.68rem;font-weight:700;margin:8px}
.legend{display:flex;gap:14px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.legend span{font-size:.68rem;display:flex;align-items:center;gap:5px}.legend i{width:15px;height:15px;border-radius:4px;display:inline-block}
.risk-map-wrap .y{position:absolute;left:-32px;top:48%;transform:rotate(-90deg)}
.risk-map-wrap .x{margin-top:10px}
dialog{border:0;border-radius:.7rem;box-shadow:0 1rem 4rem rgba(0,0,0,.25);padding:0;width:min(500px,92%)}
dialog::backdrop{background:rgba(0,0,0,.55)}
.dialog-form{padding:20px}.dialog-form h3{margin-top:0}
.login-page{
  min-height:100vh;
  background-image:
    linear-gradient(rgba(8,35,60,.35),rgba(8,35,60,.35)),
    url('bg-login.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;

  display:flex;
  align-items:center;
  justify-content:center;
}
.login-card {
    width: min(430px, 92%) !important;

    background: rgba(255, 255, 255, 0.16) !important;

    border: 1px solid rgba(255, 255, 255, 0.40) !important;

    border-radius: 20px !important;

    padding: 30px !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}



.login-logo {
    text-align: center;
    margin-bottom: 10px;
}

.login-logo img {
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

.login-sub {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    text-align: center;
}

.login-sub {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    text-align: center;
}

.login-card label,
.login-card label span {
    color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.demo-login {
    margin-top: 18px;
    background: rgba(0, 0, 0, .18);
    padding: 10px;
    border-radius: .45rem;
    color: #ffffff;
    font-size: .63rem;
    line-height: 1.6;
    border: 1px solid rgba(255, 255, 255, .18);
}

.login-copyright {
    margin-top: 18px;
    text-align: center;
    color: rgba(255,255,255,.90);
    font-size: .68rem;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

.app-copyright {
    text-align: center;
    padding: 14px 20px;
    color: #64748b;
    font-size: .68rem;
    line-height: 1.6;
}

@media(max-width:1050px){
  .cards{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .top-right{display:none}.sidebar{width:190px}.main{margin-left:190px;padding-left:15px;padding-right:15px}
  .formgrid{grid-template-columns:1fr}.full{grid-column:auto}.cards{grid-template-columns:1fr 1fr}
  .risk-summary{flex-direction:column}.score-stack{justify-content:flex-start}.flow{grid-template-columns:1fr}
}