/* ============================================================
   POSYANDU DESA ARGOMULYO — app.css
   Panel Kader & Admin
   ============================================================ */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/PlusJakartaSans-Light.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Sora-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Sora-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Sora-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Sora-Bold.woff2') format('woff2'); }

:root {
  --green-dark: #0d4f2b;
  --green-main: #1a6b3c;
  --green-mid: #2d8c55;
  --green-light: #4caf72;
  --green-pale: #e8f5ee;
  --green-mist: #f0faf4;
  --gold: #f5a623;
  --coral: #ff6b6b;
  --sky: #4fc3f7;
  --purple: #9c6fde;
  --white: #ffffff;
  --text-dark: #0d1f16;
  --text-mid: #2d4a38;
  --text-soft: #5a7a65;
  --text-muted: #8fab97;
  --bg: #f0faf4;
  --card: #ffffff;
  --border: #ddeee5;
  --sidebar-w: 240px;
  --topbar-h: 60px;
  --shadow-sm: 0 2px 8px rgba(26,107,60,0.08);
  --shadow-md: 0 8px 24px rgba(26,107,60,0.12);
  --radius: 16px;
  --radius-sm: 10px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }

/* ── LAYOUT ── */
.layout { display:flex; min-height:100vh; }
.main-content {
  margin-left: var(--sidebar-w);
  flex:1;
  padding: calc(var(--topbar-h) + 24px) 24px 24px;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

/* ── SIDEBAR ── */
.sidebar {
  position: fixed; top:0; left:0; bottom:0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #0d4f2b 0%, #1a6b3c 50%, #2d8c55 100%);
  display: flex; flex-direction: column;
  z-index: 200; overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, left 0.3s ease;
}
.sidebar.collapsed {
  transform: translateX(-100%);
}
.sidebar-logo {
  display:flex; align-items:center; gap:10px;
  padding: 16px 8px 16px 0;
}
.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding-right: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar-toggle {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 20px;
  cursor: pointer;
  padding: 16px;
  transition: all 0.2s;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-toggle:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.logo-icon { font-size:28px; }
.logo-title { font-family:'Sora',sans-serif; font-size:14px; font-weight:700; color:#fff; line-height:1.2; }
.logo-sub { font-size:10px; color:rgba(255,255,255,0.6); font-weight:500; }
.sidebar-menu { list-style:none; padding: 12px 10px; flex:1; }
.sidebar-menu li { margin-bottom:2px; }
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.75); font-size:13px; font-weight:500;
  transition: all 0.2s;
}
.nav-link:hover { background: rgba(255,255,255,0.1); color:#fff; }
.nav-link.active { background: rgba(255,255,255,0.18); color:#fff; font-weight:600; }
.nav-icon { font-size:16px; width:20px; text-align:center; }
.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.kader-info { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.kader-avatar {
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.kader-name { font-size:12px; font-weight:600; color:#fff; }
.kader-role { font-size:10px; color:rgba(255,255,255,0.6); text-transform:capitalize; }
.btn-logout {
  display:block; text-align:center;
  background: rgba(255,100,100,0.2); border:1px solid rgba(255,100,100,0.3);
  color: #ffaaaa; border-radius:8px; padding:8px;
  font-size:12px; font-weight:600; transition:all 0.2s; cursor:pointer;
}
.btn-logout:hover { background: rgba(255,100,100,0.35); color:#fff; }

/* ── TOPBAR ── */
.topbar {
  position: fixed; top:0; left:var(--sidebar-w); right:0;
  height: var(--topbar-h);
  background: var(--white); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px;
  padding: 0 24px; z-index:100;
  box-shadow: var(--shadow-sm);
  transition: left 0.3s ease;
}
.menu-toggle {
  display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-mid);
}
.topbar-title { font-weight:700; font-size:16px; color:var(--text-dark); flex:1; }
.topbar-right { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--text-soft); }
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:199; }

/* ── ALERTS / FLASH ── */
.alert {
  display:flex; align-items:center; gap:10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  margin-bottom: 16px; font-size:13px; font-weight:500;
}
.alert button { margin-left:auto; background:none; border:none; cursor:pointer; font-size:16px; opacity:0.6; }
.alert-success { background:#e8f5ee; color:#1a6b3c; border:1px solid #b2dfcc; }
.alert-error   { background:#fdecea; color:#c0392b; border:1px solid #f5c6c2; }
.alert-warning { background:#fff8e1; color:#856404; border:1px solid #ffe082; }
.alert-info    { background:#e3f2fd; color:#1565c0; border:1px solid #90caf9; }

/* ── CARDS ── */
.card {
  background: var(--card); border-radius: var(--radius);
  border:1px solid var(--border); padding:20px;
  box-shadow: var(--shadow-sm); margin-bottom:16px;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.card-title { font-weight:700; font-size:15px; color:var(--text-dark); }

/* ── STAT CARDS ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
  background: var(--card); border-radius: var(--radius);
  padding: 20px; border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; gap:16px;
}
.stat-icon {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  flex-shrink:0;
}
.stat-icon.green  { background: var(--green-pale); }
.stat-icon.gold   { background: #fff8e1; }
.stat-icon.coral  { background: #fdecea; }
.stat-icon.sky    { background: #e3f2fd; }
.stat-icon.purple { background: #f3e8ff; }
.stat-val { font-family:'Sora',sans-serif; font-size:28px; font-weight:800; color:var(--text-dark); line-height:1; }
.stat-label { font-size:11px; color:var(--text-soft); font-weight:500; margin-top:4px; }
.stat-change { font-size:10px; color:var(--green-mid); font-weight:600; margin-top:2px; }

/* ── TABLES ── */
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; border-collapse:collapse; font-size:13px; }
table.data-table th {
  background: var(--green-mist); color:var(--text-mid);
  font-weight:600; padding:10px 12px; text-align:left;
  border-bottom:2px solid var(--border); white-space:nowrap;
}
table.data-table td {
  padding:10px 12px; border-bottom:1px solid var(--border);
  color:var(--text-dark); vertical-align:middle;
}
table.data-table tr:last-child td { border-bottom:none; }
table.data-table tr:hover td { background: var(--green-mist); }

/* ── BADGES ── */
.badge {
  display:inline-block; padding:3px 10px; border-radius:50px;
  font-size:11px; font-weight:600;
}
.badge-green  { background:var(--green-pale); color:var(--green-dark); }
.badge-gold   { background:#fff8e1; color:#856404; }
.badge-coral  { background:#fdecea; color:#c0392b; }
.badge-sky    { background:#e3f2fd; color:#1565c0; }
.badge-gray   { background:#f0f0f0; color:#666; }
.badge-purple { background:#f3e8ff; color:#6b21a8; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:10px; font-size:13px;
  font-weight:600; cursor:pointer; border:none; transition:all 0.2s;
  font-family:inherit;
}
.btn-primary { background:var(--green-main); color:#fff; }
.btn-primary:hover { background:var(--green-dark); }
.btn-secondary { background:var(--green-pale); color:var(--green-dark); }
.btn-secondary:hover { background:#d4eddf; }
.btn-danger { background:#fdecea; color:#c0392b; }
.btn-danger:hover { background:#f5c6c2; }
.btn-gold { background:#fff8e1; color:#856404; }
.btn-gold:hover { background:#ffe082; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-icon { padding:8px; border-radius:8px; }

/* ── FORMS ── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--text-mid); margin-bottom:6px; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:10px 14px; border:1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size:13px; color:var(--text-dark);
  background:#fff; font-family:inherit; transition:border 0.2s;
  outline:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--green-mid); box-shadow:0 0 0 3px rgba(45,140,85,0.1);
}
.form-textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* ── SEARCH BAR ── */
.search-bar {
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid var(--border);
  border-radius: var(--radius-sm); padding:8px 14px; margin-bottom:16px;
}
.search-bar input { flex:1; border:none; outline:none; font-size:13px; font-family:inherit; background:transparent; }

/* ── PAGINATION ── */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.page-btn {
  padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600;
  border:1.5px solid var(--border); background:#fff; cursor:pointer;
  color:var(--text-mid); transition:all 0.2s;
}
.page-btn:hover, .page-btn.active { background:var(--green-main); color:#fff; border-color:var(--green-main); }

/* ── MODAL ── */
.modal-bg {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(3px);
  align-items:center; justify-content:center;
}
.modal-bg.open { display:flex; }
.modal {
  background:#fff; border-radius: var(--radius); padding:24px;
  width:min(600px, 95vw); max-height:90vh; overflow-y:auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  animation: modal-in 0.25s ease;
}
@keyframes modal-in { from {opacity:0;transform:scale(0.95)translateY(20px)} to {opacity:1;transform:none} }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-title { font-size:16px; font-weight:700; }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-muted); padding:4px; }

/* ── SECTION HEADER ── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.section-title { font-size:18px; font-weight:800; color:var(--text-dark); }
.section-sub { font-size:12px; color:var(--text-soft); font-weight:500; margin-top:2px; }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; }
.empty-state p { font-size:13px; }

/* ── TABS ── */
.tabs { display:flex; gap:4px; background:var(--green-mist); padding:4px; border-radius:12px; margin-bottom:16px; }
.tab-btn {
  flex:1; padding:8px 12px; border-radius:10px; font-size:12px; font-weight:600;
  border:none; cursor:pointer; background:transparent; color:var(--text-soft); transition:all 0.2s;
}
.tab-btn.active { background:#fff; color:var(--green-dark); box-shadow: var(--shadow-sm); }

/* ── RIWAYAT ITEM ── */
.riwayat-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.riwayat-item:last-child { border-bottom:none; }
.riwayat-dot { width:10px; height:10px; border-radius:50%; background:var(--green-light); margin-top:5px; flex-shrink:0; }
.riwayat-tgl { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.riwayat-body { font-size:13px; color:var(--text-dark); }

/* ── PRINT ── */
@media print {
  .sidebar, .topbar, .no-print { display:none !important; }
  .main-content { margin:0; padding:0; }
  .card { box-shadow:none; border:1px solid #ccc; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    transform: translateX(-240px);
    width: 240px;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar.collapsed {
    transform: translateX(-240px);
  }
  .overlay.open { display:block; }
  .main-content {
    margin-left: 0;
    padding: calc(var(--topbar-h) + 16px) 14px 16px;
  }
  .main-content.sidebar-collapsed {
    margin-left: 0;
  }
  .topbar { left:0 !important; }
  .menu-toggle { display:block; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
}

/* ── LOGIN PAGE ── */
.login-page {
  min-height:100vh;
  background: linear-gradient(160deg, #0d4f2b 0%, #1a6b3c 50%, #2d8c55 100%);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card {
  background:#fff; border-radius:24px; padding:40px 36px;
  width:min(420px, 100%); box-shadow:0 30px 80px rgba(0,0,0,0.3);
}
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo-icon {
  width:72px; height:72px; border-radius:20px;
  background: var(--green-pale); display:inline-flex;
  align-items:center; justify-content:center; font-size:32px; margin-bottom:12px;
}
.login-title { font-family:'Sora',sans-serif; font-size:22px; font-weight:800; color:var(--text-dark); margin-bottom:4px; }
.login-sub { font-size:12px; color:var(--text-soft); }

/* ── CHART PLACEHOLDER ── */
.chart-placeholder {
  height:200px; border-radius:12px;
  background: linear-gradient(135deg, var(--green-mist), var(--green-pale));
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:13px;
}