/* =========================================================
   Welfare System — visual identity
   Palette: deep teal (trust/stability) + warm gold (community warmth)
   ========================================================= */
:root{
  --ink:        #16302b;
  --teal-900:   #10302a;
  --teal-700:   #1c4f45;
  --teal-600:   #256657;
  --teal-500:   #2f8272;
  --gold-500:   #c99a3d;
  --gold-600:   #ad8330;
  --cream:      #f6f4ef;
  --paper:      #ffffff;
  --line:       #e2ddd0;
  --muted:      #6c7b76;
  --danger:     #b3452f;
  --danger-bg:  #fbeae5;
  --ok:         #2f7d5c;
  --ok-bg:      #e7f3ec;
  --warn:       #a8760f;
  --warn-bg:    #fbf1de;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,48,42,.06), 0 4px 14px rgba(16,48,42,.06);
  --font-head: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
}
h1,h2,h3,h4{ font-family: var(--font-head); font-weight: 600; color: var(--teal-900); margin: 0 0 .4em; }
a{ color: var(--teal-600); text-decoration:none; }
a:hover{ text-decoration: underline; }

.container{ max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }

/* ---------- Top navigation ---------- */
.topbar{
  display:flex; align-items:center; gap: 24px;
  background: var(--teal-900);
  color: #eef4f1;
  padding: 0 24px;
  height: 60px;
  position: sticky; top:0; z-index: 20;
  box-shadow: var(--shadow);
}
.topbar .brand{ font-family: var(--font-head); font-size: 1.15rem; font-weight:700; color:#fff; white-space:nowrap; }
.topbar nav{ display:flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topbar nav a{ color: #cfe3dc; padding: 8px 10px; border-radius: 6px; font-size: .88rem; }
.topbar nav a:hover{ background: rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.user-menu{ display:flex; align-items:center; gap:12px; font-size:.85rem; color:#cfe3dc; white-space:nowrap; }
.btn-link{ color: var(--gold-500) !important; font-weight:600; }

/* ---------- Cards & layout ---------- */
.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.grid{ display:grid; gap: 18px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } .topbar{ flex-wrap:wrap; height:auto; padding: 10px; } }

/* ---------- Stat tiles ---------- */
.stat{
  background: linear-gradient(145deg, var(--teal-700), var(--teal-900));
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
}
.stat .label{ font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #b9d2c9; }
.stat .value{ font-family: var(--font-head); font-size: 1.7rem; font-weight:700; margin-top: 4px; }
.stat.gold{ background: linear-gradient(145deg, var(--gold-500), var(--gold-600)); }
.stat.plain{ background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.stat.plain .label{ color: var(--muted); }
.stat.plain .value{ color: var(--teal-900); }

/* ---------- Forms ---------- */
label{ display:block; font-size:.82rem; font-weight:600; margin-bottom: 5px; color: var(--teal-900); }
input, select, textarea{
  width:100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px;
  font-family: var(--font-body); font-size: .92rem; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--teal-500); outline-offset: 1px; border-color: var(--teal-500); }
.field{ margin-bottom: 14px; }
.form-actions{ margin-top: 18px; display:flex; gap:10px; }

.btn{
  display:inline-block; padding: 9px 18px; border-radius: 7px; border:none;
  background: var(--teal-600); color:#fff; font-weight:600; font-size:.88rem; cursor:pointer;
  font-family: var(--font-body);
}
.btn:hover{ background: var(--teal-700); text-decoration:none; }
.btn.gold{ background: var(--gold-500); color: #2c2109; }
.btn.gold:hover{ background: var(--gold-600); }
.btn.danger{ background: var(--danger); }
.btn.danger:hover{ background: #94391f; }
.btn.small{ padding: 5px 11px; font-size: .78rem; }
.btn.outline{ background: transparent; border: 1px solid var(--teal-600); color: var(--teal-700); }

/* ---------- Tables ---------- */
table{ width:100%; border-collapse: collapse; font-size: .88rem; }
th, td{ text-align:left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th{ background: #eef2ef; color: var(--teal-900); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
tr:hover td{ background: #faf9f5; }
.table-wrap{ overflow-x:auto; }

/* ---------- Badges ---------- */
.badge{ display:inline-block; padding: 3px 10px; border-radius: 30px; font-size: .74rem; font-weight:700; }
.badge.ok{ background: var(--ok-bg); color: var(--ok); }
.badge.warn{ background: var(--warn-bg); color: var(--warn); }
.badge.danger{ background: var(--danger-bg); color: var(--danger); }

/* ---------- Progress bar ---------- */
.progress{ background: #e6e2d5; border-radius: 30px; height: 10px; overflow:hidden; }
.progress > div{ background: linear-gradient(90deg, var(--teal-500), var(--gold-500)); height:100%; }

/* ---------- Flash messages ---------- */
.flash{ padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size:.9rem; }
.flash-success{ background: var(--ok-bg); color: var(--ok); border: 1px solid #bfe1cf; }
.flash-error{ background: var(--danger-bg); color: var(--danger); border: 1px solid #f0c6ba; }

/* ---------- Auth pages ---------- */
.auth-wrap{
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 20% 20%, var(--teal-700), var(--teal-900));
  padding: 20px;
}
.auth-card{
  background: var(--paper); border-radius: 14px; padding: 40px 36px; width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.auth-card h1{ text-align:center; font-size: 1.4rem; }
.auth-card .subtitle{ text-align:center; color: var(--muted); font-size:.85rem; margin-bottom: 24px; }

/* =========================================================
   Icons, logo, nav & graphic elements
   ========================================================= */
.icon{ display:inline-block; vertical-align:-4px; flex-shrink:0; }
.icon-lg{ width:28px; height:28px; }
.icon-xl{ width:44px; height:44px; }

/* ---------- Brand / logo ---------- */
.topbar .brand{
  display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;
  font-family: var(--font-head); font-size: 1.1rem; font-weight:700; white-space:nowrap;
}
.topbar .brand:hover{ text-decoration:none; opacity:.92; }

/* ---------- Nav with icons ---------- */
.topbar nav{ display:flex; align-items:center; gap: 2px; flex: 1; flex-wrap: wrap; }
.topbar nav a{
  display:flex; align-items:center; gap:6px;
  color: #cfe3dc; padding: 8px 11px; border-radius: 7px; font-size: .84rem; font-weight:500;
}
.topbar nav a .icon{ vertical-align:middle; opacity:.85; }
.topbar nav a:hover{ background: rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.topbar nav a.active{ background: rgba(201,154,61,.18); color: #f3dfb0; }
.topbar nav a.active .icon{ opacity:1; }
.nav-divider{ width:1px; height:22px; background: rgba(255,255,255,.15); margin: 0 4px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px; }

/* ---------- User menu / avatar ---------- */
.user-menu{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.avatar{
  width: 34px; height:34px; border-radius: 50%; background: linear-gradient(145deg, var(--gold-500), var(--gold-600));
  color: #2c2109; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  flex-shrink:0;
}
.user-meta{ display:flex; flex-direction:column; line-height:1.15; }
.user-meta .u-name{ color:#fff; font-size:.82rem; font-weight:600; }
.user-meta .u-role{ color:#a9c5ba; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }
.btn-link{ color: var(--gold-500) !important; display:flex; align-items:center; padding:4px; border-radius:6px; }
.btn-link:hover{ background: rgba(255,255,255,.08); text-decoration:none; }

@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .topbar nav{
    display:none; flex-direction:column; align-items:stretch; width:100%;
    position:absolute; top:60px; left:0; background: var(--teal-900); padding: 10px; box-shadow: var(--shadow);
  }
  .topbar nav.open{ display:flex; }
  .topbar{ flex-wrap: wrap; position:relative; }
  .user-menu{ margin-left:auto; }
}

/* ---------- Buttons with icons ---------- */
.btn{ display:inline-flex; align-items:center; gap:7px; }
.btn .icon{ vertical-align:middle; }

/* ---------- Section title icon accents ---------- */
.section-title h1, .section-title h3{ display:flex; align-items:center; gap:10px; }
.icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(145deg, var(--teal-600), var(--teal-800, var(--teal-900)));
  color: #fff; flex-shrink:0;
}
.icon-badge.gold{ background: linear-gradient(145deg, var(--gold-500), var(--gold-600)); color:#2c2109; }
.icon-badge.soft{ background: #eaf2ee; color: var(--teal-700); }

/* ---------- Stat tiles with icon corner ---------- */
.stat{ position:relative; overflow:hidden; }
.stat .stat-icon{
  position:absolute; top:14px; right:14px; opacity:.35; color:#fff;
}
.stat.plain .stat-icon{ color: var(--teal-600); opacity:.5; }
.stat.gold .stat-icon{ color:#2c2109; opacity:.35; }

/* ---------- Flash messages with icon ---------- */
.flash{ display:flex; align-items:center; gap:10px; }
.flash-icon{ flex-shrink:0; }

/* ---------- Input with leading icon ---------- */
.input-icon{ position:relative; display:flex; align-items:center; }
.input-icon .icon{ position:absolute; left:11px; color: var(--muted); pointer-events:none; }
.input-icon input{ padding-left: 38px; }

/* ---------- Auth page graphics ---------- */
.auth-wrap{ position:relative; overflow:hidden; }
.auth-bg-shape{ position:absolute; top:-60px; right:-40px; z-index:0; pointer-events:none; }
.auth-card{ position:relative; z-index:1; }
.auth-logo{ display:flex; justify-content:center; margin-bottom:12px; }

/* ---------- Empty states ---------- */
.empty-state{ text-align:center; padding: 36px 20px; color: var(--muted); }
.empty-state .icon{ width:48px; height:48px; color: var(--line); margin-bottom:10px; }
.empty-state p{ margin: 4px 0 0; font-size:.88rem; }
.empty-state strong{ display:block; color: var(--teal-800, var(--teal-700)); font-size:.95rem; margin-bottom:2px; }

/* =========================================================
   End icons/logo/nav additions
   ========================================================= */
/* ---------- Misc ---------- */
.muted{ color: var(--muted); }
.text-right{ text-align:right; }
.section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
.tag-eyebrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--gold-600); font-weight:700; }
hr.divider{ border:none; border-top: 1px solid var(--line); margin: 24px 0; }
.site-footer{ text-align:center; padding: 20px; color: var(--muted); font-size:.8rem; }