/* SIPOGIM — sipogim.css
   Token warna DISALIN PERSIS dari style.css Portal SPPG Jeungjing,
   supaya SIPOGIM terasa satu keluarga visual dengan Portal walau
   backend-nya proyek Apps Script terpisah. Lihat juga portal.css utk
   asal nilai-nilai ini. */
:root {
  --color-sky: #127CB4; --color-sky-bright: #4FADE0; --color-sky-deep: #0C5D89;
  --color-sky-soft: #E6F3FB; --color-sky-mist: #DCEEFA;
  --color-navy: #14304F; --color-navy-deep: #0A1D33;
  --color-gold: #C9A227; --color-gold-soft: #FBF2DD; --color-gold-deep: #A9821C;
  --color-primary: var(--color-sky); --color-primary-dark: var(--color-sky-deep); --color-primary-soft: var(--color-sky-soft);
  --color-bg: #F6F9FC; --color-surface: #FFFFFF; --color-text: #17222E;
  --color-text-muted: #5B6876; --color-border: #E1E8F0; --color-muted-bg: #EEF2F6;
  --color-success: #1E8E5A; --color-success-bg: #E5F5EC;
  --color-warning: #C17F0A; --color-warning-bg: #FBF0D9;
  --color-danger: #C6403F; --color-danger-bg: #FBEAEA;
  --color-info: #2C64A0;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
}
* { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.5; min-height: 100vh;
}

/* ---- Topbar: gaya sama dgn shell-topbar Portal ---- */
.sg-topbar {
  position: sticky; top: 0; z-index: 40;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: linear-gradient(140deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: #fff; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 2px 12px rgba(10,29,51,.18);
}
.sg-topbar img { width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.sg-topbar strong { font-size: 14.5px; font-weight: 800; }
.sg-topbar small { display: block; font-size: 11px; opacity: .85; font-weight: 500; }
.sg-topbar-spacer { flex: 1; }

/* ---- Tab nav (dipakai di semua halaman selain login) ---- */
.sg-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 4px; -webkit-overflow-scrolling: touch; }
.sg-tab {
  flex-shrink: 0; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--color-border);
  background: #fff; color: var(--color-text); font-size: 13.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.sg-tab.active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

.sg-main { max-width: 760px; margin: 0 auto; padding: 16px; padding-bottom: 48px; }

.sg-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px;
}
.sg-card.accent { border-left: 4px solid var(--color-gold); }

.sg-title { font-size: 17px; font-weight: 800; color: var(--color-navy); margin: 0 0 4px; }
.sg-subtitle { font-size: 13px; color: var(--color-text-muted); margin: 0; }

/* ---- Form ---- */
.sg-field { margin-bottom: 14px; }
.sg-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; color: var(--color-text); }
.sg-input, .sg-select, .sg-textarea {
  width: 100%; padding: 11px 13px; font-size: 16px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff; color: var(--color-text); min-height: 44px;
}
.sg-textarea { min-height: 80px; resize: vertical; }

/* ---- Tombol ---- */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: #fff; color: var(--color-text); font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.sg-btn.primary { background: var(--color-sky); border-color: var(--color-sky); color: #fff; }
.sg-btn.success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.sg-btn.danger { background: #fff; border-color: var(--color-danger); color: var(--color-danger); }
.sg-btn.block { width: 100%; }
.sg-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Badge status (tiga tingkat) ---- */
.sg-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.sg-badge.status-success { background: var(--color-success-bg); color: var(--color-success); }
.sg-badge.status-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.sg-badge.status-danger { background: var(--color-danger-bg); color: var(--color-danger); }

.sg-empty { text-align: center; padding: 28px 16px; color: var(--color-text-muted); font-size: 13.5px; }
.sg-error { background: var(--color-danger-bg); color: var(--color-danger); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin: 10px 0; }
.sg-list-item { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.sg-list-item:last-child { border-bottom: none; }