/* 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 { background:#102d50; }
.sidebar-brand { border-bottom-color:rgba(255,255,255,.08); }
.sidebar-brand .brand-icon { border-radius:4px; }
.nav-section { color:#7794b1; letter-spacing:.12em; }
.nav-item { margin:1px 8px; padding:9px 10px; border-left:0; border-radius:6px; color:#a9bdd2; }
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active { background:rgba(255,255,255,.11); color:#fff; border-left:0; box-shadow:inset 3px 0 0 var(--gold); }
.nav-icon,
[data-panel] .nav-icon,
[data-panel].active .nav-icon { width:22px; height:22px; border-radius:5px; color:#efd07c; background:transparent; border-color:transparent; box-shadow:none; }
.user-badge { border-radius:7px; }
.user-avatar { background:var(--gold); color:#172033; border:0; box-shadow:none; }
.btn-change-pass,.btn-logout { border-radius:5px; }
.admin-topbar { min-height:62px; padding:10px 20px; border-bottom:1px solid var(--border); border-top:5px solid var(--cyan); box-shadow:var(--shadow-sm); }
.topbar-title { color:var(--navy); font-size:18px; }
.topbar-sub { color:var(--text-muted); }
.admin-panel { padding:18px; }

/* Cards, metrics and data */
.stats-grid { gap:10px; margin-bottom:14px; }
.stat-card { border-radius:7px; padding:17px; box-shadow:var(--shadow-sm); }
.stat-card:hover { transform:none; border-color:var(--border2); box-shadow:var(--shadow); }
.stat-card::before { border-radius:7px 7px 0 0; }
.stat-val { color:var(--text); font-family:var(--sans); font-size:28px; }
.card { border-radius:7px; box-shadow:var(--shadow-sm); }
.card-head { padding:12px 16px; background:#fff; border-bottom:2px solid var(--cyan); }
.card-title { color:var(--navy); }
.card-body { padding:16px; }
.data-table th { background:#f4f6f8; color:var(--text-muted); border-bottom:2px solid var(--cyan); }
.data-table td { padding:10px 12px; }
.data-table tbody tr:nth-child(even) td { background:#f8fafc; }
.badge,.filter-pill { border-radius:999px; }

/* 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; }
}