:root{
  --primary:#4A90E2;
  --primary-dark:#3478C5;
  --navy:#183B56;
  --baby-blue:#DCEEFF;
  --baby-blue-light:#EDF6FF;
  --background:#F5F9FC;
  --card:#FFFFFF;
  --border:#DDE7F0;
  --text:#183B56;
  --text-secondary:#718096;

  --success:#63B995;
  --warning:#F4B860;
  --danger:#E76F6F;
  --danger-dark:#C94F4F;

  /* legacy aliases so every component below stays consistent */
  --ink:var(--text);
  --ink-soft:var(--text-secondary);
  --white:var(--card);
  --sage-dark:var(--primary);
  --lavender:var(--baby-blue);
  --coral:var(--danger);
  --coral-dark:var(--danger-dark);
  --blush:var(--baby-blue);
  --shadow: 0 8px 24px rgba(24,59,86,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; height:100%;}
body{
  margin:0;
  font-family:'Nunito Sans', 'Nunito', sans-serif;
  background: var(--background);
  color:var(--text);
  height:100%;
  position:relative;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

.hidden{ display:none !important; }

/* ---- Alarm banner: stays until dismissed, impossible to miss ---- */
.alarm-banner{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:var(--danger); color:#fff; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:800; font-size:.95rem;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
  animation: alarmPulse 1.4s ease-in-out infinite;
}
@keyframes alarmPulse{ 0%,100%{ background:var(--danger);} 50%{ background:var(--danger-dark);} }
.alarm-dismiss-btn{
  background:rgba(255,255,255,0.25); color:#fff; border:none; border-radius:10px;
  padding:9px 16px; font-weight:800; cursor:pointer; flex-shrink:0; font-size:.85rem;
}
.alarm-dismiss-btn:active{ background:rgba(255,255,255,0.4); }
body.has-alarm-banner .pos-shell{ padding-top:52px; }

.pos-shell{
  position:relative; z-index:1;
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* ---- Left nav rail ---- */
.pos-nav{
  width:190px; flex:0 0 190px;
  background:var(--card);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:18px 12px;
  gap:6px;
  z-index:2;
  overflow-y:auto;
  scrollbar-width:thin;
}
.pos-brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:1rem; color:var(--primary-dark); padding:0 4px 4px; }
.brand-icon{ font-size:1.3rem; }
.baby-chip{
  background:var(--baby-blue-light); padding:8px 12px; border-radius:14px;
  font-weight:700; font-size:.85rem; color:var(--text); margin-bottom:8px; text-align:center;
}
.caregiver-select{
  display:flex; flex-direction:column; gap:3px; margin-bottom:10px; padding:0 2px;
}
.caregiver-select span{ font-size:.68rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.03em; }
.caregiver-select select{
  border:1.5px solid var(--border); border-radius:10px; padding:7px 8px; font-size:.82rem;
  font-family:inherit; color:var(--text); background:var(--card);
}
.nav-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:none; background:transparent; border-radius:14px; padding:12px 6px;
  font-family:inherit; font-weight:700; font-size:.74rem; color:var(--text-secondary);
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.nav-btn .nav-icon{ font-size:1.3rem; }
.nav-btn:hover{ background:var(--baby-blue-light); }
.nav-btn.active{ background:var(--primary); color:#fff; box-shadow:0 4px 10px rgba(74,144,226,0.35); }
.nav-spacer{ flex:1; }
.nav-status{ font-size:.72rem; font-weight:700; color:var(--text-secondary); text-align:center; padding:6px 4px; }
.nav-status.due{ color:var(--danger-dark); }

/* ---- Main scrollable panel area ---- */
.pos-main{
  flex:1; min-width:0;
  overflow-y:auto;
  padding:22px 24px 40px;
}
.panel{ display:none; }
.panel.active{ display:block; }
.panel-grid{ display:flex; flex-direction:column; gap:16px; }
.panel-grid.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }

/* ---- Right receipt / activity rail ---- */
.pos-receipt{
  width:270px; flex:0 0 270px;
  background:var(--card);
  border-left:1px solid var(--border);
  padding:18px 14px;
  overflow-y:auto;
  z-index:2;
}
.receipt-title{
  font-size:1rem; font-weight:800; margin:0 0 14px; color:var(--text);
}

/* ---- Timeline (Recent Activity) ---- */
.timeline{ position:relative; padding-left:18px; display:flex; flex-direction:column; gap:14px; }
.timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--border); }
.timeline-item{ position:relative; cursor:pointer; padding:2px 0 2px 8px; }
.timeline-item::before{
  content:''; position:absolute; left:-17px; top:4px; width:10px; height:10px; border-radius:50%;
  background:var(--primary); border:2px solid var(--card); box-shadow:0 0 0 2px var(--border);
}
.timeline-item .t-title{ font-weight:800; font-size:.85rem; color:var(--text); display:flex; align-items:center; gap:6px; }
.timeline-item .t-detail{ font-size:.78rem; color:var(--text-secondary); margin-top:1px; }
.timeline-item .t-meta{ font-size:.72rem; color:var(--text-secondary); font-weight:700; margin-top:2px; }
.timeline-item:hover .t-title{ color:var(--primary-dark); }

/* ---- POS-style key grid (nappy quick actions) ---- */
.pos-key-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:6px; }
.pos-key{
  border:none; border-radius:16px; padding:20px 8px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.95rem; color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .12s ease;
}
.pos-key:active{ transform:scale(0.95); }
.pos-key:disabled{ opacity:.6; cursor:default; }
.pos-key .key-icon{ font-size:2rem; }
.key-poop{ background:#F4D9A6; }
.key-pee{ background:var(--baby-blue); }
.key-mixed{ background:#E3D9F5; }
.home-nappy-keys .pos-key{ padding:14px 6px; }
.home-nappy-keys .key-icon{ font-size:1.5rem; }

.card{
  background:var(--card);
  border-radius:18px;
  padding:22px 22px 24px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}
.card-title{
  font-size:1.05rem;
  font-weight:800;
  margin:0 0 14px;
  color:var(--text);
}

/* ---- Feeding ring: signature element ---- */
.ring-card{ text-align:center; }
.ring-holder{ position:relative; width:220px; height:220px; margin:0 auto 14px; }
.ring{ width:220px; height:220px; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--baby-blue-light); stroke-width:14; }
.ring-progress{
  fill:none; stroke:var(--primary); stroke-width:14; stroke-linecap:round;
  stroke-dasharray:603; stroke-dashoffset:603;
  transition: stroke-dashoffset 1s linear, stroke 0.6s ease;
}
.ring-progress.warn{ stroke:var(--warning); }
.ring-progress.due{ stroke:var(--danger); }

.ring-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
}
.baby-face{
  width:64px; height:64px; border-radius:50%;
  background:var(--baby-blue);
  position:relative; margin-bottom:6px;
  animation: breathe 3.2s ease-in-out infinite;
}
.baby-face.awake{ animation: wiggle 0.6s ease-in-out infinite; background:#B9DCFF; }
.baby-face::before{
  content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:10px solid var(--baby-blue);
  filter:drop-shadow(-14px 3px 0 var(--baby-blue)) drop-shadow(14px 3px 0 var(--baby-blue));
}
.baby-face.awake::before{ border-bottom-color:#B9DCFF; filter:drop-shadow(-14px 3px 0 #B9DCFF) drop-shadow(14px 3px 0 #B9DCFF); }
@keyframes breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }
@keyframes wiggle{ 0%,100%{ transform:rotate(-4deg);} 50%{ transform:rotate(4deg);} }
.face-cheeks::before, .face-cheeks::after{
  content:''; position:absolute; width:9px; height:6px; background:rgba(74,144,226,0.35);
  border-radius:50%; top:38px;
}
.face-cheeks::before{ left:10px; }
.face-cheeks::after{ right:10px; }
.face-eyes{ position:absolute; top:24px; left:0; right:0; display:flex; justify-content:center; gap:14px; }
.eye{ width:6px; height:6px; background:var(--text); border-radius:50%; display:block; }
.baby-face.asleep .eye{ height:2px; border-radius:2px; margin-top:2px; }
.face-mouth{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  width:12px; height:6px; border-bottom:2px solid var(--text); border-radius:0 0 10px 10px;
}
.baby-face.awake .face-mouth{ width:8px; height:8px; border-radius:50%; border:2px solid var(--text); border-top:none; background:transparent;}

.ring-elapsed{ font-size:2.1rem; font-weight:900; color:var(--text); }
.ring-sub{ font-size:.78rem; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

.status-line{ font-size:.92rem; color:var(--text-secondary); font-weight:600; margin:8px 0 16px; min-height:1.2em; }
.status-line.due{ color:var(--danger-dark); }
.ml-today{ font-size:.82rem; color:var(--primary-dark); font-weight:800; margin:-10px 0 14px; }

.quick-amount-row{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px;
}
.quick-amount-label{ font-size:.8rem; font-weight:700; color:var(--text-secondary); }
.quick-amount-unit{ font-size:.8rem; font-weight:700; color:var(--text-secondary); }
.stepper{ display:flex; align-items:center; gap:0; }
.stepper-btn{
  width:38px; height:38px; border:1.5px solid var(--border); background:var(--card); color:var(--text);
  font-size:1.2rem; font-weight:800; cursor:pointer; line-height:1;
}
.stepper-btn:first-child{ border-radius:10px 0 0 10px; border-right:none; }
.stepper-btn:last-child{ border-radius:0 10px 10px 0; border-left:none; }
.stepper-btn:active{ background:var(--baby-blue-light); }
#quickFeedAmount, #homeQuickFeedAmount, #drankItAmount{
  width:64px; height:38px; text-align:center; border:1.5px solid var(--border); border-left:none; border-right:none;
  font-size:1rem; font-weight:800; color:var(--text); font-family:inherit;
  -moz-appearance:textfield;
}
#quickFeedAmount::-webkit-outer-spin-button, #quickFeedAmount::-webkit-inner-spin-button,
#homeQuickFeedAmount::-webkit-outer-spin-button, #homeQuickFeedAmount::-webkit-inner-spin-button,
#drankItAmount::-webkit-outer-spin-button, #drankItAmount::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.btn{
  border:none; border-radius:12px; padding:13px 18px; font-family:inherit;
  font-weight:800; font-size:.95rem; cursor:pointer; transition:transform .1s ease, opacity .1s ease, box-shadow .1s ease;
}
.btn:active{ transform:scale(0.97); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }
.btn:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.btn-big{ width:100%; padding:15px; font-size:1rem; border-radius:14px; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:active{ background:var(--primary-dark); }
.btn-secondary{ background:var(--baby-blue); color:var(--text); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:active{ background:var(--danger-dark); }
.btn-poop{ background:#F4D9A6; color:var(--text); flex:1; }
.btn-pee{ background:var(--baby-blue); color:var(--text); flex:1; }
.btn-mixed{ background:#E3D9F5; color:var(--text); flex:1; }
.btn-row{ display:flex; gap:10px; }

.more-options{ margin-top:14px; text-align:left; }
.more-options summary{ cursor:pointer; font-weight:700; color:var(--text-secondary); font-size:.88rem; }
.inline-form{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.inline-form label{ font-size:.8rem; font-weight:700; color:var(--text-secondary); display:flex; flex-direction:column; gap:4px; }
.inline-form input, .inline-form select{
  border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; font-size:.95rem;
  font-family:inherit; color:var(--text);
}
.inline-form input:focus, .inline-form select:focus{ outline:none; border-color:var(--primary); }

.predict-box{
  display:flex; align-items:center; gap:14px;
  background:var(--baby-blue-light); border-radius:16px; padding:16px; margin-bottom:16px;
}
.predict-icon{ font-size:2rem; }
.predict-label{ font-size:.78rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.03em; }
.predict-value{ font-weight:800; font-size:1.15rem; color:var(--text); }
.predict-detail{ font-size:.8rem; color:var(--text-secondary); margin-top:2px; }

.wet-nappy-count{
  display:flex; align-items:center; gap:14px; background:var(--baby-blue-light);
  border-radius:16px; padding:14px 18px; margin-bottom:16px;
}
.wet-nappy-icon{ font-size:1.8rem; }
.wet-nappy-num{ font-size:1.6rem; font-weight:900; color:var(--primary-dark); }
.wet-nappy-label{ font-size:.78rem; color:var(--text-secondary); font-weight:700; }

.history-list{ display:flex; flex-direction:column; gap:8px; }
.history-item{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--baby-blue-light); border-radius:12px; padding:10px 14px; font-size:.88rem;
  cursor:pointer;
}
.history-item .h-icon{ margin-right:8px; }
.history-item .h-time{ color:var(--text-secondary); font-weight:700; font-size:.78rem; }

.settings-card .inline-form{ flex-direction:row; flex-wrap:wrap; align-items:end; gap:10px; }
.settings-card label{ flex:1 1 160px; }
.settings-card{ margin-bottom:16px; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(120%);
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:14px;
  font-weight:700; font-size:.9rem; box-shadow:var(--shadow); z-index:300;
  transition: transform .35s ease;
}
.toast.show{ transform:translateX(-50%) translateY(0); }

.undo-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:14px;
  font-weight:700; font-size:.9rem; box-shadow:var(--shadow); z-index:300;
  display:flex; align-items:center; gap:16px;
}
.undo-toast button{
  background:rgba(255,255,255,0.2); color:#fff; border:none; border-radius:8px;
  padding:6px 14px; font-weight:800; cursor:pointer; font-size:.82rem;
}

/* ---- Formula timer ---- */
.formula-hint{ font-size:.9rem; color:var(--text-secondary); margin:0 0 12px; line-height:1.4; }
.formula-timer{ text-align:center; }
.formula-ring-holder{ position:relative; width:220px; height:220px; margin:0 auto 10px; }
.formula-progress{ stroke:var(--baby-blue); }
.formula-progress.warn{ stroke:var(--warning); }
.formula-progress.due{ stroke:var(--danger); }
.sleep-progress{ stroke:#C9B6EE; }
.formula-drop{ font-size:1.6rem; margin-bottom:4px; }

/* ---- Health ---- */
.health-disclaimer{
  background:var(--baby-blue-light); border-radius:14px; padding:12px 16px; margin-bottom:16px;
  font-size:.82rem; color:var(--text-secondary); line-height:1.4;
}

/* ---- Dashboard ---- */
.stat-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:20px;
}
.stat-tile{
  background:var(--baby-blue-light); border-radius:14px; padding:14px 8px; text-align:center;
  border:none; font-family:'Nunito Sans', sans-serif; width:100%;
}
.stat-tile-clickable{ cursor:pointer; transition:background .15s ease, transform .1s ease; }
.stat-tile-clickable:hover{ background:var(--baby-blue); }
.stat-tile-clickable:active{ transform:scale(0.97); }
.stat-icon{ font-size:1.3rem; }
.stat-num{ font-weight:900; font-size:1.3rem; color:var(--text); margin-top:4px; }
.stat-label{ font-size:.72rem; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }

.trend-title{ font-size:.95rem; font-weight:800; margin:16px 0 10px; color:var(--text-secondary); }
.trend-header-row{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.trend-header-row .trend-title{ margin:0; }
.trend-summary{ font-size:.82rem; color:var(--text-secondary); font-weight:700; margin-top:6px; }
.insights-link{
  display:inline-block; margin:12px 0 16px; color:var(--primary); font-weight:800; font-size:.88rem; text-decoration:none;
}
.insights-link:hover{ text-decoration:underline; }

/* Chip-style toggle buttons (dashboard series switch, insights range picker) */
.chip-toggle{ display:flex; gap:6px; }
.chip{
  background:var(--baby-blue-light); border:none; border-radius:999px; padding:6px 14px;
  font-size:.78rem; font-weight:800; color:var(--text-secondary); cursor:pointer; font-family:'Nunito Sans', sans-serif;
}
.chip.active{ background:var(--primary); color:#fff; }

/* Chart.js containers — fixed height wrapper since Chart.js needs a sized parent */
.chart-container{ position:relative; height:220px; width:100%; margin-bottom:8px; }
.chart-container-sm{ height:160px; }

/* ---- Growth ---- */
.growth-summary{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:6px; }
.growth-summary-tile{ background:var(--baby-blue-light); border-radius:14px; padding:14px; text-align:center; }
.growth-summary-label{ font-size:.7rem; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.growth-summary-num{ font-size:1.4rem; font-weight:900; color:var(--text); margin-top:4px; }
.growth-last-measured{ font-size:.78rem; color:var(--text-secondary); margin-bottom:16px; }

.growth-chart{
  display:flex; align-items:flex-end; gap:8px; height:100px; padding:10px 4px;
  background:var(--baby-blue-light); border-radius:14px; margin:10px 0 16px; overflow-x:auto;
}
.empty-hint{ font-size:.8rem; color:var(--text-secondary); align-self:center; margin:0 auto; }
.growth-bar-col{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; min-width:34px; }
.growth-bar{ width:14px; background:var(--primary); border-radius:5px 5px 2px 2px; }
.growth-bar-label{ font-size:.62rem; color:var(--text-secondary); font-weight:700; white-space:nowrap; }
.growth-bar-value{ font-size:.68rem; color:var(--text); font-weight:800; }

/* ---- Milestones ---- */
.milestone-item{
  background:var(--baby-blue-light); border-radius:12px; padding:10px 14px; margin-bottom:8px; font-size:.85rem;
  cursor:pointer;
}
.milestone-item .m-time{ display:block; font-size:.72rem; color:var(--text-secondary); font-weight:700; margin-top:2px; }

/* ---- Photo album ---- */
.photo-upload-form{ margin-bottom:20px; }
.photo-source-row{ display:flex; gap:10px; margin-bottom:12px; }
.photo-file-label{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--baby-blue-light); border:2px dashed var(--border); border-radius:14px; padding:18px 10px;
  font-weight:800; color:var(--text-secondary); cursor:pointer; font-size:.85rem; text-align:center;
}
.photo-file-label input{ display:none; }
.photo-preview-chip{
  display:flex; align-items:center; gap:10px; background:var(--baby-blue-light); border-radius:12px;
  padding:8px 12px; margin-bottom:10px; font-size:.82rem; font-weight:700; color:var(--text);
}
.photo-preview-chip img{ width:44px; height:44px; object-fit:cover; border-radius:8px; flex-shrink:0; }

.album-date-header{
  font-weight:800; font-size:.9rem; color:var(--text-secondary);
  margin:22px 0 10px; padding-bottom:6px; border-bottom:2px dashed var(--border);
}
.album-date-header:first-child{ margin-top:0; }
.album-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:18px 14px;
}
.polaroid-tile{
  background:var(--card); padding:8px 8px 28px; border-radius:6px;
  box-shadow:0 6px 14px rgba(24,59,86,0.12); cursor:pointer;
  transition:transform .15s ease; position:relative;
}
.polaroid-tile:nth-child(3n+1){ transform:rotate(-2deg); }
.polaroid-tile:nth-child(3n+2){ transform:rotate(1.5deg); }
.polaroid-tile:nth-child(3n+3){ transform:rotate(-1deg); }
.polaroid-tile:hover, .polaroid-tile:active{ transform:scale(1.04) rotate(0deg); z-index:1; }
.polaroid-tile img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--baby-blue-light); }
.polaroid-caption{
  position:absolute; left:8px; right:8px; bottom:8px; text-align:center;
  font-size:.72rem; font-weight:700; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; background:rgba(24,59,86,0.9); z-index:250;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:30px;
}
.lightbox img{ max-width:min(90vw, 600px); max-height:60vh; border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,0.4); }
.lightbox-caption{ color:#fff; font-weight:700; font-size:1rem; text-align:center; }
.lightbox-meta{ color:rgba(255,255,255,0.7); font-size:.8rem; }
.lightbox-close{
  position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.15); color:#fff; border:none;
  border-radius:50%; width:40px; height:40px; font-size:1.1rem; cursor:pointer;
}
.lightbox-delete{ margin-top:6px; }

.export-btn{ display:block; text-align:center; text-decoration:none; margin-top:16px; }

/* ================= HOME PAGE ================= */
.home-header{ margin-bottom:18px; }
.home-greeting{ font-size:1.7rem; font-weight:900; color:var(--text); }
.home-subgreeting{ font-size:.95rem; color:var(--text-secondary); margin-top:2px; }
.home-baby-row{ display:flex; align-items:baseline; gap:12px; margin-top:12px; flex-wrap:wrap; }
.home-baby-name{ font-size:1.3rem; font-weight:900; color:var(--primary-dark); }
.home-baby-age{ font-size:.9rem; color:var(--text-secondary); font-weight:700; }
.home-date{ font-size:.85rem; color:var(--text-secondary); margin-left:auto; }

.rightnow-bar{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:20px;
}
.rn-tile{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:12px 10px; text-align:center; box-shadow:var(--shadow);
}
.rn-icon{ font-size:1.2rem; }
.rn-label{ font-size:.68rem; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
.rn-value{ font-size:.95rem; font-weight:800; color:var(--text); margin-top:2px; }
.rn-value.due{ color:var(--danger-dark); }
.rn-value.warn{ color:#B87A16; }

.home-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
}
.home-card{ text-align:center; }
.home-big-number{ font-size:2.4rem; font-weight:900; color:var(--text); line-height:1.1; margin:6px 0 2px; }
.home-big-sub{ font-size:.78rem; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.home-detail-row{ font-size:.85rem; color:var(--text-secondary); margin-bottom:6px; }
.home-reminder{ font-weight:700; color:var(--primary-dark); }
.home-reminder.due{ color:var(--danger-dark); }
.home-today-counts{ display:flex; justify-content:center; gap:20px; margin:10px 0 14px; font-size:.9rem; color:var(--text-secondary); }
.home-today-counts strong{ color:var(--text); font-size:1.1rem; }
.home-today-summary{ margin-top:4px; }

@media (max-width:1100px){
  .home-grid{ grid-template-columns:1fr; }
  .rightnow-bar{ grid-template-columns:repeat(2, 1fr); }
}

/* ================= MODALS ================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(24,59,86,0.45); z-index:260;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:var(--card); border-radius:18px; padding:22px; width:100%; max-width:420px;
  box-shadow:0 20px 50px rgba(0,0,0,0.25); max-height:85vh; overflow-y:auto;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  font-size:1.1rem; font-weight:800; color:var(--text); margin-bottom:14px;
}
.modal-close{ background:var(--baby-blue-light); border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:1rem; color:var(--text-secondary); }
.modal-body{ font-size:.9rem; color:var(--text); }
.modal-body p{ margin:0 0 10px; line-height:1.5; }
.modal-sub{ color:var(--text-secondary); }
.modal-warning{ color:var(--danger-dark); font-size:.82rem; }
.modal-footer{ display:flex; gap:10px; margin-top:18px; }
.modal-footer .btn{ flex:1; }

.activity-detail-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:.88rem; }
.activity-detail-row:last-child{ border-bottom:none; }
.activity-detail-label{ color:var(--text-secondary); font-weight:700; }

.drankit-quick-choices{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; justify-content:center; }
.drankit-quick-choices button{
  background:var(--baby-blue-light); border:1.5px solid var(--border); border-radius:10px;
  padding:8px 14px; font-weight:800; color:var(--text); cursor:pointer; font-size:.85rem;
}
.drankit-quick-choices button.selected{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---- Insights ---- */
.insights-header-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.insights-subnav{ display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.insights-tab{
  background:none; border:none; padding:8px 14px; border-radius:10px 10px 0 0;
  font-size:.85rem; font-weight:800; color:var(--text-secondary); cursor:pointer;
  font-family:'Nunito Sans', sans-serif; white-space:nowrap; border-bottom:3px solid transparent;
}
.insights-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }

.insights-view{ display:none; }
.insights-view.active{ display:block; }

.insights-summary-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; margin-bottom:8px;
}
.insights-tile{
  background:var(--baby-blue-light); border-radius:14px; padding:14px 10px; text-align:center;
}
.insights-tile-icon{ font-size:1.2rem; }
.insights-tile-value{ font-weight:900; font-size:1.15rem; color:var(--text); margin-top:4px; }
.insights-tile-label{ font-size:.7rem; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-top:2px; }
.insights-tile-wide{ grid-column:1 / -1; background:none; padding:4px 0; text-align:left; }
.insights-change{ font-size:.82rem; font-weight:800; }
.insights-change.up{ color:var(--success); }
.insights-change.down{ color:var(--danger); }
.insights-change.flat{ color:var(--text-secondary); }

/* Today's sleep/wake timeline — a single 24h bar with sleep sessions as segments */
.sleep-timeline{ background:var(--baby-blue-light); border-radius:14px; padding:16px 14px 10px; }
.timeline-track{ position:relative; height:34px; background:var(--card); border-radius:8px; overflow:hidden; }
.timeline-segment{ position:absolute; top:0; bottom:0; background:var(--primary); border-radius:4px; }
.timeline-hours{ display:flex; justify-content:space-between; font-size:.68rem; color:var(--text-secondary); font-weight:700; margin-top:6px; }

/* ---- Nursery (placeholder states only — no hardware wired in yet) ---- */
.nursery-camera-card{ display:flex; flex-direction:column; }
.nursery-camera-placeholder{
  flex:1; min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; background:var(--baby-blue-light); border:2px dashed var(--border); border-radius:16px; margin-top:4px;
}
.nursery-camera-icon{ font-size:2.4rem; opacity:.6; }
.nursery-camera-label{ font-weight:800; color:var(--text); }
.nursery-camera-status{ font-size:.85rem; color:var(--text-secondary); font-weight:700; }

.nursery-env-row{ display:flex; gap:12px; margin-bottom:10px; }
.nursery-env-tile{ flex:1; background:var(--baby-blue-light); border-radius:14px; padding:18px 10px; text-align:center; }
.nursery-env-value{ font-weight:900; font-size:1.6rem; color:var(--text-secondary); }
.nursery-env-label{ font-size:.78rem; color:var(--text-secondary); font-weight:700; margin-top:4px; }
.nursery-sensor-status{ font-size:.85rem; color:var(--text-secondary); font-weight:700; text-align:center; margin-bottom:6px; }

/* ---- Online/offline status dot — reused on Nursery panel and Home card ---- */
.status-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; flex-shrink:0;
}
.status-dot.online{ background:var(--success); box-shadow:0 0 0 3px rgba(99,185,149,0.2); }
.status-dot.offline{ background:var(--text-secondary); }
.nursery-status-row{
  display:flex; align-items:center; justify-content:center; gap:2px;
  font-size:.82rem; font-weight:700; color:var(--text-secondary); margin-bottom:12px;
}

/* ---- Home page compact Nursery card ---- */
.home-nursery-card{ grid-column:1 / -1; }
.home-nursery-row{
  display:flex; align-items:center; justify-content:center; gap:18px; margin:10px 0 14px; flex-wrap:wrap;
}
.home-nursery-stat{ font-size:1.4rem; font-weight:900; color:var(--text); }
.home-nursery-status-chip{
  display:flex; align-items:center; font-size:.8rem; font-weight:700; color:var(--text-secondary);
  background:var(--baby-blue-light); padding:5px 12px; border-radius:999px;
}
.nursery-empty-chart{
  background:var(--baby-blue-light); border-radius:14px; padding:28px 16px; text-align:center;
  color:var(--text-secondary); font-size:.85rem; font-weight:600; margin-bottom:8px;
}

@media (max-width:400px){
  .ring-holder, .formula-ring-holder{ width:170px; height:170px; }
  .ring{ width:170px; height:170px; }
  .stat-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; }
}

/* ---- Portrait / narrow: stack the POS shell like the original single-column layout ---- */
@media (max-width:900px), (orientation:portrait){
  .pos-shell{ flex-direction:column; height:auto; overflow:visible; }
  .pos-nav{
    width:auto; flex:none;
    flex-direction:row; align-items:center; overflow-x:auto;
    padding:12px; gap:6px;
    position:sticky; top:0;
  }
  .pos-brand{ display:none; }
  .baby-chip{ margin:0 8px 0 0; flex:0 0 auto; }
  .nav-btn{ flex-direction:row; flex:0 0 auto; padding:10px 14px; }
  .nav-spacer{ display:none; }
  .nav-status{ display:none; }
  .caregiver-select{ flex-direction:row; align-items:center; gap:6px; margin:0 8px 0 0; flex:0 0 auto; }
  .caregiver-select span{ display:none; }
  .pos-main{ padding:16px; }
  .panel-grid.two-col{ grid-template-columns:1fr; }
  .pos-receipt{ width:auto; flex:none; max-height:280px; }
  .home-grid{ grid-template-columns:1fr; }
  .rightnow-bar{ grid-template-columns:repeat(2, 1fr); }
  .home-date{ margin-left:0; width:100%; }
  .insights-header-row{ flex-direction:column; align-items:flex-start; }
  .nursery-env-row{ flex-direction:column; }
}