:root {
  --bg-color: #f5f6fa;
  --card-bg: #fff;
  --contrast-bg: #ececec;

  --other: #ebedf4;

  --text-main: #2e334d;
  --text-2: #424866;
  --text-3: #6d7496;
  --text-4: #86888f;
  --text-muted: #cacee2;
  
  --border-color: #f1f1f1;
  --green-check: #109d31;
  --blue-accent: #2088ff;

  --input-bg: #fafafa;

  --border-2: #d3d8dc00;

  --medicon: #ffffff;

  --link-blue: #0088ff;
}

body.dark {
  --bg-color: #12141c;
  --card-bg: #1e202b;
  --text-main: #dfe4ea;
  --other: #8f80ff11;

  --border-color: #2a2a2d;


  --text-2: #a3afc1;
  --text-3: #5e6472;

  --text-muted: #4d4558;
  --contrast-bg: #313950;

  --medicon: #b7c9f01e;

  .bottom-nav{
    background-color: var(--card-bg);
  }


  .card.wellbeing{
  background-color:#1b3525;
 }.article-header.wellbeing, .article-icon.wellbeing{
  color: #90cba6;
  }

  .card.meds{
  box-shadow: none;
  text-decoration: none;
  border: none;
  background-color: #525a3bd1;
}.article-header.meds, .article-icon.meds{
  color: #c5d594;
}


  .card.cycle{
  background-color:#301a27;
 }.article-header.cycle, .article-icon.cycle{
  color: #cc90b8;
}

}
body.dagobah {
  --bg-color: #f1f6ee;
  --card-bg: #dae7dd;
  --text-main: #33493c;
  --text-2: #53685a;
  --text-3: #5e7262;

  --contrast-bg: #f0f0ef;
  --blue-accent: #293a23;

  --link-blue: #01aa47;
}



.contraceptive-qs{
  display: none;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans";
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  background-color: var(--bg-color);
  background-image: linear-gradient( #cc00ff08 1%, var(--bg-color));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  padding: 18px;

  background-repeat: no-repeat;
  background-position: top center;
  /* Restrict background width to match phone dimensions */
}




.card {
  width: 100%;
  max-width: 440px;
  border-radius: 26px;
  padding: 14px 12px;

  
  background: rgba(255, 255, 255, 0.809);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  border: 1px solid rgba(148, 145, 150, 0.153);
  box-shadow: 
    0px 2px 3px  rgba(0, 0, 0, 0.01), 

    inset 0 1px 0 rgba(255, 255, 255, 0.607),
    inset 0 -1px 0 rgba(255, 255, 255, 0.209),
    inset 0px 0px 58px  0px rgba(0, 0, 0, 0);
}

/* Utility: breaks one element out of body's 18px side padding (see the
   `body { padding: 18px; }` rule above) so it spans edge-to-edge with the
   screen instead of sitting inset like everything else.
   How it works: a parent's padding isn't something a child can "opt out"
   of from the inside -- the child is always laid out inside that inset
   content box. The trick is to counteract it directly: pull the element
   out by the same amount its ancestor pads inward (negative margins equal
   to that padding), then grow the element's width back to fill the space
   that opened up. The two numbers below (18px, so 36px = 18+18) are
   intentionally tied to body's own padding value -- if that value ever
   changes, update this to match.
   Compound selector (.card.full-bleed) so this reliably wins over .card's
   own width/margin regardless of stylesheet load order. To use it on a
   non-card element instead, add a plain `.full-bleed` rule with the same
   three declarations. */
.card.full-bleed {
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
}

/* Plain version of the same trick for an element that ISN'T a .card --
   nothing here is fighting .card's own width: 100% for specificity, so a
   single class is enough. (Used on .calendar-strip-container, which
   intentionally has no .card background/rounded corners of its own.) */
.full-bleed {
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
}
.article-icon{
  height: 70px;
  width: 80px;
}
.article-icon .cycle{
  padding: 4px;

}

.card.wellbeing{
  box-shadow: none;
  border: none;
  background-color:rgb(206, 238, 225);
}.article-header.wellbeing, .article-icon.wellbeing{
  color: #057456;}


.card.cycle{
  box-shadow: none;
  background-color:#f2d3ec;
}.article-header.cycle, .article-icon.cycle{
  color: #ab1f81;
}


.card.meds{
  box-shadow: none;
  text-decoration: none;
  border: none;
  background-color: #e3eec4d1;
}.article-header.meds, .article-icon.meds{
  color: #668800;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}



#user-display-name {
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#user-display-name:active {
  opacity: 0.6;
  transform: scale(0.97);
}



/* Add Button */
.add-btn {
  width: 100%;
  background-color:var(--blue-accent);
  color:  white;
  border:none;
  padding: 12px 16px;
  border-radius: 12px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  
  transition: all 0.3s;
}
.add-btn.mood{
  margin-top: 0px;
}
.add-btn:hover{
  background-color: #c70a43;
  color:  #ffffff;
}




.article-header{
  font-size: 17px;
  display: flex;
  justify-content: space-between;
}

.article-title svg{
  height: 30px;
  width: auto;
  padding-bottom: 2px;
}

.article-title{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 660;

}
.article-tease{
  color: var(--text-main);
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  font-weight: 460;
}
.article-text-wrap{
  max-width: calc((100%) - (86px));
}


.title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);

  display: flex;
  align-items: center;
  gap: 8px;
}
.title svg{
  padding: 2px;
  border-radius: 99%;
  height:26px;
  width: auto;
  color: var(--text-main);
}


.tab2 {
  margin-left: 4px;
  font-size: 22px;
  font-weight: 700;
}




.mini-pill-header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 10px;
  gap: 6px;
  color: #000000;
  padding: 0px 2px 6px 2px;
  margin-top: -2px;
  border-bottom: 1px solid var(--border-color);
}
.mini-pill-header.full{
  padding-bottom: 8px;
}

.mini-pill-title{
  font-size: 19px;
  font-weight: 540;
  color: var(--text-main);

  display: flex;
  align-items: center;
  gap: 7px;
}
.mini-pill-title svg{
  height: 21px;
  width: auto;
  margin-bottom: 1px;
}
.date-range-badge {
  font-size: 13px;
  font-weight: 280;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.mini-pill-header .date-range-badge{
  color: var(--text-muted)
}
.date-range-light{
  color: #fff;
}



.card-break{
  height: 30px;
}

.header-title-row{
  display: flex;
  flex-direction: row;
  align-items:center;
  gap: 11px;
  padding-left: 4px;
}
.header-titles p{
  font-size: 12px;
  color: var(--text-3);
  font-weight: 560;
  margin-bottom: 4px;
}

.baby-label{
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
}

.status-counter {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}


.subtitle-btn {
  background: transparent;
  border: none;
  color: var(--link-blue);
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  margin-top: 2px;
  text-align: left;
}

.add-btn-mini{
  background-color: var(--contrast-bg);
  color: var(--text-2);
  font-weight: 640;
  border: none;
  border-radius: 50px;
  padding: 4px;

  display: flex;
  align-items: center;
}
.add-btn-mini svg{
  width: 26px;
  height: 26px;
}

.bottom-nav {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  height: 60px;

  border: none;

  background: rgba(255, 255, 255, 0.061);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.477);
  box-shadow: 
    0 15px 50px rgba(0, 0, 0, 0.184),
    inset 0 1px 0 rgba(255, 255, 255, 0.747),
    inset 0 -1px 0 rgba(255, 255, 255, 0.503),
    inset 0px 0px 58px  0px rgba(255, 255, 255, 0.282);




  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 60vw;
  border-radius: 999px;
  margin: 0 auto;
  z-index: 1000;
  /* iOS Safe Area padding for home indicator bar */
  padding-bottom: env(safe-area-inset-bottom);
}



.nav-btn {
  background: none;
  border: none;
  outline: none;
  border-radius: 50px;
  padding: 0px;

  cursor: pointer;
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
  color: var(--text-3);
  transition: all 0.08s;
}

.nav-btn svg{
  height: 30px;
  width: auto;
}
.heart svg{
  height: 32px;
  width: auto;
}
/* Active State Styling */
.nav-btn.active {
  opacity: 1;
  color: var(--text-main);
  transform: scale(0.9);
}



/* Default state (Inactive) */
.nav-btn .icon-filled,
.card .icon-filled {
  display: none;
}

.nav-btn .icon-outline,
.card .icon-outline {
  display: block;
}

/* Active state */
.nav-btn.active .icon-outline,
.card.active .icon-outline {
  display: none;
}

.nav-btn.active .icon-filled,
.card.active .icon-filled {
  display: block;
}





.order-btn{
  border: none;
  background: none;
  margin-left: 0px;
  margin-bottom: -10px;
  color: var(--text-3);
}.order-btn svg{
height: 36px;
width: auto;
}.order-btn:hover{
  color: var(--link-blue);
}

/* --- Modal Toggle Row Styles --- */
.display-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  user-select: none;
}

.toggle-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary-accent, #e42c38);
  cursor: pointer;
}

/* Hidden Card State */
.card.card-hidden {
  display: none !important;
}