/* CreativeWarga v1.2.5 — Blue Premium & Bento Design System
   Dipastikan teks kontras putih sempurna di semua box biru/hero banner
   dan layout mobile sangat rapi, proporsional, serta bebas overflow. */

:root {
  --cw-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cw-primary: #2563eb;
  --cw-primary-hover: #1d4ed8;
  --cw-primary-light: #eff6ff;
  --cw-indigo: #4f46e5;
  --cw-violet: #7c3aed;
  --cw-ink: #0f172a;
  --cw-body: #1e293b;
  --cw-muted: #475569;
  --cw-muted-light: #64748b;
  --cw-line: #e2e8f0;
  --cw-bg: #f8fafc;
  --cw-card: #ffffff;
  
  --cw-radius-sm: 10px;
  --cw-radius-md: 16px;
  --cw-radius-lg: 20px;
  --cw-radius-xl: 26px;
  --cw-radius-full: 9999px;
  
  --cw-shadow-subtle: 0 2px 6px -1px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
  --cw-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06), 0 3px 8px -2px rgba(15, 23, 42, 0.03);
  --cw-shadow-hover: 0 14px 32px -4px rgba(15, 23, 42, 0.1), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   DASAR & TIPOGRAFI
   ========================================================= */
html {
  font-size: 16px;
  background-color: var(--cw-bg);
  color: var(--cw-body);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body, button, input, select, textarea {
  font-family: var(--cw-font);
}
body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cw-body);
  background-color: var(--cw-bg);
}
a, button { -webkit-tap-highlight-color: transparent; }

/* Judul dan teks standar (pada background terang) */
.main h1, .main h2, .main h3,
.panel-head h3, .premium-section-heading h2,
.citizen-section-head h2, .auth-card h2 {
  color: var(--cw-ink);
  font-weight: 750;
  line-height: 1.25;
}
.panel-head p, .premium-section-heading p, .page-intro {
  color: var(--cw-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* =========================================================
   PASTIKAN 100% TEKS PUTIH DI SEMUA KOTAK BIRU / HERO
   ========================================================= */
.dashboard-premium-hero,
.dashboard-welcome,
.dashboard-location-card,
.citizen-welcome,
.citizen-kk-card,
.citizen-receipt-total,
.premium-page-hero,
.menu-hero,
.scan-hero,
.announcement-hero,
.letter-hero,
.report-hero,
.portal-admin-hero,
.community-hero,
.setup-brand,
.auth-visual,
.finance-premium-hero,
.cash-hero,
.hero-card,
.backup-hero,
.payment-review-hero {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #4338ca 100%) !important;
}

/* 1. SEMUA JUDUL & TEKS BOLD DI BOX BIRU (Putih Terang Maksimal) */
.dashboard-premium-hero h1, .dashboard-premium-hero h2, .dashboard-premium-hero h3, .dashboard-premium-hero h4, .dashboard-premium-hero strong,
.dashboard-welcome h1, .dashboard-welcome h2, .dashboard-welcome h3, .dashboard-welcome strong,
.dashboard-location-card strong,
.citizen-welcome h1, .citizen-welcome h2, .citizen-welcome strong,
.citizen-family-count strong,
.citizen-kk-card strong,
.citizen-receipt-total strong,
.premium-page-hero h1, .premium-page-hero h2, .premium-page-hero h3, .premium-page-hero strong,
.menu-hero h1, .menu-hero h2, .menu-hero strong,
.scan-hero h1, .scan-hero h2, .scan-hero strong,
.announcement-hero h1, .announcement-hero h2, .announcement-hero strong,
.letter-hero h1, .letter-hero h2, .letter-hero strong,
.report-hero h1, .report-hero h2, .report-hero strong,
.portal-admin-hero h1, .portal-admin-hero h2, .portal-admin-hero strong,
.community-hero h1, .community-hero h2, .community-hero strong,
.setup-brand h1, .setup-brand h2, .setup-brand strong,
.auth-visual h1, .auth-visual h2, .auth-visual strong,
.finance-premium-hero h1, .finance-premium-hero h2, .finance-premium-hero strong,
.cash-hero h1, .cash-hero h2, .cash-hero strong,
.hero-card h1, .hero-card h2, .hero-card strong,
.backup-hero h1, .backup-hero h2, .backup-hero strong,
.payment-review-hero h1, .payment-review-hero h2, .payment-review-hero strong {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* 2. SEMUA PARAGRAF, DESKRIPSI & TEKS ISI DI BOX BIRU (Putih Halus) */
.dashboard-premium-hero p,
.dashboard-welcome p,
.citizen-welcome span,
.citizen-welcome div > span,
.premium-page-hero p,
.menu-hero p,
.scan-hero p,
.announcement-hero p,
.letter-hero p,
.report-hero p,
.portal-admin-hero p,
.community-hero p,
.setup-brand p,
.auth-visual p,
.finance-premium-hero p,
.cash-hero span,
.hero-card p,
.backup-hero p,
.payment-review-hero p,
.dashboard-location-card small,
.citizen-kk-card dd,
.citizen-receipt-total span {
  color: #e2e8f0 !important;
  line-height: 1.55 !important;
}

/* 3. SEMUA EYEBROW & SUB-LABEL DI BOX BIRU (Biru Muda Bercahaya) */
.dashboard-premium-hero .eyebrow,
.dashboard-welcome .eyebrow,
.citizen-welcome p,
.citizen-welcome .eyebrow,
.citizen-family-count span,
.citizen-kk-card dt,
.citizen-kk-card > div span,
.dashboard-location-card span,
.dashboard-location-card b,
.dashboard-location-card em,
.scan-hero .eyebrow,
.scan-kicker,
.announcement-hero .eyebrow,
.letter-hero .eyebrow,
.report-hero .eyebrow,
.portal-admin-hero .eyebrow,
.community-hero .eyebrow,
.menu-hero .eyebrow,
.premium-page-hero .eyebrow,
.finance-premium-hero .eyebrow,
.cash-hero small,
.hero-card .eyebrow,
.backup-hero .eyebrow,
.payment-review-hero .eyebrow {
  color: #bfdbfe !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* 4. TOMBOL-TOMBOL DI DALAM BOX BIRU (Kontras Tinggi & Mewah) */
.dashboard-premium-hero .btn.light,
.dashboard-welcome .btn.light,
.announcement-hero .btn,
.letter-hero .btn,
.report-hero .btn,
.portal-admin-hero .btn,
.backup-hero .btn,
.community-hero .btn,
.premium-page-hero .btn,
.cash-actions a:first-child {
  background: #ffffff !important;
  color: #1d4ed8 !important;
  font-weight: 750 !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}
.dashboard-premium-hero .btn.light *,
.dashboard-welcome .btn.light *,
.announcement-hero .btn *,
.letter-hero .btn *,
.report-hero .btn *,
.portal-admin-hero .btn *,
.backup-hero .btn *,
.community-hero .btn *,
.premium-page-hero .btn *,
.cash-actions a:first-child * {
  color: #1d4ed8 !important;
}
.dashboard-premium-hero .btn.light:hover,
.dashboard-welcome .btn.light:hover,
.announcement-hero .btn:hover,
.letter-hero .btn:hover,
.report-hero .btn:hover,
.portal-admin-hero .btn:hover,
.backup-hero .btn:hover,
.community-hero .btn:hover,
.premium-page-hero .btn:hover {
  background: #f8fafc !important;
  transform: translateY(-1px);
}

.dashboard-premium-hero .btn.glass,
.dashboard-welcome .btn.glass,
.cash-actions a:last-child {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.dashboard-premium-hero .btn.glass *,
.dashboard-welcome .btn.glass *,
.cash-actions a:last-child * {
  color: #ffffff !important;
}
.dashboard-premium-hero .btn.glass:hover,
.dashboard-welcome .btn.glass:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* =========================================================
   BENTO PASTEL TONES (Ref 4 & 5)
   ========================================================= */
.tone-blue, .tile-blue { --tile-bg: #eff6ff; --tile-border: #dbeafe; --tile-color: #2563eb; }
.tone-green, .tile-green, .tone-emerald { --tile-bg: #ecfdf5; --tile-border: #a7f3d0; --tile-color: #059669; }
.tone-purple, .tile-purple, .tone-violet { --tile-bg: #f5f3ff; --tile-border: #ddd6fe; --tile-color: #7c3aed; }
.tone-amber, .tile-amber { --tile-bg: #fffbeb; --tile-border: #fde68a; --tile-color: #d97706; }
.tone-navy, .tile-navy, .tone-indigo { --tile-bg: #eef2ff; --tile-border: #c7d2fe; --tile-color: #4338ca; }
.tone-rose, .tile-rose, .tone-red { --tile-bg: #fff1f2; --tile-border: #fecdd3; --tile-color: #e11d48; }
.tone-teal, .tile-teal { --tile-bg: #f0fdfa; --tile-border: #99f6e4; --tile-color: #0d9488; }
.tone-cyan, .tile-cyan { --tile-bg: #ecfeff; --tile-border: #cffafe; --tile-color: #0891b2; }

.task-item > span,
.quick-add-card > span,
.menu-link-icon,
.citizen-shortcuts > a > span,
.finance-task-list > a > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--tile-bg, #eff6ff);
  border: 1px solid var(--tile-border, #dbeafe);
  color: var(--tile-color, #2563eb);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* =========================================================
   IDENTITAS & DESKTOP SHELL
   ========================================================= */
.brand-logo-mark {
  display: block;
  width: 42px;
  height: 42px;
  padding: 8px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--cw-primary), var(--cw-indigo));
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
  object-fit: contain;
  flex: 0 0 42px;
}
.sidebar-brand .brand-logo-mark { background: rgba(255, 255, 255, 0.16); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); }

.app-shell { grid-template-columns: 275px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  width: 275px;
  padding: 22px 16px;
  background: linear-gradient(180deg, #09132d 0%, #172d73 60%, #2b1f7d 100%);
  box-shadow: 10px 0 32px rgba(9, 19, 45, 0.16);
}
.sidebar-brand { gap: 12px; padding: 4px 6px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.sidebar-brand strong { font-size: 18px; color: #ffffff !important; font-weight: 800; }
.sidebar-brand small { color: #c3d3ff !important; font-size: 12px; }
.sidebar-nav { gap: 4px; padding: 12px 0; }
.nav-group-label { padding: 12px 10px 4px; color: #a5bbf7 !important; font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-nav a, .sidebar-bottom a {
  min-height: 46px;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 13px;
  color: #dbe4ff;
  font-size: 14px;
  font-weight: 650;
  transition: all 0.2s ease;
}
.sidebar-nav a.active {
  background: #ffffff;
  color: #1e3fae !important;
  font-weight: 750;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.sidebar-nav a:hover, .sidebar-bottom a:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.sidebar-bottom { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.main { grid-column: 2; padding: 22px 28px 120px; }

/* Topbar */
.topbar {
  top: 12px;
  min-height: 72px;
  margin-bottom: 22px;
  padding: 12px 18px;
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--cw-shadow);
}
.topbar-title .eyebrow { font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cw-muted); margin: 0; }
.topbar-title h1 { margin: 2px 0 0; color: var(--cw-ink); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.topbar-title small { font-size: 12.5px; color: var(--cw-muted-light); }
.topbar-add {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--cw-radius-md);
  background: var(--cw-primary-light);
  color: var(--cw-primary);
  font-weight: 750;
  font-size: 13.5px;
}
.user-chip {
  padding: 6px 14px 6px 6px;
  border-radius: var(--cw-radius-md);
  background: #f1f5f9;
  border: 1px solid var(--cw-line);
}
.user-chip .avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cw-primary), var(--cw-indigo));
  font-weight: 800;
  font-size: 15px;
}

/* =========================================================
   KOMPONEN DASHBOARD & CARD
   ========================================================= */
.dashboard-premium-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
  gap: 16px;
  border-radius: var(--cw-radius-xl);
  box-shadow: 0 16px 36px -4px rgba(37, 99, 235, 0.25);
  padding: 26px 28px;
  margin-bottom: 20px;
}
.dashboard-welcome h2 { font-size: 26px; margin: 3px 0 6px; letter-spacing: -0.02em; }
.dashboard-welcome > p:not(.eyebrow) { font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.dashboard-hero-actions { display: flex; gap: 8px; }
.dashboard-location-card {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dashboard-location-card strong { font-size: 19px; }

/* Attention Strip */
.attention-strip {
  padding: 12px 16px;
  border: 1px solid #fed7aa;
  border-radius: var(--cw-radius-md);
  background: #fffbeb;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.attention-strip > div strong { font-size: 13.5px; font-weight: 800; color: #9a3412; }
.attention-strip > div span { font-size: 12px; color: #b45309; }
.attention-strip > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--cw-radius-full);
  background: #ffffff;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* Metric Cards */
.premium-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.premium-metric-grid > a {
  min-height: 120px;
  padding: 18px;
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-lg);
  background: #ffffff;
  box-shadow: var(--cw-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.premium-metric-grid > a:hover { transform: translateY(-2px); border-color: #cbd5e1; }
.premium-metric-grid > a:before {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: var(--cw-radius-full);
  background: linear-gradient(90deg, var(--cw-primary), var(--cw-indigo));
  content: "";
  margin-bottom: 10px;
}
.premium-metric-grid > a.positive:before { background: linear-gradient(90deg, #059669, #10b981); }
.premium-metric-grid > a.warning:before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.premium-metric-grid span { font-size: 12.5px; font-weight: 600; color: var(--cw-muted); }
.premium-metric-grid strong { font-size: 23px; font-weight: 800; color: var(--cw-ink); letter-spacing: -0.02em; margin: 3px 0; }
.premium-metric-grid small { font-size: 12px; color: var(--cw-muted-light); }

/* Dashboard Tasks */
.dashboard-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dashboard-task-grid > a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--cw-line);
  border-radius: 16px;
  background: #ffffff;
  text-decoration: none;
  box-shadow: var(--cw-shadow-subtle);
  transition: all 0.2s ease;
}
.dashboard-task-grid > a:hover { transform: translateY(-2px); border-color: #cbd5e1; box-shadow: var(--cw-shadow); }
.dashboard-task-grid strong { display: block; font-size: 14px; font-weight: 750; color: var(--cw-ink); }
.dashboard-task-grid small { display: block; font-size: 12px; color: var(--cw-muted); margin-top: 2px; }

/* Tombol */
.btn, .citizen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.btn.primary, .citizen-button.primary {
  background: linear-gradient(135deg, var(--cw-primary), var(--cw-indigo)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3) !important;
}
.btn.primary:hover, .citizen-button.primary:hover { transform: translateY(-1px); }
.btn.secondary, .citizen-button.secondary {
  background: #ffffff !important;
  color: var(--cw-body) !important;
  border: 1.5px solid var(--cw-line) !important;
}

/* Formulir & Input */
.form-grid input, .form-grid select, .form-grid textarea,
.simple-form input, .simple-form select, .simple-form textarea,
.search-box input, .filter-bar select, .auth-card input,
.citizen-letter-form select, .citizen-letter-form textarea, .citizen-password-form input {
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 13px;
  background: #ffffff;
  color: var(--cw-ink);
  font-size: 15px;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.simple-form input:focus, .simple-form select:focus, .simple-form textarea:focus,
.citizen-letter-form select:focus, .citizen-letter-form textarea:focus, .citizen-password-form input:focus {
  border-color: var(--cw-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
  outline: none;
}

/* Tabel Data */
.table-wrap {
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-md);
  box-shadow: var(--cw-shadow-subtle);
  background: #ffffff;
}
.table-wrap table { width: 100%; }
.table-wrap th {
  background: #f8fafc;
  color: var(--cw-muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cw-line);
}
.table-wrap td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  color: var(--cw-body);
}
.table-wrap tr:hover td { background: #f8fafc; }

/* Menu Card */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--cw-line);
  background: #ffffff;
  box-shadow: var(--cw-shadow-subtle);
  text-decoration: none;
  transition: all 0.2s ease;
}
.menu-link:hover { transform: translateY(-2px); border-color: #cbd5e1; box-shadow: var(--cw-shadow); }
.menu-link strong { font-size: 15px; font-weight: 750; color: var(--cw-ink); }
.menu-link small { font-size: 12.5px; color: var(--cw-muted); margin-top: 2px; }

/* =========================================================
   PORTAL WARGA
   ========================================================= */
.citizen-body {
  background: #f1f5f9;
  font-family: var(--cw-font);
}
.citizen-shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  background: #ffffff;
  box-shadow: 0 0 50px rgba(15, 23, 42, 0.06);
}
.citizen-header {
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cw-line);
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.citizen-brand strong { font-size: 16px; font-weight: 800; color: var(--cw-ink); }
.citizen-brand small { font-size: 12px; color: var(--cw-muted); }
.citizen-account-link {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--cw-primary-light);
  color: var(--cw-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

.citizen-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px;
  border-radius: 22px;
  margin-bottom: 16px;
  box-shadow: 0 14px 32px -4px rgba(37, 99, 235, 0.25);
}
.citizen-welcome h1 { font-size: 24px; margin: 2px 0 4px; }
.citizen-welcome span { font-size: 13.5px; }
.citizen-family-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.citizen-balance-card {
  padding: 18px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--cw-line);
  background: #ffffff;
  box-shadow: var(--cw-shadow);
  margin-bottom: 16px;
}
.citizen-balance-card.has-due {
  border-color: #fde68a;
  background: linear-gradient(135deg, #ffffff 65%, #fffbeb 100%);
}
.citizen-balance-card.clear {
  border-color: #a7f3d0;
  background: linear-gradient(135deg, #ffffff 65%, #ecfdf5 100%);
}
.citizen-balance-card span { font-size: 13px; font-weight: 650; color: var(--cw-muted); }
.citizen-balance-card strong { font-size: 25px; font-weight: 800; color: var(--cw-ink); margin: 2px 0; display: block; }
.citizen-balance-card small { font-size: 12px; color: var(--cw-muted-light); }
.citizen-balance-card > a {
  padding: 11px 16px;
  border-radius: 13px;
  background: var(--cw-primary);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

/* Shortcuts Grid */
.citizen-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.citizen-shortcuts > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--cw-line);
  background: #ffffff;
  text-decoration: none;
  box-shadow: var(--cw-shadow-subtle);
  transition: transform 0.2s ease;
}
.citizen-shortcuts > a:hover { transform: translateY(-2px); border-color: #cbd5e1; }
.citizen-shortcuts strong { display: block; font-size: 14px; font-weight: 750; color: var(--cw-ink); }
.citizen-shortcuts small { display: block; font-size: 12px; color: var(--cw-muted); margin-top: 2px; }

/* Sembunyikan bottom nav di desktop */
@media (min-width: 761px) {
  .magic-nav,
  .magic-nav.bottom-nav,
  .citizen-bottom-nav,
  .bottom-nav {
    display: none !important;
  }
}

/* =========================================================
   RESPONSIVE MOBILE (<= 760px)
   Pembersihan overflow & penyelarasan layout mobile
   ========================================================= */
@media (max-width: 760px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  .app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .sidebar {
    display: none !important;
  }
  .main, .finance-page .main {
    padding: 10px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Topbar Mobile */
  .topbar {
    top: 6px;
    min-height: 58px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 16px;
  }
  .topbar-title h1 { font-size: 20px; }
  .topbar-title small, .topbar-add, .user-chip > div:last-child { display: none !important; }
  .user-chip { border: 0; background: transparent; padding: 0; box-shadow: none; }
  .user-chip .avatar { width: 36px; height: 36px; }

  /* Hero Dashboard Mobile (Hilangkan 260px location card agar tidak overflow!) */
  .dashboard-premium-hero {
    display: block !important;
    padding: 18px 16px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
  }
  .dashboard-location-card {
    display: none !important;
  }
  .dashboard-welcome h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin: 2px 0 6px !important;
  }
  .dashboard-welcome > p:not(.eyebrow) {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }
  .dashboard-hero-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .dashboard-hero-actions .btn {
    flex: 1;
    min-height: 42px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    text-align: center;
    justify-content: center;
  }

  /* Metrik Grid Mobile */
  .premium-metric-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .premium-metric-grid > a {
    min-height: 96px !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
  }
  .premium-metric-grid strong {
    font-size: 16px !important;
    margin: 3px 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .premium-metric-grid span { font-size: 11.5px !important; }
  .premium-metric-grid small { font-size: 10.5px !important; }

  /* Task Grid di Mobile: 1 Kolom Rapi & Terstruktur */
  .dashboard-task-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .dashboard-task-grid > a {
    min-height: 62px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .dashboard-task-grid > a > span {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    border-radius: 12px !important;
  }
  .dashboard-task-grid strong {
    font-size: 14.5px !important;
    color: #0f172a !important;
  }
  .dashboard-task-grid small {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }

  /* Attention Strip Mobile */
  .attention-strip {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .attention-strip > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 2px 4px 6px !important;
    border-bottom: 1px dashed #fed7aa !important;
  }
  .attention-strip > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(154, 52, 18, 0.08) !important;
    text-decoration: none !important;
  }
  .attention-strip > a b {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #ffedd5 !important;
    color: #c2410c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
  }
  .attention-strip > a span {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #9a3412 !important;
  }

  /* 2 Kolom Dashboard di Mobile -> 1 Kolom */
  .premium-two-column {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Table Wrap di Mobile -> Auto scroll aman */
  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Kartu Umum Mobile */
  .panel, .form-card, .premium-section, .citizen-section {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  /* Portal Warga Mobile */
  .citizen-shell {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .citizen-header {
    min-height: 58px !important;
    padding: 8px 12px !important;
  }
  .citizen-main {
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .citizen-welcome {
    padding: 18px 16px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .citizen-welcome > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .citizen-welcome h1 { font-size: 22px !important; }
  .citizen-family-count {
    width: 62px !important;
    height: 58px !important;
    flex: 0 0 62px !important;
    border-radius: 14px !important;
  }
  .citizen-family-count strong { font-size: 20px !important; }

  /* Shortcuts Warga Mobile */
  .citizen-shortcuts {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 12px 0 !important;
  }
  .citizen-shortcuts > a {
    padding: 12px 10px !important;
    min-height: 70px !important;
    border-radius: 16px !important;
    gap: 10px !important;
    display: flex !important;
    align-items: center !important;
  }
  .citizen-shortcuts > a > span {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 12px !important;
  }
  .citizen-shortcuts strong {
    font-size: 13.5px !important;
  }
  .citizen-shortcuts small {
    font-size: 11px !important;
  }

  /* Menu Page Mobile */
  .menu-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .menu-link {
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  /* Floating Dock Bottom Navigation Bar Mobile */
  .magic-nav.bottom-nav,
  .citizen-bottom-nav {
    display: grid !important;
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important;
    max-width: 430px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    height: 64px !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    padding: 4px 6px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px -4px rgba(15, 23, 42, 0.16) !important;
    z-index: 1000 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .magic-nav a,
  .citizen-bottom-nav a {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;
    border-radius: 16px !important;
    color: #64748b !important;
    text-decoration: none !important;
    padding: 3px 2px !important;
    gap: 3px !important;
  }
  .magic-nav a:not(.nav-main-action) .nav-symbol,
  .citizen-bottom-nav a:not(.center) > span {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
  }
  .magic-nav svg,
  .citizen-bottom-nav svg {
    width: 21px !important;
    height: 21px !important;
  }
  .magic-nav small,
  .citizen-bottom-nav small {
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
  }
  /* Tab Aktif (Pill Highlight) */
  .magic-nav a.active,
  .citizen-bottom-nav a.active {
    background: #eff6ff !important;
    color: var(--cw-primary) !important;
  }
  .magic-nav a.active .nav-symbol,
  .citizen-bottom-nav a.active > span {
    color: var(--cw-primary) !important;
  }
  .magic-nav a.active small,
  .citizen-bottom-nav a.active small {
    color: var(--cw-primary) !important;
    font-weight: 800 !important;
  }
  /* Center Action Button (FAB Style) */
  .magic-nav .nav-main-action,
  .citizen-bottom-nav a.center {
    justify-content: flex-end !important;
    padding-bottom: 5px !important;
  }
  .magic-nav .nav-main-action .nav-symbol {
    position: absolute !important;
    top: -18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--cw-primary), var(--cw-indigo)) !important;
    color: #ffffff !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.42) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Portal warga center button — sama persis dengan tombol Tambah admin */
  .citizen-bottom-nav a.center > span {
    position: absolute !important;
    top: -19px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 53px !important;
    height: 53px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1768e8, #4f46e5) !important;
    color: #ffffff !important;
    border: 5px solid #f5f8fc !important;
    box-shadow: 0 9px 20px rgba(23, 104, 232, 0.38) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .magic-nav .nav-main-action svg,
  .citizen-bottom-nav a.center svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
  }
  .magic-nav .nav-main-action small,
  .citizen-bottom-nav a.center small {
    margin-top: 0 !important;
    color: var(--cw-primary) !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 375px) {
  .citizen-shortcuts {
    grid-template-columns: 1fr !important;
  }
  .premium-metric-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-hero-actions {
    flex-direction: column !important;
  }
}

/* =========================================================
   TOPBAR, NOTIFIKASI & LOGOUT
   ========================================================= */
.topbar-actions,
.citizen-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.topbar-notification,
.citizen-notification-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--cw-radius-md, 14px) !important;
  background: #f8fafc !important;
  border: 1px solid var(--cw-line, #e2e8f0) !important;
  color: var(--cw-ink-light, #475569) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.topbar-notification:hover,
.citizen-notification-link:hover {
  background: #edf2f7 !important;
  color: var(--cw-primary, #2563eb) !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
}

.topbar-notification span,
.citizen-notification-link span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.topbar-notification svg,
.citizen-notification-link svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

.js-notification-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45) !important;
  border: 2px solid #ffffff !important;
  line-height: 1 !important;
  z-index: 5 !important;
}

.js-notification-badge.is-empty,
.js-notification-badge:empty {
  display: none !important;
}

.nav-unread.js-notification-badge {
  position: static !important;
  margin-left: auto !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

.topbar-logout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: var(--cw-radius-md, 14px) !important;
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #fecdd3 !important;
  font-weight: 750 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.topbar-logout:hover {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border-color: #fda4af !important;
  transform: translateY(-1px);
}

.topbar-logout span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.topbar-logout svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

.sidebar-logout {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  color: #e11d48 !important;
  background: #fff1f2 !important;
  border: 1px solid #ffe4e6 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  margin-top: 8px !important;
  transition: all 0.15s ease !important;
}

.sidebar-logout:hover {
  background: #ffe4e6 !important;
  color: #be123c !important;
}

.sidebar-logout svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* =========================================================
   PORTAL WARGA - JUMLAH ANGGOTA KELUARGA
   ========================================================= */
.citizen-family-count {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 84px !important;
  width: auto !important;
  height: 74px !important;
  padding: 8px 14px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}

.citizen-family-count strong {
  display: block !important;
  font-size: 27px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

.citizen-family-count span {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  opacity: 0.96 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  margin-top: 3px !important;
}

/* =========================================================
   KOTAK AKSI KARTU KELUARGA (SCAN, IMPORT, MANUAL)
   ========================================================= */
.entry-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.entry-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--cw-radius-lg, 18px);
  background: #ffffff;
  border: 1px solid var(--cw-line, #e2e8f0);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  text-decoration: none;
  color: var(--cw-ink, #0f172a);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.entry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
  border-color: #cbd5e1;
}

.entry-card.card-scan {
  background: linear-gradient(135deg, #ffffff, #eff6ff);
  border-color: #bfdbfe;
}
.entry-card.card-scan:hover {
  border-color: #3b82f6;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.16);
}

.entry-card.card-import {
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
  border-color: #bbf7d0;
}
.entry-card.card-import:hover {
  border-color: #22c55e;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.16);
}

.entry-card.card-manual {
  background: linear-gradient(135deg, #ffffff, #faf5ff);
  border-color: #e9d5ff;
}
.entry-card.card-manual:hover {
  border-color: #a855f7;
  box-shadow: 0 10px 24px rgba(168, 85, 247, 0.16);
}

.entry-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.entry-card:hover .entry-card-icon {
  transform: scale(1.06);
}

.card-scan .entry-card-icon {
  background: #dbeafe;
  color: #1d4ed8;
}
.card-import .entry-card-icon {
  background: #dcfce7;
  color: #15803d;
}
.card-manual .entry-card-icon {
  background: #f3e8ff;
  color: #7e22ce;
}

.entry-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
}

.entry-card-content {
  flex: 1;
  min-width: 0;
}

.entry-card-content strong {
  display: block;
  font-size: 14px;
  font-weight: 750;
  color: var(--cw-ink, #0f172a);
  margin-bottom: 2px;
}

.entry-card-content small {
  display: block;
  font-size: 11.5px;
  color: var(--cw-muted, #64748b);
  line-height: 1.35;
}

.entry-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

.card-scan .entry-card-badge { background: #bfdbfe; color: #1e40af; }
.card-import .entry-card-badge { background: #bbf7d0; color: #166534; }
.card-manual .entry-card-badge { background: #e9d5ff; color: #6b21a8; }

/* =========================================================
   SEARCH BAR MODERN (KK & WARGA)
   ========================================================= */
.family-search-toolbar {
  margin-bottom: 18px;
}

.family-search-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--cw-line, #e2e8f0) !important;
  border-radius: var(--cw-radius-lg, 16px) !important;
  padding: 6px 8px 6px 16px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.family-search-box:focus-within {
  border-color: var(--cw-primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.family-search-box .search-symbol {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}

.family-search-box .search-symbol svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}

.family-search-box input[type="text"],
.family-search-box input:not([type]),
.family-search-box input[name="q"] {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13.5px !important;
  color: var(--cw-ink, #0f172a) !important;
  padding: 8px 4px !important;
  height: 38px !important;
}

.family-search-box input::placeholder {
  color: #94a3b8 !important;
  font-size: 13px !important;
}

.search-clear-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.search-clear-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.search-status-select {
  height: 38px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.search-submit-btn {
  height: 38px !important;
  padding: 0 18px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--cw-primary, #2563eb) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
  flex-shrink: 0 !important;
}

.search-submit-btn:hover {
  background: #1d4ed8 !important;
}

@media (max-width: 900px) {
  .entry-options-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .entry-card {
    padding: 14px 16px;
  }
}

@media (max-width: 760px) {
  .topbar-logout {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .topbar-logout b {
    display: none !important;
  }
  .topbar-notification,
  .citizen-notification-link {
    width: 40px !important;
    height: 40px !important;
  }
  .citizen-family-count {
    min-width: 72px !important;
    height: 64px !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
  }
  .citizen-family-count strong {
    font-size: 22px !important;
  }
  .citizen-family-count span {
    font-size: 10px !important;
  }
}

@media (max-width: 640px) {
  .family-search-box {
    flex-wrap: wrap !important;
    padding: 8px 10px !important;
  }
  .family-search-box input[name="q"] {
    order: 2 !important;
    width: calc(100% - 60px) !important;
  }
  .family-search-box .search-symbol {
    order: 1 !important;
  }
  .search-clear-btn {
    order: 3 !important;
  }
  .search-status-select {
    order: 4 !important;
    width: calc(60% - 6px) !important;
  }
  .search-submit-btn {
    order: 5 !important;
    flex: 1 !important;
  }
}

/* =========================================================
   DESAIN GAMBAR INFORMASI / PENGUMUMAN
   ========================================================= */
.announcement-image-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1.5px dashed var(--cw-line, #cbd5e1);
  border-radius: var(--cw-radius-lg, 16px);
  background: #f8fafc;
  margin-bottom: 4px;
}

.announcement-image-preview {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  background: #ffffff;
}

.announcement-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.announcement-image-copy {
  flex: 1;
  min-width: 0;
}

.announcement-image-copy label {
  font-weight: 750;
  font-size: 13px;
  color: var(--cw-ink, #0f172a);
}

.announcement-image-copy input[type="file"] {
  margin-top: 6px;
  font-size: 12px;
}

.announcement-card-media {
  margin: 10px 0 12px;
  border-radius: 14px;
  overflow: hidden;
  max-height: 280px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.announcement-card-media img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.announcement-card-media:hover img {
  transform: scale(1.02);
}

/* Gambar Informasi di Portal Warga */
.citizen-info-media {
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  max-height: 240px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.citizen-info-media.full {
  max-height: 380px;
}

.citizen-info-media img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.citizen-info-media.full img {
  max-height: 380px;
}

.citizen-info-media:hover img {
  transform: scale(1.02);
}

@media (max-width: 600px) {
  .announcement-image-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .announcement-image-preview {
    width: 100%;
    height: 140px;
  }
  .citizen-info-media,
  .citizen-info-media img {
    max-height: 200px;
  }
  .citizen-info-media.full,
  .citizen-info-media.full img {
    max-height: 280px;
  }
}

@media print {
  .dashboard-premium-hero, .magic-nav, .citizen-bottom-nav, .topbar { display: none !important; }
}