/* FEMI base styles */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, .65);
  --card: rgba(255,255,255,.92);
  --stroke: rgba(2, 6, 23, .10);
  --brand: #b91c1c;
  --brand2: #1e3a8a;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Prompt, Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% 10%, rgba(244,63,94,0.14), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(6,182,212,0.12), transparent 55%),
              radial-gradient(900px 600px at 50% 100%, rgba(99,102,241,0.06), transparent 50%),
              var(--bg);
}

a { color: inherit; text-decoration: none; }

/* Button visibility + focus */
button, a { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease; }
button:active, a:active { transform: translateY(0.5px); }
button:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(244,63,94,0.25); }

/* Shared */
.card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
}

.muted { color: var(--muted); }

.btn {
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger { background: #ef4444; color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--stroke); }

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}

/* Shell */
.femi-shell {
  min-height: 100vh;
  padding-bottom: 78px; /* space for bottom nav */
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--stroke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}

.appbar-left { display:flex; align-items:center; gap:10px; }
.brand { font-weight: 900; letter-spacing: .5px; color: var(--brand2); }
.appbar-title { font-weight: 700; }

.appbar-right { display:flex; align-items:center; gap:10px; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-backdrop { position:absolute; inset:0; background: rgba(2,6,23,.35); }
.drawer-panel {
  position:absolute; top:0; right:0; height:100%; width: 320px; max-width: 90vw;
  background: rgba(255,255,255,.96);
  border-left: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  display:flex; flex-direction:column;
}
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding: 14px; border-bottom:1px solid var(--stroke); }
.drawer-title { font-weight: 800; }

/* ✅ FIX: ให้ nav เป็นส่วนที่ยืดได้ + เลื่อนได้จริง เมื่อเมนูขยายสูง */
.drawer-nav{
  display:flex;
  flex-direction:column;
  padding: 10px;
  gap: 6px;

  /* สำคัญมากสำหรับ flex column + overflow */
  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* กันรายการท้าย ๆ โดนปุ่มออกจากระบบ/ฟุตเตอร์บัง */
  padding-bottom: 120px;
}

.drawer-nav a { padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; }
.drawer-nav a:hover { background: rgba(185,28,28,.08); border-color: rgba(185,28,28,.15); }

/* ✅ รองรับทั้งชื่อ class เดิมและที่บางหน้ามีการใช้ต่างกัน */
.drawer-footer,
.drawer-foot {
  padding: 14px;
  border-top: 1px solid var(--stroke);
}

.no-scroll { overflow: hidden; }

/* Bottom nav */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255,255,255,.92);
  border-top: 1px solid var(--stroke);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px 10px;
}

.bn-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  font-size: 12px;
  color: rgba(15,23,42,.72);
  padding: 8px 6px;
  border-radius: 14px;
}
.bn-item svg { opacity: .9; }
.bn-item.active {
  color: var(--brand);
  background: rgba(185,28,28,.08);
}

/* Page helpers */
.page-title { font-size: 28px; margin: 8px 0 2px; }
.page-sub { margin: 0 0 14px; }

.grid-2 { display:grid; grid-template-columns: 1fr; gap: 12px; }
.grid-3 { display:grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 820px) {
  /* still mobile-first but nicer spacing */
  .container { padding: 20px; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Preventive list UI */
.tabs { display:flex; gap:8px; margin: 12px 0 14px; }
.tab {
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}
.tab.active { border-color: rgba(185,28,28,.35); background: rgba(185,28,28,.08); color: var(--brand); }

.stat-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.stat { padding: 12px; }
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 800; margin-top: 4px; }

.item-card { display:flex; flex-direction:column; gap: 10px; padding: 14px; }
.item-top { display:flex; justify-content:space-between; gap: 10px; }
.item-title { font-weight: 800; }
.pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(248,250,252,.9); }
.pill.due { border-color: rgba(22,163,74,.35); }
.pill.over { border-color: rgba(239,68,68,.35); }
.actions { display:flex; gap: 8px; }
.btn-ok { background:#16a34a; color:#fff; }
.btn-warn { background:#f59e0b; color:#111; }

.hidden { display:none !important; }

/* ===== Pastel Clean Tiles + SVG icon sizing (ADD-ON) ===== */
:root{
  /* pastel accents for tiles */
  --pv-a:#e0f2fe; --pv-b:#eff6ff;
  --fp-a:#ede9fe; --fp-b:#f5f3ff;
  --kb-a:#dcfce7; --kb-b:#f0fdf4;
  --qz-a:#ffedd5; --qz-b:#fff7ed;
  --noti-a:#ffe4e6; --noti-b:#fff1f2;
}

/* modern svg icon sizing */
.svg-ic{ width:20px; height:20px; display:block; color: currentColor; }

/* quick tiles */
.tiles{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 760px){
  .tiles{ grid-template-columns: 1fr; }
}
.tile{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  text-decoration:none;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}
.tile .left{ display:flex; align-items:center; gap: 12px; min-width:0; }
.tile .title{ font-weight: 900; line-height: 1.2; }
.tile .sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width: 60vw;
}
.tile .iconWrap{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(255,255,255,.6);
}

/* pastel variants */
.tile.pv{ background: linear-gradient(135deg, var(--pv-a) 0%, var(--pv-b) 100%); }
.tile.fp{ background: linear-gradient(135deg, var(--fp-a) 0%, var(--fp-b) 100%); }
.tile.kb{ background: linear-gradient(135deg, var(--kb-a) 0%, var(--kb-b) 100%); }
.tile.qz{ background: linear-gradient(135deg, var(--qz-a) 0%, var(--qz-b) 100%); }
.tile.noti{ background: linear-gradient(135deg, var(--noti-a) 0%, var(--noti-b) 100%); }

/* soft badge */
.badge-soft{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 20px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 900;
}

/* ===== Home: Summary pastel backgrounds + themed pills ===== */
.card.summary{
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: none;
}

/* Summary backgrounds (pastel clean) */
.card.summary.fp{
  background: linear-gradient(135deg, rgba(237,233,254,.75) 0%, rgba(245,243,255,.88) 100%);
}
.card.summary.pv{
  background: linear-gradient(135deg, rgba(224,242,254,.78) 0%, rgba(239,246,255,.88) 100%);
}
.card.summary.noti{
  background: linear-gradient(135deg, rgba(255,228,230,.70) 0%, rgba(255,241,242,.88) 100%);
}
.card.summary.quiz{
  background: linear-gradient(135deg, rgba(255,237,213,.78) 0%, rgba(255,247,237,.90) 100%);
}

/* Slightly boost readability inside summary cards */
.card.summary .muted{ color: rgba(15,23,42,.70); }

/* Themed pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(248,250,252,.92);
  font-weight: 700;
}

/* FP pill (purple) */
.pill-fp{
  border-color: rgba(99,102,241,.22);
  background: rgba(237,233,254,.85);
  color: rgba(55,48,163,.95);
}
.pill-fp:hover{ background: rgba(237,233,254,.95); }

/* PV pill (cyan/blue) */
.pill-pv{
  border-color: rgba(6,182,212,.20);
  background: rgba(224,242,254,.88);
  color: rgba(12,74,110,.95);
}
.pill-pv:hover{ background: rgba(224,242,254,.98); }

/* Notifications pill (pink/red) */
.pill-noti{
  border-color: rgba(244,63,94,.22);
  background: rgba(255,228,230,.88);
  color: rgba(159,18,57,.95);
}
.pill-noti:hover{ background: rgba(255,228,230,.98); }

/* Quiz pill (orange) */
.pill-quiz{
  border-color: rgba(245,158,11,.22);
  background: rgba(255,237,213,.90);
  color: rgba(124,45,18,.95);
}
.pill-quiz:hover{ background: rgba(255,237,213,.99); }

/* FORCE summary backgrounds (override inline) */
.card.summary.fp{ background: linear-gradient(135deg, rgba(237,233,254,.75) 0%, rgba(245,243,255,.88) 100%) !important; }
.card.summary.pv{ background: linear-gradient(135deg, rgba(224,242,254,.78) 0%, rgba(239,246,255,.88) 100%) !important; }
.card.summary.noti{ background: linear-gradient(135deg, rgba(255,228,230,.70) 0%, rgba(255,241,242,.88) 100%) !important; }
.card.summary.quiz{ background: linear-gradient(135deg, rgba(255,237,213,.78) 0%, rgba(255,247,237,.90) 100%) !important; }