:root{
  --deep:#0b2e3c;
  --deep2:#0f3d50;
  --river:#1b6b7a;
  --river-light:#4a9bab;
  --silt:#e8ded0;
  --sand:#f6f2ea;
  --paper:#fffdf8;
  --ink:#12262c;
  --muted:#5c6f74;
  --amber:#c9822c;
  --good:#3f7d5c;
  --bad:#b6522f;
  --line:#d9d0c0;
  --radius:10px;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--sand);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  min-height:100vh;
}
a{color:var(--river);}
.wrap{max-width:1180px; margin:0 auto; padding: 0 24px;}

/* ---------- Header with river gradient (used on pages with body.has-hero) ---------- */
body.has-hero{
  background:
    linear-gradient(180deg, var(--deep) 0%, var(--deep2) 300px, var(--sand) 300px, var(--sand) 100%);
  padding-bottom: 60px;
}
header.top{ padding: 28px 0 22px; color:#f1ece0; }
.eyebrow{
  font-family: var(--mono); letter-spacing:.12em; text-transform:uppercase;
  font-size:11.5px; color:#9fd0d6; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--river-light); display:inline-block; }
h1{ font-family: Georgia, 'Times New Roman', serif; font-weight:600; font-size:32px; line-height:1.15; margin:12px 0 6px; letter-spacing:-0.01em; }
.sub{ color:#bcd2d6; font-size:14.5px; max-width:640px; line-height:1.5; }
.river-line{ position:relative; height:40px; margin-top:14px; overflow:hidden; }
.river-line svg{ width:100%; height:100%; display:block; }

/* ---------- Top navbar (app chrome) ---------- */
.navbar{
  background: var(--deep);
  color:#eaf3f4;
  padding: 12px 0;
}
.navbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.navbar .brand{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#a9d6dd; display:flex; align-items:center; gap:8px; }
.navbar nav{ display:flex; gap:4px; flex-wrap:wrap; }
.navbar nav a{
  color:#dcebee; text-decoration:none; font-size:13.5px; padding:7px 12px; border-radius:7px; transition: background .15s;
}
.navbar nav a:hover, .navbar nav a.active{ background: rgba(255,255,255,0.12); }
.navbar .userbox{ display:flex; align-items:center; gap:10px; font-size:13px; color:#bcd2d6; }
.navbar .userbox .role-badge{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; padding:2px 8px; border-radius:20px;
  background: rgba(74,155,171,0.25); color:#bfe3e9;
}
.navbar .userbox a{ color:#f0c9a6; text-decoration:none; }
.navbar .userbox a:hover{ text-decoration:underline; }

/* ---------- stat cards ---------- */
.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top: -40px; position:relative; z-index:5; }
.stat-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 10px 24px -14px rgba(11,46,60,0.35); }
.stat-num{ font-family: Georgia, serif; font-size: 28px; font-weight:700; color: var(--deep); line-height:1; }
.stat-label{ font-size: 11.5px; color: var(--muted); margin-top:8px; text-transform:uppercase; letter-spacing:.05em; }
.stat-sub{ font-family: var(--mono); font-size:11px; color: var(--river); margin-top:4px; }

/* ---------- panel / cards ---------- */
.panel{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); margin-top: 22px; padding: 22px; box-shadow: 0 10px 24px -18px rgba(11,46,60,0.25); }
.panel-title{ font-family: var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:11px; color: var(--river); margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
#resultCount{color:var(--muted); text-transform:none; letter-spacing:0;}

.search-row{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.search-box{ flex:1; position:relative; min-width:220px; }
.search-box input{ width:100%; padding: 12px 14px 12px 40px; border:1.5px solid var(--line); border-radius:8px; font-size:14.5px; font-family:inherit; background: var(--sand); color:var(--ink); transition: border-color .15s, background .15s; }
.search-box input:focus{ outline:none; border-color: var(--river); background: var(--paper); }
.search-icon{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color: var(--muted); pointer-events:none; }

.btn{
  border:1.5px solid var(--line); background: var(--sand); color: var(--ink);
  padding: 10px 18px; border-radius:8px; font-family: inherit; font-size:13.5px;
  cursor:pointer; transition: all .15s; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{ background: var(--silt); }
.btn-primary{ background: var(--river); border-color: var(--river); color:#fff; }
.btn-primary:hover{ background: var(--deep2); }
.btn-danger{ background:#f5e6e0; border-color:#e3bfae; color: var(--bad); }
.btn-danger:hover{ background:#f0d5c9; }
.btn-sm{ padding:6px 12px; font-size:12.5px; }

.filters{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.filter-group label{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; font-family: var(--mono); }
select, input[type=text], input[type=number], input[type=password], input[type=url], input[type=date], textarea{
  width:100%; padding:9px 10px; border:1.5px solid var(--line); border-radius:7px; background: var(--sand); font-family:inherit; font-size:13.5px; color:var(--ink); cursor:pointer;
}
textarea{ cursor:text; resize:vertical; }
input[type=text], input[type=number], input[type=password], input[type=url], input[type=date]{ cursor:text; }
select:focus, input:focus, textarea:focus{ outline:none; border-color:var(--river); background:var(--paper); }

/* ---------- table ---------- */
.table-wrap{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); margin-top:18px; overflow:hidden; box-shadow: 0 10px 24px -18px rgba(11,46,60,0.25); }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{ text-align:left; background: var(--deep); color:#dcebee; font-family: var(--mono); font-weight:500; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding: 12px 14px; position:sticky; top:0; cursor:pointer; user-select:none; white-space:nowrap; }
thead th:hover{ background: var(--river); }
thead th .arrow{opacity:.5; font-size:9px; margin-left:4px;}
tbody tr{ border-bottom:1px solid var(--line); transition: background .1s; }
tbody tr:hover{ background: var(--sand); cursor:pointer; }
tbody td{ padding: 11px 14px; vertical-align: top; color: var(--ink); }
td.nama{ max-width:340px; font-weight:500; line-height:1.4;}
td.lokasi{ color:var(--muted); max-width:200px; line-height:1.4;}
td.center{text-align:center;}
td.num{font-family:var(--mono); color:var(--muted); text-align:right; white-space:nowrap;}
td.actions{ white-space:nowrap; }
td.actions a, td.actions button{ margin-right:6px; }

.satker-tag{ display:inline-block; padding: 3px 9px; border-radius: 20px; font-size:11px; font-family: var(--mono); font-weight:600; letter-spacing:.02em; }
.tag-ATAB{background:#e3edf0; color:#1b6b7a;}
.tag-PJPA{background:#eaf1e6; color:#3f7d5c;}
.tag-PJSA{background:#f0e9d8; color:#a3762b;}
.tag-Bendungan{background:#f2e2dd; color:#b6522f;}
.tag-Balai{background:#e6e6ee; color:#4d4d78;}
.tag-{background:#eee; color:#888;}

.doc-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-family: var(--mono); padding:3px 8px; border-radius:20px; }
.doc-ada{background:#e3efe8; color:var(--good);}
.doc-tidak{background:#f5e6e0; color:var(--bad);}
.doc-dash{background:#eee; color:#999;}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.dot-ada{background:var(--good);}
.dot-tidak{background:var(--bad);}
.dot-dash{background:#aaa;}

.progress-bar{ width:80px; height:6px; border-radius:4px; background:var(--silt); overflow:hidden; display:inline-block; vertical-align:middle; margin-right:6px; }
.progress-bar span{ display:block; height:100%; background: var(--river); }

.empty-state{ padding: 60px 20px; text-align:center; color: var(--muted); }
.empty-state .big{font-size:34px; margin-bottom:8px;}

footer.app-footer{ max-width:1180px; margin: 24px auto 0; padding: 0 24px 24px; font-size:11.5px; color: var(--muted); font-family: var(--mono); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

.flash{ padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:16px; }
.flash-success{ background:#e3efe8; color:var(--good); border:1px solid #bfe0cd; }
.flash-error{ background:#f5e6e0; color:var(--bad); border:1px solid #e3bfae; }
.flash-info{ background:#e3edf0; color:var(--river); border:1px solid #bcd8dd; }

/* ---------- forms / auth pages ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, var(--deep) 0%, var(--deep2) 100%); padding:20px; }
.auth-card{ background: var(--paper); border-radius: 14px; padding: 40px 36px; width:100%; max-width:400px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }
.auth-card .eyebrow{ color: var(--river); }
.auth-card .eyebrow::before{ background: var(--river); }
.auth-card h1{ font-size:24px; color:var(--deep); margin-bottom:4px; }
.auth-card .sub{ color: var(--muted); margin-bottom:24px; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; font-family:var(--mono); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.help-text{ font-size:12px; color:var(--muted); margin-top:4px; }

/* card form (non-hero pages) */
.card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 10px 24px -18px rgba(11,46,60,0.25); margin-top:20px; }
.card h2{ font-family: Georgia, serif; font-size:20px; color:var(--deep); margin-top:0; }
.page-title{ padding: 28px 0 4px; }
.page-title h1{ color: var(--deep); font-size:26px; }
.page-title .sub{ color: var(--muted); }

/* ---------- modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(11,46,60,0.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal-box{ background: var(--paper); border-radius:12px; max-width:640px; width:100%; max-height:88vh; overflow-y:auto; padding:26px 28px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5); }
.modal-box h2{ font-family: Georgia, serif; color:var(--deep); margin-top:0; font-size:21px; }
.modal-close{ float:right; background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); }
.doc-row{ display:grid; grid-template-columns: 1fr 110px 1fr 34px; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
.doc-row:last-child{ border-bottom:none; }
.doc-row .doc-name{ font-weight:500; font-size:13.5px; }
.doc-row.readonly{ grid-template-columns: 1fr auto 1fr; }
.doc-row.doc-row-form{ grid-template-columns: 1fr 110px 1fr; }

table.mini{ width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
table.mini th{ text-align:left; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--muted); padding:6px 8px; border-bottom:2px solid var(--line); }
table.mini td{ padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }

.badge-role{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; padding:3px 9px; border-radius:20px; background:#e3edf0; color:var(--river); }
.badge-role.role-admin{ background:#f0e9d8; color:var(--amber); }
.badge-role.role-viewer{ background:#eee; color:var(--muted); }
.badge-status-nonaktif{ font-family:var(--mono); font-size:10.5px; padding:3px 9px; border-radius:20px; background:#f5e6e0; color:var(--bad); }

@media (max-width: 900px){
  .stats{grid-template-columns: repeat(2,1fr);}
  .filters{grid-template-columns: repeat(2,1fr);}
  .form-row{grid-template-columns:1fr;}
  h1{font-size:26px;}
  .table-wrap{overflow-x:auto;}
  table{min-width:900px;}
  .doc-row{grid-template-columns:1fr; gap:4px;}
}