@import url('/css/global.css');
@import url('/app/home/index.css');

/* Layout split */
.cal-and-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 24px 16px;
  box-sizing: border-box;
}

/* Calendar block */
.caffeine-cal-wrap { width: 100%; box-sizing: border-box; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin: 8px 0 4px; }
.cal-title { span { font-family: var(--star-bold); font-size: 20px; } }
.cal-nav { border: none; background: transparent; font-size: 28px; cursor: pointer; padding: 4px 8px; 
color: black;}

.cal-weekdays {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 6px;
}
.cal-weekdays > div { text-align:center; }

.caffeine-cal {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  display:grid;
  place-items: center;
  padding: 6px;
  box-sizing:border-box;
  transition: outline 0.15s ease;
}
.cal-cell .cal-day { font-size: 12px; opacity: 0.8; font-family: var(--star-reg);}
.cal-empty { background: transparent; }
.cal-cell.selected { outline: 1px solid var(--border); }

/* Define your heat colors */
.heat-0 { background: #00000000; }
.heat-1 { background: var(--primary-3); color: white; }
.heat-2 { background: var(--primary-2); color: white; }
.heat-3 { background: var(--primary); color: white; }


.caffeine-recent {
    padding: 0 !important;
}