/* SINERGI institutional theme for SIGAP / GeoField */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --border: #dfe3e8;
  --border2: #c8ced8;
  --cyan: #153e75;
  --navy: #102d50;
  --navy-dark: #0a2446;
  --text: #172033;
  --text-dim: #364152;
  --text-muted: #667085;
  --gold: #c89b3c;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 5px 18px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);
}

body { background:var(--bg); color:var(--text); }

#view-login:not(.active) { display:none; }

/* Login: formal government service portal */
#view-login.view.active {
  background:linear-gradient(145deg,#0a2446 0%,#123b6b 58%,#1c548b 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}
.login-grid {
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
}
.login-glow { background:radial-gradient(circle,rgba(255,255,255,.08),transparent 68%); left:22%; }
.login-hero-panel {
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:52px clamp(44px,6vw,92px);
  color:#fff;
  overflow:hidden;
}
.login-hero-panel::after {
  content:'';
  position:absolute;
  width:360px;
  height:360px;
  left:-190px;
  bottom:-190px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.022),0 0 0 140px rgba(255,255,255,.016);
  pointer-events:none;
}
.login-government-brand { display:flex; align-items:center; gap:14px; }
.login-government-brand img { width:58px; height:58px; padding:5px; object-fit:contain; background:rgba(255,255,255,.95); border-radius:5px; }
.login-government-brand span,.login-government-brand strong { display:block; }
.login-government-brand span { margin-bottom:2px; color:rgba(255,255,255,.7); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.login-government-brand strong { font-size:19px; letter-spacing:.01em; }
.login-hero-copy { max-width:600px; }
.login-kicker { display:inline-block; margin-bottom:15px; padding-left:11px; border-left:3px solid var(--gold); color:#efd07c; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.login-hero-copy h2 { margin:0 0 16px; color:#fff; font-size:clamp(30px,3vw,46px); line-height:1.16; letter-spacing:-.035em; }
.login-hero-copy p { max-width:520px; margin:0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.8; }
.login-feature-list { display:grid; gap:11px; }
.login-feature-list div { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.82); font-size:12px; font-weight:600; }
.login-feature-list div::before { content:'✓'; width:20px; height:20px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(255,255,255,.09); color:#efd07c; font-size:10px; }
.login-hero-footer { color:rgba(255,255,255,.36); font-size:9px; font-weight:700; letter-spacing:.14em; }
.login-card {
  width:min(440px,100%);
  margin:auto;
  border:1px solid var(--border);
  border-top:4px solid var(--cyan);
  border-radius:9px;
  padding:32px 36px;
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}
.brand-icon { border-radius:5px; box-shadow:none; }
.brand-name { color:var(--cyan); letter-spacing:.08em; }
.brand-sub { color:var(--text-muted); }
.login-title { font-weight:700; }
.form-input,.form-select { background:#fff; border-color:var(--border2); border-radius:6px; }
.form-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(21,62,117,.12); }
.btn-primary { background:var(--cyan); border-radius:6px; box-shadow:0 1px 2px rgba(21,62,117,.25); }
.btn-primary:hover { background:#0d2b55; opacity:1; }
.status-stack { gap:7px; margin-bottom:22px; }
.api-status-bar { padding:8px 10px; border-radius:6px; font-size:10.5px; }
.login-brand { margin-bottom:25px; }
.login-desc { margin-bottom:22px; }

/* Administration shell */
.admin-sidebar {
  width:250px;
  background:linear-gradient(180deg,#0f2a24 0%,#132f29 56%,#0c211d 100%);
  border-right:4px solid var(--gold);
}
.sidebar-brand { border-bottom-color:rgba(255,255,255,.08); }
.sidebar-brand .brand-icon { border-radius:4px; }
.nav-section { color:#7794b1; letter-spacing:.12em; }
.sidebar-head {
  min-height:78px;
  background:rgba(0,0,0,.12);
  border-bottom:1px solid rgba(239,208,124,.22);
}
.sidebar-icon {
  width:42px;
  height:42px;
  border:1px solid rgba(239,208,124,.32);
  background:rgba(255,255,255,.12);
  border-radius:5px;
}
.sidebar-brand-name { color:#fff; font-size:13px; letter-spacing:.12em; }
.sidebar-brand-sub { color:rgba(255,255,255,.66); font-size:9px; }
.nav-sec {
  margin:10px 10px 4px;
  padding:8px 9px 4px;
  color:#efd07c;
  border-top:1px solid rgba(255,255,255,.08);
}
.nav-item {
  margin:2px 10px;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-left:4px solid transparent;
  border-radius:4px;
  color:rgba(255,255,255,.76);
  background:rgba(255,255,255,.045);
}
.nav-item:hover {
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(239,208,124,.22);
}
.nav-item.active {
  background:rgba(239,208,124,.14);
  color:#fff;
  border-left-color:var(--gold);
  border-top-color:rgba(239,208,124,.32);
  border-right-color:rgba(239,208,124,.22);
  border-bottom-color:rgba(239,208,124,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-icon,
[data-panel] .nav-icon,
[data-panel].active .nav-icon {
  width:24px;
  height:24px;
  border-radius:4px;
  color:#efd07c;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.1);
  box-shadow:none;
}
.sidebar-foot {
  border-top:1px solid rgba(239,208,124,.2);
  background:rgba(0,0,0,.12);
}
.user-badge {
  border-radius:5px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
}
.user-avatar { background:var(--gold); color:#172033; border:0; box-shadow:none; }
.btn-change-pass,.btn-logout { border-radius:5px; }
.admin-main { background:#eef2f4; }
.admin-topbar {
  min-height:66px;
  padding:10px 20px;
  border-bottom:3px solid var(--gold);
  border-top:0;
  background:linear-gradient(180deg,#fff 0%,#f7f9fb 100%);
  box-shadow:0 2px 8px rgba(16,24,40,.08);
}
.topbar-title {
  color:var(--navy);
  font-size:18px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.topbar-sub { color:var(--text-muted); }
.admin-content {
  background:
    linear-gradient(rgba(16,45,80,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,45,80,.035) 1px,transparent 1px),
    #eef2f4;
  background-size:28px 28px;
}
.admin-panel { padding:16px; }

/* Cards, metrics and data */
.stats-grid { gap:10px; margin-bottom:14px; }
.stat-card {
  min-height:118px;
  border:1px solid #c4ccd6;
  border-radius:3px;
  padding:16px 16px 14px;
  background:linear-gradient(180deg,#fff 0%,#f9fbfd 100%);
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.stat-card:hover {
  transform:none;
  border-color:#9faaba;
  box-shadow:0 5px 18px rgba(16,24,40,.1);
}
.stat-card::before {
  height:5px;
  border-radius:0;
}
.stat-label {
  color:#334155;
  font-size:10px;
  letter-spacing:.08em;
}
.stat-val {
  color:#111827;
  font-family:var(--mono);
  font-size:34px;
  letter-spacing:0;
}
.stat-meta { color:#475569; }
.stat-icon {
  top:14px;
  right:14px;
  opacity:.32;
}
.card {
  border:1px solid #c4ccd6;
  border-radius:3px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  background:#fff;
}
.card-head {
  min-height:42px;
  padding:10px 14px;
  background:linear-gradient(180deg,#153e35 0%,#112d27 100%);
  border-bottom:3px solid var(--gold);
  color:#fff;
}
.card-title {
  color:#fff;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.card-head .badge {
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
}
.card-body { padding:14px; }
.data-table {
  font-size:12px;
  border-collapse:separate;
  border-spacing:0;
}
.data-table th {
  position:sticky;
  top:0;
  z-index:2;
  padding:9px 11px;
  background:#e8edf2;
  color:#1f2937;
  border-right:1px solid #cbd5e1;
  border-bottom:2px solid #102d50;
  font-size:10px;
}
.data-table th:last-child,
.data-table td:last-child { border-right:0; }
.data-table td {
  padding:9px 11px;
  border-right:1px solid #e2e8f0;
  color:#111827;
}
.data-table tbody tr:nth-child(even) td { background:#f8fafc; }
.data-table tr:hover td { background:#eef6ff; }
.badge {
  border-radius:3px;
  border:1px solid currentColor;
}
.filter-pill {
  min-height:30px;
  border-radius:3px;
  border:1px solid #c4ccd6;
  background:#fff;
  color:#26364a;
  font-weight:700;
}
.filter-pill.active,
.filter-pill:hover {
  background:#153e75;
  color:#fff;
  border-color:#153e75;
}
.penugasan-toolbar,
.report-filter-bar {
  padding:10px;
  border:1px solid #c4ccd6;
  border-top:4px solid var(--gold);
  border-radius:3px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.penugasan-toolbar-actions .btn-sm,
.report-filter-bar .btn-sm,
.topbar-actions .btn-sm {
  min-height:34px;
}
.btn-sm {
  min-height:30px;
  border-radius:3px;
  border-color:#b8c2d0;
  background:linear-gradient(180deg,#fff 0%,#edf2f7 100%);
  color:#1f2937;
  font-weight:700;
}
.btn-sm:hover {
  background:#e8f0f8;
  border-color:#153e75;
}
.btn-sm.primary {
  background:linear-gradient(180deg,#1d5f9d 0%,#153e75 100%);
  border-color:#153e75;
  color:#fff;
}
.form-input,
.form-select {
  min-height:34px;
  border-radius:3px;
  border-color:#b8c2d0;
  background:#fff;
  color:#111827;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
}
.form-label {
  color:#26364a;
  font-weight:800;
  letter-spacing:.03em;
}
.export-card {
  border-radius:3px;
  border-color:#c4ccd6;
  text-align:left;
}
.export-card:hover {
  transform:none;
  border-color:#153e75;
}
.map-stat-bar {
  border-radius:0;
  border-bottom:3px solid var(--gold);
}

/* Field officer view */
.field-topbar { background:#102d50; border-bottom:3px solid var(--gold); box-shadow:var(--shadow); }
.field-brand-text,.field-topbar .user-name { color:#fff; }
.field-icon-btn { border-radius:6px; }
.field-content { background:var(--bg); }
.task-card { border-radius:7px; box-shadow:var(--shadow-sm); }
.task-card:hover { transform:none; box-shadow:var(--shadow); }
.task-hdr { border-bottom:2px solid var(--cyan); }
.photo-zone { border-radius:7px; }
.btn-submit,.btn-gps { border-radius:6px; background:var(--cyan); }
.field-bnav { border-top:3px solid var(--cyan); }
.field-bnav .active { color:var(--cyan); }

/* Shared controls and overlays */
.btn,.btn-sm,.modal-box,.map-legend-box,.map-stat-bar { border-radius:7px; }
.modal-head { border-bottom:2px solid var(--cyan); }
.toast { border-radius:7px; }

@media (max-width:900px) {
  #view-login.view.active { display:flex; padding:24px 16px; }
  .login-hero-panel { display:none; }
  .login-card { margin:auto; padding:28px 22px; }
  .admin-topbar { border-top-width:3px; }
  .admin-panel { padding:12px; }
}

@media (max-width:768px) {
  .admin-sidebar {
    width:250px;
    left:-250px;
  }

  #shell-admin.sidebar-open .admin-sidebar { left:0; }

  .admin-topbar {
    min-height:58px;
    padding:9px 12px;
  }

  .topbar-title { font-size:15px; }

  .stat-card {
    min-height:104px;
    padding:14px 12px;
  }

  .stat-val { font-size:28px; }

  .penugasan-toolbar,
  .report-filter-bar {
    padding:9px;
  }
}